CSS

CSS (Cascading Style Sheets)

CSS란 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어

CSS 구조

CSS 파일 추가하기

여러 개의 class를 하나의 엘리먼트에 적용하기

 

클래스끼리 띄어쓰기로 구분한다

id와 클래스의 차이점

id: # 으로 선택, 한 문서에 단 하나의 요소만, 특정 요소에 이름을 붙임

class: . 으로 선택, 동일한 값을 가질 수 있음, 스타일 분류에 사용

color: 글자 색상 변경

font-family: 글꼴 변경

font-size: 글자 크기 변경

font-weight: 글자 굵기 변경

text-decoration: 밑줄, 가로즐 등 글자 꾸미기

letter-spacing: 자간 조정

line-height: 행간 조절

text-align: 글자 정렬 가능

 

크기의 단위

절대 단위: px, pt 등

상대 단위: %, em, rem, ch, vw, vh 등

px: 기기나 브라우저 사이즈 등, 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 사용

rem: 브라우저의 기본 글자 크기가 1rem. 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리

 

박스

block: 줄 바꿈이 일어남. 기본적으로 갖는 너비(width)는 100%, width, height 사용 가능

inline: 줄 바꿈이 일어나지 않음, 기본적으로 갖는 너비는 글자가 차지하는 만큼임. width, height 사용 불가능

inline-block: 줄 바꿈이 일어나지 않음, 기본저긍로 갖는 너비는 글자가 차지하는 만큼, width, height 사용 가능

 

박스를 구성하는 요소

border (테두리)

각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있게 함

border-width(테두리 두께), border-style(테두리 스타일), border-color(테두리 색상) 등

margin (바깥 여백)

margin: 10px 20px 30px 40px은 상, 우, 하, 좌 순으로 적용(시계 방향)

margin: 10px 20px 의 경우, 상하는 10px, 좌우는 20px 적용

margin: 10px 의 경우, 상하좌우 모두 10px 적용ㄴ

padding (안쪽 여백)

값의 순서에 따른 방향은 margin과 동일

border-box

 

모든 박스에서 여백과 테두리를 포함한 크기로 계산됨

전체 셀렉터

* { }

문서의 모든 요소를 선택

태그 셀렉터

h1 { } div { } section, h1 { }

같은 태그명을 가진 모든 요소 선택, 복수로도 선택 가능

ID 셀렉터

#only { }

#id이름 으로 선택 가능

class 셀렉터

.widget { }

.class이름 으로 입력하여 선택, 같은 class를 가진 모든 요소 선택

attribute 셀렉터

a[href] { }

같은 속성을 가진 요소 선택

자식 셀렉터

첫 번째로 입력한 요소의 바로 아래 자식 요소만 선택

후손 셀렉터

첫 번째로 입력한 요소의 모든 후손 선택

형제 셀렉터

같은 부모 요소를 공유하며 첫 번째로 입력한 요소 뒤에 오는 요소들 모두 선택

인접 형제 셀렉터

같은 부모 요소를 공유하며 첫 번째로 입력한 요소 바로 뒤에 오는 요소만 선택