[CSS 기본] 선택자

CSS 기본 , 기초 내용들

선택자 종류

종류	사용 예	속성
전체 선택자	* { 속성 : 값; }	전체 요소 선택할 때 사용
요소명 선택자	요소명 {속성: 값;}   ex) h1 { color: red; }	태그 이름(요소명)으로 선택할 때
id	#id명 {속성: 값;}	id를 가진 요소 선택시 (단독 사용)
class	.class명 {속성: 값;}	class 가진 요소 선택시 (반복 사용할 때)
가상 클래스	a:link {속성: 값}	link 걸린 텍스트
	a:visited {속성: 값}	링크 방문을 했던 텍스트만
	a:hover {속성: 값}	링크걸린 텍스트에 마우스 올렸을 때
	a:focus {속성: 값}	링크걸린 텍스트에 포커스 생성시
	a:active {속성: 값}	링크걸린 텍스트에 마우스 눌렀을 때
수도 (pseudo) class : html을 만들 때 같이 작성하진 않지만, 시스템이 추가시켜주는 가짜 클래스 라는 의미	요소명:first-letter {속성: 값}	선택한 요소의 첫 글자 1개만 선택
	요소명:first-line {속성: 값}	선택한 요소의 첫 줄만 선택
	요소명:before {속성: 값}	선택한 요소의 앞 지점
	요소명:after {속성: 값}	선택한 요소의 마지막 지점
	요소명:first-child {속성: 값}	선택한 요소의 1번째 자식 요소
	요소명:last-child {속성: 값}	선택한 요소의 마지막 자식 요소 (IE 9 이상 지원)
종속 선택자	요소명.class명 {속성: 값} 요소명#id명 {속성: 값}	선택한 요소 중 class / id를 포함한 요소만 선택
하위 선택자	[상위 태그부터 하위 태그까지 연속해서 선언] ex) div h2 {속성:값} , #id명 .class명 {속성: 값}	선택한 요소에 하위 요소만 선택
그룹 선택자	, 를 붙이고 태그 사용 ex) h1, h2, h3 {속성: 값}	여러 요소를 그룹으로 선택

 

서체 꾸미기 속성

웹 문서에 글자의 모양(글꼴)이나 색상, 두께, 행 간격 등을 꾸밀때 사용

종류	설명	사용 예
font-family	글꼴	font-family: sans-serif;
font-size	사이즈	font-size: 12px;
font-weight	두께	font-weight: bold;
font-style	기울기	font-style: italic;
line-height	행간	line-height: 1.5; line-height: 150%
font-valiant	소문자를 작은 대문자로 표기	font-valiant: small-caps;
함축 방식	font: [두께 스타일 valiant] [size / 행간] [글꼴]	font:bold 12px/1.4 sans-serif;

 

문단 속성

웹 문서에 글자의 정렬, 색상, 들여쓰기, 간격 등을 맞출 때

종류	설명	사용 예
color	텍스트 색상	color: red;
text-align	블록 요소내에 인라인 요소를 정렬 (블록요소에 적용해야 한다)	text-align: center;
vertical-align	인라인 요소 간의 세로 정렬. 인라인 요소에 직접 사용 해야 한다.	vertical-align: middle;
text-indent	블록 요소 내에 텍스트 내어쓰기/들여쓰기	text-indent: 10px; text-indent: -10px;
text-decoration	텍스트의 밑줄 (underline) , 윗줄 (overline)          가운데 줄 (line-through)	text-decoration: underline;
letter-spacing	글자 간격 (자간)	letter-spacing: 5px;

 

배경 속성

웹 문서에 배경 이미지, 배경 색상, 배경 우치 등을 적용할 때

종류	설명
background-color	배경 색상
background-image	배경 이미지
background-repeat	배경 반복 여부
background-position	배경 이미지 위치 지정
background-attachment	배경 이미지 고정 여부 (기본: scroll , 고정 fixed)
함축 방식	background: 색상 이미지 반복여부, 위치지정 고정여부

 

박스 모델 속성

요소에 여백, 선, 너비 등을 적용할 때

종류	설명
width / height	너비 (폭) / 높이
margin / padding	박스 바깥쪽 / 안쪽 여백
border	border-color : 선 색상 border-width : 선 두께 border-style : 선 모양 (solid, dashed, dotted, double)

박스 모델 너비 / 높이 계산법

전체 너비(폭) = 너비값 + 좌우 패딩값+ 좌우 선 두께

전체 높이 = 높이값 + 상하 패딩값 + 상하 선 두께

 

마진 오류 현상?

마진 겹침 : 인접 요소 간 마진의 방향이 겹치면 작은 값은 무시 > 요소에 display: inline-block 적용

더블 마진 : 요소에 마진의 방향과 float 방향이 같을 때 마진이 2배 적용 (IE 6 이하 버전에서 발생)

> 요소에 display: inline; 적용

 

display : 요소 성격 변경

• inline : 블록요소를 inline 요소로 바꿀 때
• block : 인라인 요소를 block 요소로 바꿀 때
• inline-block : 인라인 속성에 너비/높이값을 적용 가능
• none : 요소를 숨길 때

 

overflow

요소에 내용이 넘칠경우 어떻게 처리할 지

• hidden : 넘치는 내용을 숨길 때
• auto : 내용이 넘칠 때는 스크롤바 생기고, 넘치지 않을 땐 스크롤바 숨김
• scroll : 내용과 상관없이 무조건 스크롤바가 생김

 

float

블록 요소 정렬할 때. 적용 할 때 서로 겹치지 않으며 왼쪽, 오른쪽이 정렬

float 사용한 후 반드시 clear 속성을 이용해 float를 해지해야 한다

 

position

요소가 겹치게 정렬할 때나 좌우를 불분명하게 정렬해야 할 때

종류	설명
static	지정하지 않은 기본 상태
relative	현재 위치를 기준으로 위치를 지정 (상대위치)
absolute	body 또는 컨테이닝 박스를 기준으로 위치를 지정할 수 있다 (절대 위치)
fixed	스크린을 기준으로 위치가 고정

z-index

position 속성이 relative, absolute가 적용된 상태에서 적용해야