스타일[style]	HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬 등 시각적으로 보기 좋게 꾸미는 것
인라인 스타일[Inline style]	스타일을 적용할 태그 안에 style속성을 이용해서 스타일을 지정하는 것
스타일 시트[stylesheet]	스타일 규칙들을 한눈에 확인하고 필요할 때 수정하기 위해 스타일들을 묶어둔 곳 스타일 시트는 내부스타일 시트와 외부스타일 시트로 나뉜다. * 내부스타일시트 : <head>태그 안에 <style>태그를 사용해 작성 * 외부스타일시트 : 웹 문서에서 가져와서 <head>태그 안에 <link>태그를 사용해 작성
스타일 상속[style inherit]	부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는 것 → 스타일의 모든 속성이 상속되는 것은 아님![배경색배경 이미지는 상속되지 않음] 부모 요소 : 다른 태그들을 포함하는 요소 * 자식 요소 : 다른 태그들에 의해 포함되는 요소

선택자 종류	설 명
전체 선택자	문서 전체에 스타일을 적용할 때 사용하는 선택자 *{속성1:속성값; 속성2:속성값; ....}
태그 선택자	특정 태그에 스타일을 적용할 때 사용하는 선택자 태그명{속성1:속성값; 속성2:속성값; ....}
클래스 선택자	클래스명을 통해 문서의 일부분에만 스타일을 적용하는 선택자[문서 안에서 여러 번 사용가능] .클래스명{속성1:속성값; 속성2:속성값; ....}
ID 선택자	ID를 통해 문서의 일부분에만 스타일을 적용하는 선택자[문서 안에서 한 번만 사용가능] #ID명{속성1:속성값; 속성2:속성값; ....}
그룹 선택자	여러 개의 선택자에 같은 스타일을 적용할 때 사용하는 선택자 선택자1, 선택자2{속성1:속성값; 속성2:속성값; ....}
Combination 선택자	Descendant Selector[하위 선택자, 태그명1 태그명2] 부모 요소에 포함된 하위 요소들이 모두 스타일에 적용되는 선택자
	Child Selector[자식 선택자, 태그명1 > 태그명2] 부모요소 바로 아래의 요소만 스타일이 적용되는 선택자
	Adjacent Selector[인접 선택자, 태그명1 + 태그명2] 태그명1 바로 다음에 오는 인접한 태그명2에 대해서만 스타일이 적용되는 선택자
	Sibling Selector[형제 선택자, 태그명1~태그명2] 태그명1 다음에 오는 모든 태그명2에 대해 스타일이 적용되는 선택자
속성 선택자	태그 안에 사용하는 속성들의 값에 따라 스타일이 적용되는 선택자
가상 클래스 선택자	특정 동작을 할 때 스타일이 바뀌도록 하는 선택자

속성 선택자 종류	의 미
[속성]	지정한 '속성'일 때
[속성 ^= 값]	속성 값이 '값'으로 시작할 때
[속성 $= 값]	속성 값이 '값'으로 끝날 때
[속성 = 값]	속성 값이 값과 일치할 때
[속성 ~= 값]	속성 값들 중에 '값'이 포함되어 있을 때 [단어별로 일치해야됨, 값=속성 값]
[속성 \|= 값]	속성 값에 '값'이 포함되어 있을 때 [하이픈 포함 단어별]
[속성 *= 값]	속성 값에 '값'을 포함할 때 [단어가 아니라도 포함만 되있으면 됨]

가상 클래스 선택자	설 명
:link	방문하지 않은 링크에 스타일을 적용하기 위해 사용
:visited	방문한 링크에 스타일을 적용하기 위해 사용
:hober	웹 요소에 마우스 커서를 올려놓을 때 스타일을 적용하기 위해 사용
:active	웹 요소를 활성화했을 때의 스타일을 적용하기 위해 사용
:focus	웹 요소에 포커스가 맞추어졌을 때의 스타일을 적용하기 위해 사용
:enabled	해당 요소가 사용 가능한 상태일 때의 스타일을 적용하기 위해 사용
:disabled	해당 요소가 사용 불가능한 상태일 때의 스타일을 적용하기 위해 사용
:checked	radio박스나 check박스에서 항목 선택시 스타일을 적용하기 위해 사용
:root	문서 전체에 스타일을 적용하기 위해 사용
:nth-child(n)	뿌리 요소들로부터 n번째 자식 요소에 스타일을 적용하기 위해 사용
:nth-last-child(n)	끝에서부터 n번째 자식 요소에 스타일을 적용하기 위해 사용

:first-child	첫번째 자식 요소에 스타일을 적용하기 위해 사용
:last-child	마지막 자식 요소에 스타일을 적용하기 위해 사용

주요 속성	설 명
font-size	숫자에 px, %, rem 등의 단위를 붙임
font-size	7단계[xx-small, x-small, small, medium(표준크기), large, x-large, xx-large]로도 지정 가능
font-family	폰트 이름 : 한글, 띄어쓰기가 있는 폰트는 작은따옴표나 큰따옴표로 감싸서 이름을 지정
font-family	키워드 : serif(명조체), sans-serif(고딕체), cursive(필기체), fantasy(장식 계열), monospace(고정폭)
@font-face	사용자 시스템에 없는 글꼴 정보를 웹 문서 안에 함께 저장하여 누구나 글꼴을 사용 가능하게 함 → 웹 문서를 통해 필요한 글꼴들을 사용자 컴퓨터에 다운로드 한 후 표시
font-weight	1~1000 사이의 숫자로 폰트 두께 설정
font-weight	lighter(얇은 글자), normal(표준), bold(두꺼운 글자), bolder(많이 두꺼운 글자)로 폰트 두께 설정
font-variant	작은 대문자를 설정[소문자 크기에 글자가 굵게 표현된 것] 속성값으로 small caps를 설정해야 작은 대문자 표시
font-style	글자 스타일[italic, normal, oblique, initial, inherit, unset] 설정 가능
text-decoration	underline,line-through, overline 등 text의 decoration 설정
text-shadow	텍스트에 그림자 효과를 설정 가능 가로거리, 세로거리, 그림자 번짐정도, 그림자 색상을 지정
text-transform	none, lowercase,uppercase,capitalize, inherit, initial 등으로 text를 변경
text-align	left, center, right, start, end, justify, initial, inherit, unset 등으로 정렬 가능
text-justify	text-align을 justify로 설정해 양쪽 정렬을 할 경우, 글자와의 간격을 설정 auto, nono, inter-word, distribute 등으로 간격 조정 가능
text-ident	px, em, %등의 단위를 사용하여 들여쓰기 설정
line-height	normal : 브라우저에 설정된 줄 높이(행간)으로 출력
line-height	숫자 : 단위를 지정하지 않으면 폰트 크기를 기반을 줄 높이(행간)의 비율 설정 px, em, % 등의 단위를 함께 사용하여 줄 높이(행간) 설정
color	RGB, HEX 등을 이용해 글자색을 설정
background-color	RGB, HEX 등을 이용해 배경색을 설정
background-img	url(해당 url입력)을 이용해 배경이미지를 설정

주요 단위	설 명
px[pixel]	화면의 최소 단위인 픽셀이 기준
em	해당 글꼴의 대문자 M의 너비를 기준으로 크기 조절
ex[x-height]	해당 글꼴의 수문자 x의 높이를 기준으로 크기 조절
pt[point]	인치를 기준으로 크기 조절 1pt=1/72inch이며 72pt까지 있음
%	부모요소 크기를 기준으로 한 상대적인 비율

CSS작성시 주의사항	설 명	좋은 예	나쁜 예
소문자로 입력할 것	기본적으로 CSS는 대문자와 소문자 구별을 하지 않음	p{color:red;}	p{COLOR:RED;}
속성이 클래스인 경우, 앞에 마침표를 찍음	속성을 클래스로 지정할 때는 클래스명 앞에 마침표 사용	.mys{color:red;}	mys{color:red;}
속성을 2개 이상 적용할 때는 세미콜론으로 구분	여러 개의 스타일을 지정하고 싶으면 세미콜론 사용 되도록이면 1개의 속성을 적용할 때도 세미콜론 사용	p{color:red; text-align:left;}	p{color:red text-align:left;}
선택자가 2개 이상일 때는 쉼표로 구분	여러 개의 선택자에 같은 스타일을 적용하고 싶을 때는 쉼표로 선택자를 구분해서 입력	p,h1{color:red;}	p h1{color:red;}
태그 내부 태그에 적용할 때는 띄어쓰기로 구분	태그 내부의 태그를 변경하고 싶을때는 띄어쓰기만 함 ex> h1태그 중에서도 p태그 내부의 h1태그만 변경됨	p h1{color:red;}	p,h1{color:red;}
너비, 높이 등의 숫자 지정 시, 반드시 단위와 함께 지정	값이 0일때를 제외하고는 반드시 단위를 함께 지정	p{font-size:20px;} p{font-size:80%;} p{font-size:1rem;}	p{font-size:20;} p{font-size:80;} p{font-size:1;}
너비, 높이 등의 숫자 지정 시, 반드시 단위와 함께 지정	주요 단위 * px[픽셀] : 화면의 최소 단위인 픽셀이 기준 * %[퍼센트] : 부모 요소의 크기 기준으로 비율 지정 * rem[렘] : html 요소에 지정된 크기가 기준	p{font-size:20px;} p{font-size:80%;} p{font-size:1rem;}	p{font-size:20;} p{font-size:80;} p{font-size:1;}

[개미의 걸음 HTML&CSS 14차시] 텍스트 관련 스타일 (0)	2020.08.14
[개미의 걸음 HTML&CSS 13차시] 배경 관련 스타일(색상, 이미지, 그라데이션) (0)	2020.08.13
[개미의 걸음 HTML&CSS 11차시] 멀티미디어를 위한 태그 (0)	2020.08.11
[개미의 걸음 HTML&CSS 10차시] 시맨틱(semantic) 태그 (0)	2020.08.10
[개미의 걸음 HTML&CSS 9차시] 박스모델을 생성하는 태그(div, iframe) (0)	2020.08.09

2030 BigDATA

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

들어가기 전...

CSS의 기본 구조

선택자[Selector]

# combination 선택자

# 속성 선택자

# 가상 클래스

속성

값

CSS작성시 주의사항

주석처리

'HTML' 카테고리의 다른 글

관련글 더보기

댓글 영역

추가 정보

인기글

최신글

티스토리툴바