CSS 함수

CSS 변수 선언

홈페이지 color system이 있다면 변수로 저장해서 사용할 수 있고 유지보수에 유리하다.

:root {변수명:속성값}으로 작성하며 변수명 앞에는 하이픈 두 개(--)로 시작해야한다. 변수명에는 하이픈, 언더바 사용가능하다.

--basic_color:#333;
--basic-color:#000;

:root {
--main-txt-color:#333;
--sub-txt-color:#555
--main-bg-color:#ddd;
--common-border-color:#fafafa;
}

val()

val(변수명) 함수로 값을 지정할 수 있다.

h2 {color:val(--main-txt-color)}
p {color:val(--sub-main-color)}
section {background:val(--main-bg-color)}
div {border-color:val(--common-border-color)}

calc()

calculation 함수에 값은 크기나, 각도, 시간 백분율, 숫자 등 가능
너비를 계산할 때 자주 사용한다.

div {width:calc(100% - 100px)}

• div요소 100%에서 -100px을 뺀 값을 계산한다.
• 사칙연산자(+, -, *, /) 사용 가능
• 피연산자는 숫자만 가능
• 연산자 사이에 띄어쓰기 필수
• 0으로 나눌 수 없다.

min()

min() 함수는 괄호 안에 나열된 값 중에서 가장 작은 값을 적용한다.

min(value1, value2, ...)

img {width:min(50%, 400px);}

max()

max() 함수는 괄호 안에 나열된 값 중에서 가장 큰 값을 적용한다.

min(value1, value2, ...)

img {width:min(50%, 400px);}

clamp()

clamp() 함수는 값의 범위를 고정 및 제한한다

clamp(최솟값, 최적값, 최댓값)

p {font-size:clamp(1rem, 1vw, 2em);}

가상요소(Pseudo-elements)

::first-line

첫번째 줄에 스타일을 적용

p::first-line {...}

::first-letter

첫 번째 단어에 스타일을 적용

p::first-letter {...}

::before

요소 앞에 콘텐츠를 추가

div::before {content:""}

::after

요소 뒤에 콘텐츠를 추가

div::after {content:""}

::before, ::after 응용

• clearfix

.float_r::after {content:"";display:block;clear:both}

• 불릿

ul li {padding:0 0 0 10px;position:relative}  
ul li::before {content:"";width:10px;height:10px;background:url("/src/img/bullet.png") 0 0 no-repeat;position:absolute:left:0;top:0}   

/* 아래의 방식도 가능 */
ul li::before {content:url("/src/img/bullet.png")}  

• 뱃지(badge) : 불릿방식과 같으며 알림이 떴을 때

ul li {padding:0 0 0 10px;position:relative}  
ul li.is_alarm:before {content:"";width:10px;height:10px;background:url("/src/img/bullet.png") 0 0 no-repeat;position:absolute:left:0;top:0}  

• 가상요소는 DOM 접근이 어렵기 때문에 토글 클래스로 처리하는게 편하다.

• 넘버링

  • ol의 list-style로 가능하나 들여쓰거나 내어쓸 수 있다.

세미콜론 개수

css2에서 :가상요소로 등장하였고 호환성 및 이전 버전의 일관성의 이유로 세미콜론 하나도 작동되지만 css3에서는 ::가상요소로 권장하고 있다.