'Programming/css'에 해당되는 글 23건

  1. 2024.01.18 css 반응형 웹 대응 - 미디어 쿼리
  2. 2020.01.03 css3 calc()
  3. 2019.01.29 @keyframe in css
  4. 2018.10.25 css transform zindex origin
  5. 2018.10.25 css tooltip 위치
  6. 2018.10.10 css로 백그라운드만 돌리기
  7. 2018.09.05 css 계층 구조? 상속? 선택자 조합자?
  8. 2018.09.05 sass scss
  9. 2018.08.27 hover inline css
  10. 2018.08.21 css selector
Programming/css2024. 1. 18. 16:17

css 반응형 웹 대응 - 미디어 쿼리

body에 onresize가 없는데 어떻게 작동하나 궁금해서 찾아보니

css에 이상한게 발견!

 

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

[링크 : https://www.w3schools.com/cssref/css3_pr_mediaquery.php]

 

폭이 1000px 이하일 때 적용

@media (max-width: 1000px) {
    body {
        background: gold;
    }
}

min-width를 사용하는 경우
스마트폰 등 가장 작은 사이즈에서의 레이아웃을 기본으로 하고, 점차 확장되어가는 형태로 CSS를 작성합니다.

max-width를 사용하는 경우
데스크탑용의 가장 큰 화면 사이즈의 레이아웃을 기본으로 하고, 점차 축소하는 형태로 CSS를 작성합니다

[링크 : https://studiomeal.com/archives/1004]

[링크 : https://www.daleseo.com/css-media-queries/]

[링크 : https://log.designichthus.com/11]

저작자표시

'Programming > css' 카테고리의 다른 글

css3 calc()  (0) 2020.01.03
@keyframe in css  (0) 2019.01.29
css transform zindex origin  (0) 2018.10.25
css tooltip 위치  (0) 2018.10.25
css로 백그라운드만 돌리기  (0) 2018.10.10
Posted by 구차니
Programming/css2020. 1. 3. 16:14

css3 calc()

css에서 연산을 할 수 있게 한다는 것은 양날의 검이 될 듯 한데..

아무튼 이런 기능이 있다는걸 오늘 처음 알았음.

 

[링크 : https://developer.mozilla.org/ko/docs/Web/CSS/calc]

[링크 : https://www.codingfactory.net/10373]

[링크 : https://techbug.tistory.com/215]

저작자표시

'Programming > css' 카테고리의 다른 글

css 반응형 웹 대응 - 미디어 쿼리  (0) 2024.01.18
@keyframe in css  (0) 2019.01.29
css transform zindex origin  (0) 2018.10.25
css tooltip 위치  (0) 2018.10.25
css로 백그라운드만 돌리기  (0) 2018.10.10
Posted by 구차니
Programming/css2019. 1. 29. 10:10

@keyframe in css

react.js 기본 예제 프로젝트 보다가 보니

App-logo-spin 이라는게 있어서 추적하다보니 나와서 보는 중


[링크 : https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp]


암튼.. @keyframe은 css 문법이었네? @로 시작하는게 머가 있나 봐야겠다

keyframe을 제외하면 아래정도인가?

[링크 : https://www.w3schools.com/cssref/pr_charset_rule.asp]

[링크 : https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp]

[링크 : https://www.w3schools.com/cssref/pr_import_rule.asp]

[링크 : https://www.w3schools.com/cssref/css3_pr_mediaquery.asp]

저작자표시

'Programming > css' 카테고리의 다른 글

css 반응형 웹 대응 - 미디어 쿼리  (0) 2024.01.18
css3 calc()  (0) 2020.01.03
css transform zindex origin  (0) 2018.10.25
css tooltip 위치  (0) 2018.10.25
css로 백그라운드만 돌리기  (0) 2018.10.10
Posted by 구차니
Programming/css2018. 10. 25. 15:44

css transform zindex origin

어디서 본건지 까먹었는데 relative로 해주어야 위치가 먹힌다고..

그리고 origin은 left|right top|bottom 식으로 조합이 가능하다.

transform-origin: left top;

position: relative;

 [링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale]

 [링크 : https://www.w3schools.com/cssref/css3_pr_transform-origin.asp]

저작자표시

'Programming > css' 카테고리의 다른 글

css3 calc()  (0) 2020.01.03
@keyframe in css  (0) 2019.01.29
css tooltip 위치  (0) 2018.10.25
css로 백그라운드만 돌리기  (0) 2018.10.10
css 계층 구조? 상속? 선택자 조합자?  (0) 2018.09.05
Posted by 구차니
Programming/css2018. 10. 25. 15:43

css tooltip 위치

left랑 right가 헷갈리는 녀석일세..

left로 하면 오른쪽으로 가버리고..

right로 하면 왼쪽으로 가버림 -_-

(그러니까 left 면 왼쪽으로 부터 시작해서 그 위치니까 오른쪽 이 되는건가?)


[링크 : https://stackoverflow.com/.../css3-rotation-and-scaling-on-same-elements-messes-up-z-index]

[링크 : https://www.w3schools.com/css/css_tooltip.asp]

저작자표시

'Programming > css' 카테고리의 다른 글

@keyframe in css  (0) 2019.01.29
css transform zindex origin  (0) 2018.10.25
css로 백그라운드만 돌리기  (0) 2018.10.10
css 계층 구조? 상속? 선택자 조합자?  (0) 2018.09.05
sass scss  (0) 2018.09.05
Posted by 구차니
Programming/css2018. 10. 10. 19:16

css로 백그라운드만 돌리기

잘 안되네... (예제만은 잘됨.. 내꺼에는 안됨.. ㅠㅠ)

일단 핵심은 :before라는 슈도 태그 인듯..

(근데 난 d3로 svg 그리는데 zindex랑 꼬여서 영 안됨..)


body

{

font-family: arial, helvetica, freesans, sans-serif;

font-size: 100%;

color: #333;

background-color: #ddd;

}


h1

{

font-size: 1.5em;

font-weight: normal;

margin: 0;

  text-align: center;

  padding-top: 1em;

}


#element2

{

width: 12em;

font-size: 2em;

text-align: center;

line-height: 5em;

margin: 3em auto;

border: 2px solid #666;

border-radius: 7px;


  position: relative;

overflow: hidden;

}


#element2:before

{

content: "";

position: absolute;

width: 200%;

height: 200%;

top: -50%;

left: -50%;

z-index: -1;

background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/background.png) 0 0 repeat;

transform: rotate(45deg);

} 


[링크 : https://www.sitepoint.com/css3-transform-background-image/]

[링크 : https://stackoverflow.com/questions/24842026/rotate-background-image-of-div-90-degrees-using-jquery]

저작자표시

'Programming > css' 카테고리의 다른 글

css transform zindex origin  (0) 2018.10.25
css tooltip 위치  (0) 2018.10.25
css 계층 구조? 상속? 선택자 조합자?  (0) 2018.09.05
sass scss  (0) 2018.09.05
hover inline css  (0) 2018.08.27
Posted by 구차니
Programming/css2018. 9. 5. 18:54

css 계층 구조? 상속? 선택자 조합자?

키워드를 몰라서 헤매는중..

.class1.class2 이런식으로 정의된 css를 본적이 있어서

상속인지 어떤건지 몰라서 찾는 중..


[링크 : https://windtale.net/blog/maintainable-expandable-front-end-web-strategy/] << CSS 구조화 방법

[링크 : https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance]

[링크 : https://www.cmsfactory.net/node/11369]


[링크 : https://css-tricks.com/almanac/selectors/c/class/]

[링크 : https://stackoverflow.com/questions/18584015/multiple-dots-periods-in-css]

[링크 : https://stackoverflow.com/questions/14132276/html-css-what-do-elements-with-multiple-dots-mean?lq=1]

[링크 : https://css-tricks.com/multiple-class-id-selectors/]

저작자표시

'Programming > css' 카테고리의 다른 글

css tooltip 위치  (0) 2018.10.25
css로 백그라운드만 돌리기  (0) 2018.10.10
sass scss  (0) 2018.09.05
hover inline css  (0) 2018.08.27
css selector  (0) 2018.08.21
Posted by 구차니
Programming/css2018. 9. 5. 18:43

sass scss

Syntactically Awesome StyleSheets

Sassy CSS


문법적으로 끝내주는 스타일시트, 믓진 CSS


이름은 죽이는군 ㅋㅋ

CSS의 한계를 벗어나기 위해 약간은 컴파일 하는 듯한 느낌의 무언가?


[링크 : https://sass-lang.com/]

[링크 : https://velopert.com/1712]

[링크 : https://github.com/sass/node-sass]

저작자표시

'Programming > css' 카테고리의 다른 글

css로 백그라운드만 돌리기  (0) 2018.10.10
css 계층 구조? 상속? 선택자 조합자?  (0) 2018.09.05
hover inline css  (0) 2018.08.27
css selector  (0) 2018.08.21
css BEM( Block Element Modifier)  (0) 2018.08.21
Posted by 구차니
Programming/css2018. 8. 27. 15:36

hover inline css

결론은...

inline css로는 hover를 쓸 수 없다.


대신 onMouseOver/onMouseOut 이벤트로 구현이 가능하다. 정도?

onMouseOver="this.style.color='#0F0'"

onMouseOut="this.style.color='#00F'" 


[링크 : http://banasun.tistory.com/entry/inlinecss에서-ahover-스타일-지정하기]

[링크 : https://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css]

저작자표시

'Programming > css' 카테고리의 다른 글

css 계층 구조? 상속? 선택자 조합자?  (0) 2018.09.05
sass scss  (0) 2018.09.05
css selector  (0) 2018.08.21
css BEM( Block Element Modifier)  (0) 2018.08.21
css float overflow  (0) 2018.08.20
Posted by 구차니
Programming/css2018. 8. 21. 19:33

css selector


[링크 : https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048]

저작자표시

'Programming > css' 카테고리의 다른 글

sass scss  (0) 2018.09.05
hover inline css  (0) 2018.08.27
css BEM( Block Element Modifier)  (0) 2018.08.21
css float overflow  (0) 2018.08.20
css 우선순위  (0) 2018.08.09
Posted by 구차니

티스토리툴바