[HTML] CSS 속성 및 설명

CSS

기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS입니다. 간단히 스타일 시트라고도 합니다.

HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축됩니다.

따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있습니다.

 

 

 

• 기본 선택자

종류	설명	작성 예시
전체 선택자	문서의 모든 요소에 스타일을 적용합니다.	* { margin: 0; }
타입 선택자	특정 태그를 사용한 모든 요소에서 스타일을 적용합니다.	p { font-style: italic; }
클래스 선택자	특정 부분만 선택해서 문서 안에 여러 번 적용 합니다. 마침표(.)를 붙여서 사용합니다.	.bg { background-color: #ddd; }
id 선택자	특정 부분만 선택해서 문서 안에 여러 번 적용 합니다. #을 붙여서 사용합니다.	#container { width: 500px; }
그룹 선택자	여러 요소에 같은 스타일을 적용할 때 사용합니다.	h1, h2 { text-align: center }

 

 

 

• 연결 선택자

종류	설명	형식
하위 선택자	상위 요소에 포함된 모든 하위 요소를 선택합니다.	상위요소 하위요소
자식 선택자	부모 요소에 포함된 자식 요소만 선택합니다.	부모요소 > 자식요소
인접 형제 선택자	요소1 이후 맨 먼저 오는 형제 요소를 선택합니다.	요소1 + 요소2
형제 선택자	요소1과 형제인 모든 요소를 선택합니다.	요소1 ~ 요소2

 

 

 

• 속성 선택자

종류	선택 요소	예시
[속성]	해당 속성이 있는 요소	[required]
[속성 = 값]	지정한 속성값이 있는 요소	[target = _blank]
[속성 ~= 값]	지정한 속성값이 포함된 요소 (단어별)	[class ~= button]
[속성 |= 값]	지정한 속성값이 포함된 요소 (하이픈 포함, 단어별)	[title |= us]
[속성 ^= 값]	지정한 속성값으로 시작하는 요소	[title ^= eng]
[속성 $= 값]	지정한 속성값으로 끝나는 요소	[href $= xls]
[속성 *= 값]	지정한 속성값의 일부가 일치하는 요소	[href *= w3]

 

 

 

• 가상 클래스

종류	설명
:link	방문하지 않은 링크에 스타일을 적용합니다.
:visited	방문했던 링크에 스타일을 적용합니다.
:hover	지정한 요소에 마우스 포인터를 올려놓을 때 스타일을 적용합니다.
:active	지정한 요소를 활성화했을 때 스타일을 적용합니다.
:focus	지정한 요소에 초점이 맞춰졌을 때 스타일을 적용합니다.
:target	앵커 대상에 스타일을 적용합니다.
:enabled	지정한 요소를 사용할 수 있는 상태일 때 스타일을 적용합니다.
:disabled	지정한 요소를 사용할 수 없는 상태일 때 스타일을 적용합니다.
:checked	선택한 요소의 스타일을 적용합니다.
:not	지정한 요소가 아닐 때 선택해서 스타일을 적용합니다.

 

 

 

• 구조 가상 클래스

선택자	설명
:only-child	부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택합니다.
A:only-type-of	부모 안에 A 요소가 하나뿐일 때 선택합니다.
:first-child	부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택합니다.
:last-child	부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택합니다.
A:first-of-type	부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택합니다.
A:list-of-type	부모 안에 있는 A 요소 중에서 마지막 요소를 선택합니다.
:nth-child(n)	부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택합니다.
:nth-last-child(n)	부모 안에 있는 모든 요소 중에서 끝에서  n번째 자식 요소를 선택합니다.
A:nth-of-type(n)	부모 안에 있는 A 요소 중에서 n번째 요소를 선택합니다.
A:nth-last-of-type(n)	부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택합니다.

 

 

 

• 가상 요소

종류	설명
::first-line	첫 번째 줄을 선택합니다.
::first-letter	줄에서 첫 번째 글자를 선택합니다.
::before	특정 요소의 앞에 내용이나 스타일을 추가합니다.
::after	특정 요소의 뒤에 내용이나 스타일을 추가합니다.

 

 

 

• 글자와 관련된 속성

종류	설명
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	박스 모델에 그람자 효과를 추가합니다.

 

 

 

• 테두리 속성

종류	속성
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 속성으로 해제 하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치됩니다.

 

 

 

• 위치 지정 속성

종류	설명
left, right, top, bottom	기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정합니다.
position	웹 요서의 위치를 지정합니다. 속성값으로 static, relative, absolute, fixed가 있습니다.

 

 

 

• 배경 이미지 관련 속성

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

 

 

• 웹에서 색상을 지정하는 방법

방법	설명
16진수	빨강, 초록, 파랑 각각 두 자리씩 총 여섯 자리의 16진수로 색상을 표현합니다.
rgb, rgba	rgb(R, G, B)	빨강, 초록 파랑의 양을 0~255 사이의 숫자로 표현합니다.
	rgba(R, G, B, a)	rgb 형식에 불투명도를 함께 표현합니다.
hsl, hsla	hsl(H, S, L)	색상, 채도, 명도의 값을 색상 표현합니다.
	hsla(H, S, L, a)	hsl 형식에 불투명도를 함께 표현합니다.
색상 이름	red, yello, black과 같은 색상 이름을 사용합니다.

 

 

 

• 변형 함수

translate( ) 함수: 요소 이동하기
transform: translate(tx, ty)	지정한 크기만큼 x축과 y축으로 이동합니다.
transform: translate(tx, ty, tz)	지정한 크기만큼 x축, y축, z축으로 이동합니다.
transform: translateX(tx)	지정한 크기만큼 x축으로 이동합니다.
transform: translateY(ty)	지정한 크기만큼 y축으로 이동합니다.
transform: translateZ(tz)	지정한 크기만큼 z축으로 이동합니다.

 

 

 

• 미디어 쿼리의 속성

종류	설명
width, height	웹 페이지의 가로 너비, 세로 높이
min-width, min-height	웹 페이지의 최소 너비, 최소 높이
max-width, max-height	웹 페이지의 최대 너비, 최대 높이
device-width, device-height	단말기의 가로 너비, 세로 높이
min-device-width, min-device-height	단말기의 최소 너비, 최소 높이
max-device-width, max-device-height	단말기의 최대 너비, 최대 높이
orientation: portrait	단말기의 세로모드
orientation: landscape	단말기의 가로 모드

 

 

 

• 플렉스 박스 레이아웃의 속성

종류	설명	속성값
display	플렉스 컨테이너를 지정합니다.	flex, inline-flex
flext-direction	플렉스 항목에서 주축과 방향을 지정합니다.	row, row-reverse, column, coumn-reverse
flex-wrap	컨테이너 너비보다 항목이 많을 경우 줄 바꿈 여부를 지정합니다.	nowrap, wrap, wrap-reverse
flex-flow	배치 방향과 줄 바꿈을 한번에 지정합니다.	flex-direction 속성값과 flex-wrap 속성값 사용
justify-content	주축에서 플렉스 항목 정렬 방법을 지정합니다.	flex-start, flex-end, center, space-between, space-around
align-items	교차축에서 플렉스 항목 정렬 방법을 지정합니다.	flex-start, flex-end, center, baseline, stretch
align-self	특정 플렉스 항목의 정렬 방법을 지정합니다.	flex-start, flex-end, center, baseline, stretch
align-content	여러 줄일 때 교차축 정렬 방법을 지정합니다.	flex-start, flex-end, center, space-between, space-around, stretch
flex	플리스 항목의 너비를 줄이거나 늘립니다.	1개에서 3개까지의 값, auto, initial

 

 

 

• CSS 그리드 레이아웃의 속성과 함수

종류	설명	속성값
display	그리드 컨테이너를 지정합니다.	grid, inline-grid
grid-template-columns	칼럼을 지정합니다.	크깃값
grid-template-rows	줄 높이를 지정합니다.	크깃값
grid-column-gap	칼럼과 칼럼 사이의 간격을 지정합니다.	크깃값
grid-row-gap	줄과 줄 사이의 간격을 지정합니다.	크깃값
grid-gap	칼럼과 줄 사이의 간격을 한꺼번에 지정합니다.	크깃값
grid-column-start	칼럼 시작의 라인 번호를 지정합니다.	숫자
grid-column-end	칼럼 마지막의 라인 번호를 지정합니다.	숫자
grid-column	칼럼 시작 번호와 끝 번호 사이에 슬래시(/)를 넣어 사용합니다.	숫자
grid-row-start	줄 시작의 라인 번호를 지정합니다.	숫자
grid-row-end	줄 마지막의 라인 번호를 지정합니다.	숫자
grid-row	줄 시작 번호와 줄 끝 번호 사이에 슬래시(/)를 넣어 사용합니다.	숫자
grid-area	템플릿 이름을 지정합니다.
grid-template-areas	grid-area를 사용해 템플릿 그리드를 만듭니다.
minmax( )	최솟값과 최댓값을 지정하는 함수입니다.	크깃값, auto
repeat( )	같은 값을 여러 번 반복할 때 사용하는 함수입니다.	크깃값, auto-fill, auto-fit