CSS 기초

CSS

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

id와 class의 차이

1. id

• '#'으로 선택
• 한 문서에 하나의 요소에만 적용
• 특정 요소에 이름을 붙이는데 사용

2. class

• '.'으로 선택
• 동일한 값을 갖는 요소가 많음
• 스타일의 분류에 사용

CSS 꾸미기

색상 속성

• color -> 글자 색상 변경
• background-color -> 배경 색상 변경
• border-color -> 테두리 색상 변경

글꼴 속성

• font-family -> 글꼴 변경
• font-size -> 글자 크기 변경
• font-weight -> 글자 굵기 변경
• text-decoration -> 글자 밑에 밑줄 생성
• letter-spacing -> 자간
• line-height -> 행간
• text-align -> 글자 정렬

절대 단위와 상대단위

절대단위

• px, pt 등
• 기기나 브라우저 사이즈 등의 환경에 영향 받지 않는 크기를 정할 때 사용

상대단위

• %, em, rem, vw, vh 등
• 기기나 브라우저 사이즈 등의 환경에 따라 변경되야 하는경우의 크기를 정할 때 사용

박스모델

• HTML 요소는 하나의 박스

	block	inline- block	inline
줄 바꿈 여부	줄 바꿈이 일어남	줄 바꿈이 일어나지 않음	줄 바꿈이 일어나지 않음
기본적으로 갖는 너비	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능

박스 속성

• border -> 테두리
• margin -> 바깥 여백
• padding -> 안쪽 여백
• overflow -> auto, hidden 등의 값을 사용하여 초과 컨텐츠를 처리한다.

CSS Selector

* {}      -> 전체 셀렉터: 문서의 모든 요소 선택
div {}    -> 태그 셀렉터: 같은 태그명을 가진 모든 요소 선택
#id {}    -> ID 셀렉터: 같은 id명을 가진 요소 선택
.class {} -> class 셀렉터: 같은 class명을 가진 모든 요소 선택
attribute 셀렉터: 같은 속성을 가진 요소를 선택

자식 / 후손 / 형제 Selector

1. 자식 셀렉터 -> ex) header > div { }

• header태그의 자식인 div태그들만 선택

2. 후손 셀렉터 -> ex) header div { }

• header태그에 존재하는 모든 div태그 선택

3. 형제 셀렉터 -> ex) section ~ p { }

• section태그의 형제 중 모든 p태그 선택

4. 인접 형제 셀렉터 -> ex) section + p { }

• section태그의 형제 중 바로 다음으로 오는 p태그 선택