[HTML/CSS] 필수 CSS 선택자, CSS 속성 모음

[HTML/CSS] 필수 CSS 선택자, CSS 속성 모음

CSS에는 선택자와 속성이 있다.

div {
	font-size: 20px;
}

여기서 div가 '선택자'가 되는 것이고, font-size가 속성이 된다.

속성은 특정한 값을 가진다.

 

선택자 {
	속성: 값;
}

이런 식으로 CSS 문서가 구성이 된다.

 

아래에서는 아주 잘 쓰이는 CSS 선택자와 속성을 알아볼 것이다.

 

 

1. CSS 선택자

선택자	설명	상세 설명
*	페이지 전체 요소	스타일시트 전체가 요소를 공유한다.
.X	X class의 요소	class는 여러 번 쓸 수 있다.
#X	X id의 요소	id는 한 번만 쓸 수 있다.
X	X 태그의 요소	html 문서의 특정 X 태그가 요소를 공유한다.
X Y	X 태그 내부의 모든 Y 태그의 요소	Descendant Selector라고 함.

 

2. CSS 속성

속성 이름	설명	부가 설명 or 비고
opacity	투명도	0.0(0%)부터 1.0(100%)까지의 수
overflow	내용물이 넘칠 경우 처리 방식	overflow: hidden; 같은 줄에 각각의 내용을 왼쪽정렬, 오른쪽 정렬을 함께 쓰고 싶을 경우 사용
position	위치 지정방식	position: static;(default) relative;, absolute; fixed;(고정 UI) 등의 값을 가짐
top	위
bottom	아래
left	왼쪽
right	오른쪽
float	요소의 부유 방식	문서 작성할 때 글자와 함께 배치와 같은 역할을 함. 동일 라인에서 좌우 정렬을 함께 쓰고 싶을 때 사용.
width	넓이
height	높이
margin	마진	가장 바깥자리
padding	패딩	컨텐츠와 border의 간격
border	테두리	margin과 padding 사이. 말 그대로 테두리를 이야기 함
border-color	테두리 색상
border-width	테두리 두께
border-radius	테두리 곡률	테두리를 둥글게 만든다. aa bb / cc dd의 형식의 값을 가짐
background	배경	태그 전체의 배경을 의미
background-color	배경 색상
font	폰트
font-family	폰트 종류
font-size	폰트 크기
font-style	폰트 형태
font-weight	폰트 두께
color	폰트 컬러
line-height	폰트 행간격
text-align	폰트 정렬방식	왼쪽, 오른쪽, 가운데 정렬
box-shadow	박스 그림자
font-shadow	폰트 그림자