CSS 핵심 개념

html에서 css를 실행하려면 style속성으로 추가할 수 있었다.

->css 규칙이라고 하고 값을 다른 것으로 바꿔도 한 번에 바꿀 수 있다.

관심사의 분리 : 내용이랑 스타일을 분리하는 것(HTML, CSS)

css 규칙 : 선택자(요소), 선언(스타일 적용 (속성 : 속성값;))

h3(선택자){
color: #ffffff;(속성)
}

id : 딱 하나의 태그만 적용하고 싶을 때 사용
<\h3 id="hallasan">이렇게 바꾸고 css규칙에서 선택자를 #hallasan으로 바꾸면 됨(\는 필요 없음)

• id를 만들 때는 중복할 수 없음

여러개를 선택하고 싶다면 class를 사용해야 함
<\h3 class="place">
<\h3 class="place">
<\h3 class="place">(\필요 없음)
.place{
~
}
class는 하나만 바꾸는 것도 됨

css 파일 분리해서 가져오기
style.css로 만듦

는 문서 바깥에 있는 데이터를 불러오는 태그 index.html에서 rel : 불러올 파일과의 관계 href : 파일주소

f12 : 개발자 도구 열기

다양한 색상 단위
색상 이름 : red, yellow, white,...
색상 코드 : #ff0000, #ffff00,....

빛의 삼원색으로 빨강, 초록, 파랑을 사용하여 색을 만듦
0~255까지의 빛의 세기를 나타냄
#ff0000빨강
#ffff00노랑(빨강 + 초록)
#ffffff흰색(빨강 + 초록 + 파랑)
rgb(255, 0, 0) 빨강

RGBA : RGB에 불투명도를 추가한 것
불투명도 0~1 사이의 소수점 숫자
0으로 갈수록 옅어지고 1로 갈수록 짙어짐
rgba(255, 0, 0, 1)

절대적인 단위 : 픽셀
상대적인 단위 : 퍼센트, em, rem

PPI : 모니터에서 1인치 정사각형 안에 픽셀이 몇 개나 들어가는지
해상도 : 화면에 가로로, 세로로 몇 px를 보여주는지

퍼센트 : 부모태그에 대해서 상대적인 크기
크기를 바꾸고 싶을 때 부모의 크기만 바꾸면 됨

em : 인쇄에서 전통적으로 대문자 M의 크기
CSS에서 1em = 부모 태그의 font-size
ex) 16px에 2em = 16px에 32px
rem : 1rem = <\html> 태그의 font-size(\필요 없음)

이렇게도 할 수 있음