기초

CSS 적용 방법

1. 인라인 스타일 : 태그 안에 Style 속성을 통해 사용하는 방법 

2. 내부 스타일 시트 : HTML 파일 안에 css style sheet를 선언하는 방법

3. 외부 스타일 시트 : 외부에 css 파일을 만들고, html에서 해당 css 파일을 링크 걸어 로드하는 방법

겹치는 경우 스타일 적용 우선 순위

인라인 > 내외부 스타일 시트 > 웹 브라우저 기본 스타일

기본 구조

Selector : CSS를 적용시킬 위치의 HTML element ex) h1, h2, h3

Property : Selector가 지정한 위치에서 '무엇'을 바꿀지. ex) font-size:

Value : Property가 얼마나 어떻게 바뀌게 할지 지정하는 값 ex) 100px

색 표현 방법

RGB

rgb(a,b,c);

rgba(a,b,c,d) : alpha값까지 추가(0~1)

Hex 값

#OOOOOO

16진수로 구성

수치값 표현 방법

픽셀(px)

고정된 절대 값으로 일반적인 측정 단위.

퍼센트

상대적 측정 값. 특정 요소 컨테이너 대비 n % 라던지

em, rem

em : 상위 element(container) 중 가장 가까운 것을 기준으로 px로 바뀌어 표시.

동적이기 때문에 em은 요소가 마구마구 수정되는 경우 굉장히 귀찮아지기 때문에 잘 쓰지 않는다.

ex) 상위 element의 font size가 10px이었다면 1em은 10px, 2em은 20px.

 

rem : 가장 최상위 container의 값을 기준으로 px로 바꾸어 표시. 

참고로 따로 설정되지 않았는데 1em, rem을 쓴다면 브라우저에서 설정된 기본 값을 상속받는다.

보통 정적으로 가장 최상위 container의 값을 상속받기 때문에 em보다는 rem을 자주 쓰게 된다.