CSS

스타일 시트

종류	설명
브라우저 기본 스타일	웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일
인라인 스타일	style 속성을 사용해 필요한 요소에 직접 스타일을 지정하는 것
내부 스타일 시트	문서 앞부분에 문서에서 사용하는 스타일을 지정하는 것
외부 스타일 시트	.css파일로 저장된 스타일 시트를 해당 문서에 연결해 사용하는 것

 

 

 

CSS 기본 선택자

종류	설명	작성 예시
전체 선택자	문서의 모든 요소에 스타일 적용	* { background-color: #fff }
타입 선택자	특정 태그를 사용한 모든 요소에 스타일 적용	h1 { background-color: #fff }
클래스 선택자	특정 부분만 선택해서 스타일 적용 ( 여러번 적용 가능 )	.bg { background-color: #fff }
ID 선택자	특정 부분만 선택해서 스타일 적용 ( 한번만 적용 가능 )	# container { background-color: #fff }
그룹 선택자	여러 요소에 같은 스타일 적용	h1, p { background-color: #fff }

 

 

 

글자와 관련된 속성

종류	설명
font-family	글꼴 종류를 지정
font-size	글자 크기 지정
font-style	글자 이탤릭체 지정
font-weight	글자 굵기 지정

 

 

 

텍스트 스타일 속성

종류	속성
color	글자색 지정
text-decoration	밑줄, 취소선 표시 여부 지정
text-transform	텍스트 전체 또는 첫 글자 대문자 표시
text-shadow	텍스트 그림자 지정
letter-spacing	글자 사이 간격 지정
word-spacing	단어 사이 간격 지정
text-align	텍스트 정렬 방법 지정
line-height	줄 간격 조절

 

 

 

박스 모델 속성

종류	설명
width	박스 모델의 너비 지정
height	박스 모델의 높이 지정
box-sizing	박스 모델의 크기 계산 기준 지정
box-shadow	박스 모델에 그림자 효과 지정

박스 모델에서 블록 레벨 요소와 인라인 레벨 요소가 있다

블록 레벨 요소

  - 혼자 한 줄을 차지

  - <h1>, <div>, <p>등

인라인 레벨 요소

  - 한 줄 차지x, 콘텐츠만큼만 영역 차지

  - <span>, <img>, <strong>등

 

 

 

테두리 속성

속성	설명
border-style	상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정
border-위치-style	'위치'자리에 top, right, bottom, left중 선택해 특정 위치에만 테두리 스타일 지정
border-width	상하좌우 4개 방향 테두리 두께를 한꺼번에 지정
border-위치-width	'위치'자리에 top, right, bottom, left중 선택해 특정 위치에만 테두리 두께 지정
border-color	상하좌우 4개 방향 테두리 색상를 한꺼번에 지정
border-위치-color	'위치'자리에 top, right, bottom, left중 선택해 특정 위치에만 테두리 색상 지정
border-radius	상하좌우 4개 방향 꼭지점을 한꺼번에 둥글게 지정
border-위치-radius	'위치'자리에 top-left, top-right, bottom-right, bottom-left중 선택해 특정 위치에만 특정 꼭지점 둥글게 지정

 

 

 

여백 속성

종류	설명
margin	상하좌우 4개 방향의 마진을 한꺼번에 지정
margin-위치	'위치'자리에 top, right, bottom, left중 선택해 특정 위치에만 마진 지정
padding	상하좌우 4개 방향의 패딩을 한꺼번에 지정
padding-위치	'위치'자리에 top, right, bottom, left중 선택해 특정 위치에만 패딩 지정

 

 

 

레이아웃 속성

종류	설명
display	화면에서 요소의 배치방법을 지정 block, inline, inline-block, none등
float	웹 요소를 왼쪽이나 오른쪽에 배치 float을 적용한 요소는 clear속성으로 해제하지 않으면 뒤에 오는 요소도 float이 적용됨

 

 

 

위치 지정 속성

종류	설명
left, right, top, bottom	기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정
position	웹 요소의 위치 지정 static, relative, absolute, fixed등

 

 

 

배경 이미지 관련 속성

종류	설명
boackground-color	배경색 지정
background-clip	배경색이나 이미지를 어디까지 적용할지 지정
background-image	배경 이미지 지정
background-repeat	배경 이미지 반복 방법 지정
background-position	배경 이미지의 위치 지정
background-origin	배경 이미지 배치 기준 지정
background-attachment	배경 이미지 문서에 고정
background-size	배경 이미지의 크기 조절
background	하나의 속성으로 배경 스타일을 한꺼번에 지정