CSS 우선순위 : !important - 인라인 스타일 - id 스타일 - class 스타일 - type 스타일(태그) margin 중첩 : margin값은 위아래 큰값으로 합쳐진다 background : / background-clip : border-box(테두리) | padding-box(테두리빼고) | content-box(패딩빼고 콘텐츠만) background-attachment : scroll | fixed background-size : cover(이미지가 덮이도록) | contain(이미지가 다 보이도록) background : repeating-linear-gradient(…) 반복그라데이션 연결 선택자 인접형제선택자(요소1 + 요소2 ) : 같은 레벨이면서 요소1이후 가장 먼저 오는 ..

% 전체에 대한 몇 % 값, 부모 기준 부모가 40px일 때 50%라면 20px이다. em 상위 요소의 배수 단위 부모 요소가 20px시 1em이라면 20px, 1.5em은 30px(20*1.5)이 된다. body{ font-size: 15px; } div{ /* 15*1.5=18px */ font-size: 1.5em; } 15 * 1.5 = 22.5px 18 * 1.5 = 33.75px 27 * 1.5 = 50.625px 이런식으로 상속을 받아 점점 커지게 된다. HTML 삽입 미리보기할 수 없는 소스 rem r는 root로서 최상위 속성에 기준을 둔다. em은 부모요소의 배수이지만 rem은 html의 배수이다. html의 기본 폰트가 16px인데 계산이 어렵기 때문에 html의 폰트사이즈를 10px..

삼각형 /* 기본 */ .down{ width:0; height:0; border-top:15px solid #000; border-right:15px solid transparent; border-left:15px solid transparent; } /* 라인 */ .down_line{ width:20px; height:20px; border:1px solid #000; border-width:0 2px 2px 0; transform:rotate(45deg); } /* 둥근라인 */ .down_line2{ position:relative; width:40px; height:40px; } .down_line2:after{ content:''; position:absolute; left:5px; top:..

:root를 사용하는 이유는 값을 한 번에 변경할 수 있다는 점에서 유용하다. 예를 들어 유지보수 시 main컬러값이 바뀌었을 경우 한꺼번에 값 변경이 가능하다는 점이다. 현재 나는 반응형에서 :root값을 조정해 폰트 사이즈 등을 조정해 주고 있다. IE에서는 적용이 되도록 스크립트를 넣어줘야 한다. 변수선언방법 :root{ /* --변수명 : 변수값; */ --main:#B8E7E1; --sub:#222; --point:#992BF2; --gray:#eee; --font-tit:32px; --font-sub-tit:25px; --font-regular:17px; --font-small:14px; } @media screen and (max-width:1024px){ :root{ --font-tit:2..

text border- 폰트테두리 text-shadow:-1px 0 rgba(0,0,0,.3), 0 -1px rgba(0,0,0,.3), 1px 0 rgba(0,0,0,.3), 0 1px rgba(0,0,0,.3); HTML 삽입 미리보기할 수 없는 소스 gradient - 그라데이션 그라데이션 자동 생성 사이트 https://www.colorzilla.com/gradient-editor/ background:linear-gradient(45deg, #28c983 0%,#db157b 50%,#385eea 100%); HTML 삽입 미리보기할 수 없는 소스 gradient border - 그라데이션 테두리 ul li{ width:240px; height:240px; border:4px solid trans..

css 가상 요소를 활용해 넘버링을 해주는 기능이다. ol뿐만 아니라 일반 태그에도 붙일 수 있다. 다만, 숫자 순번만 가능하다. css 카운터는 css선택자로 선택한 요소에만 순번을 붙일 수 있다. HTML 구조 내용01 내용01_01 내용02 내용02_01 내용03 counter-reset - 변수명 정의 넘버링을 하기 위해서는 부모 요소가 반드시 필요하다. 부모 요소에 counter-reset를 추가하여 변수 선언을 한다. 카운터를 초기화하고, 별도의 시작 값을 지정하지 않으면 0에서 시작한다. 변수명 뒤에 시작값을 추가할 수 있다. 시작 값을 추가하게 되면 1부터 증가 값을 더한 순으로 나열된다. .container{ /*변수명 [시작값]*/ counter-reset: num; counter-re..