CSS 규칙의 구조
CSS는 문서의 표현을 꾸미기 위한 스타일 규칙을 정의하는 스타일 시트 언어로, CSS 규틱은 선택자와 선언부로 구성된다.
선택자 (h2)
스타일을 적용할 HTML 요소를 선택하는 부분이다.
속성 (font-size)
선택한 HTML 요소에 적용할 스타일의 속성을 지정한다. 여기서 font-size는 글꼴 크기를 의미한다.
값 (value)
속성에 적용할 값으로 스타일의 구체적인 특성을 결정한다. 여기서는 글꼴 크기를 24픽셀로 지정한다는 뜻이다.
CSS 선택자
CSS 선택자는 규칙에서 스타일을 적용할 HTML 요소를 선택하는 부분으로 태그이름, ID, 클래스가 있다.
1) 태그 이름
특정 태그에 해당하는 요소들에 모두 스타일을 적용한다.
모든 h4 태그(부산 동네 한바퀴, 맛집 추천)의 글자색이 빨간색으로 변한 것을 볼 수 있다.
2) 아이디 (id)
맨 앞에 "#"을 붙여서 "#아이디 이름"과 같은 문법으로 쓴다. 아이디는 한 페이지 안에서 중복으로 사용하면 안된다.
앞서 태그 이름을 선택자로 두었을 때, 태그 이름에 해당하는 모든 글자들이 빨간색으로 스타일이 적용된 것을 볼 수 있었다. 그러나 id를 사용하였을 때에는 태그 이름이 같아도 id(popularfood)에 해당하는 요소(맛집 추천)만 빨간색으로 스타일이 적용된 것을 확인할 수 있다.
3) 클래스 (class)
아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용한다. 맨 앞에 마침표를 붙여서 ".클래스 이름"과 같은 문법으로 쓴다.
태그 이름이 다르지만, class를 통해 같은 스타일을 적용할 수 있다.
절대적인 크기 단위
1) 픽셀 (px)
절대적인 단위로, 화면을 표시하는 기준이 된다.
상대적인 크기 단위
1) 퍼센트 (%)
부모 태그의 크기에 상대적으로 지정할 때 쓴다. 예를 들어서 부모 태그의 font-size의 절반 값을 쓰고 싶다면 "font-size : 50%"로 쓸 수 있다.
여기서 자식 태그인 class = "text2"에 ".text2 { font-size : 50%; }"를 준다면 text2 클래스의 글자 크기는 어떻게 변할까?
50%로 줄어든 것을 확인할 수 있다.
2) em
em은 부모태그 font-size의 크기이다. 예를 들어서 부모 태그 글자 크기의 4배를 하고 싶다면, 4em으로 쓰면 된다.
3) rem
rem은 root-em이라는 의미의 단위이다. rem은 HTML 태그의 font-size 크기이다. 예를 들어서 <html> 태그 글자 크기에서 2배를 하고 싶다면 2rem이라고 쓰면된다.
위 사진은 text1에 1.5rem을 적용한 사진인데, html의 기본 폰트 크기보다 1.5배 커지고, text2는 2em이었기 때문에, 1.5rem인 text1보다 2배 커진 것을 볼 수 있다.
정리
'FE > CSS' 카테고리의 다른 글
| [CSS] Display (0) | 2024.01.20 |
|---|---|
| [CSS] 박스 모델 (4) | 2024.01.19 |
| [CSS] 배경 이미지 (0) | 2024.01.19 |
