CSS 요점 정리

* CSS 선언문

- 선언문은 CSS를 HTML의 내부에 작성할 때 반드시 필요함.

- 만일 이 선언문이 없으면 브라우저는 CSS를 HTML 언어로 인식하게 됨.

 

<style type="text/css">     선택자{ 속성:값; }  </style>

 

 

* 외부 스타일 연동 방식

 

link 방식	import 방식
<link rel="stylesheet" type="text/css" href="경로" media="all"/>	<stype type="text/css">     @import:url("경로");  </style>

 

 

* 선택자의 종류

 

종류	사용 예	설명
전체 선택자	*{속성:값;}	전체 요소를 선택할 때 사용
요소명 선택자	요소명{속성:값;}      예) h1{속성:값;}	태그 이름(요소명)으로 선택할 때 사용
아이디 선택자	#아이디명{속성:값;}	아이디를 가진 요소를 선택할 때 사용(단독 사용 시)
클래스 선택자	.클래스명{속성:값;}	클래스를 가진 요소를 선택할 때 사용(반복해서 사용 시)
가상 클래스 선택자	a:link{속성:값;}	링크 걸린 텍스트 선택
	a:visited{속성:값;}	링크 방문을 했던 텍스트만 선택
	a:hover{속성:값;}	링크 걸린 텍스트에 마우스를 올렸을 때
	a:focus{속성:값;}	링크 걸린 텍스트에 포커스가 생성되었을 때
	a:active{속성:값;}	링크 걸린 텍스트에 마우스를 눌렀을 때
수도 클래스 선택자	요소명:first-letter{속성:값;}	선택한 요소의 첫 글자 한 개만 선택
	요소명:first-line{속성:값;}	선택한 요소의 첫 줄만 선택
	요소명:before{속성:값;}	선택한 요소의 앞의 지점
	요소명:after{속성:값;}	선택한 요소의 마지막 지점
	요소명:first-child{속성:값;}	선택한 요소 중 첫 번째 자식 요소
	요소명:last-child{속성:값;}	선택한 요소 중 마지막 자식 요소(IE 9 이상 지원)
종속 선택자	요소명.클래스명{속성:값;}  요소명#아이디명{속성:값;}	선택한 요소 중 지정 클래스를 포함한 요소만 선택  선택한 요소 중 지정 아이디를 포함한 요소만 선택
하위 선택자	div h2{속성:값;}, #아이디명.클래스명{속성:값;}	선택한 요소에 하위 요소만 선택
그룹 선택자	h1, h2, p{속성:값;}	여러 요소를 그룹으로 선택

 

- 수도 클래스(pseudo class) 선택자 : HTML을 만들 때 같이 작성하지는 않지만 시스템이 추가시켜 주는 가짜 클래스

 

 

* 서체 꾸미기 속성

 

종류	설명	사용 예
font-family	모양(글꼴)	font-family: dotum, "돋움", sans-serif;
font-size	사이즈	font-size: 12px; font-size: 0.75em; font-size: 75%;
font-weight	두께	font-weight:bold; font-weight:normal;
font-style	기울기	font-style:italic; font-style: normal;
line-height	행간	line-height:1.5; line-height:150%;
font-valiant	소문자를 작은 대문자로 표기	font-valiant: small-cpas; font-valiant: normal;
함축 방식	font:[두께 스타일 valiant] [사이즈/행간] [글꼴];	font:bold 12px/1.4 dotum, "돋움", sans-serif;

 

 

* 문단 속성

 

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

 

 

* 배경 속성

 

종류	설명	사용 예
background-color	배경 색상	background-color:#ㄹㄹ0;  background-color:yellow;
background- image	배경 이미지	background-image:url("이미지 경로");
background-repeat	배경 반복 여부	background-repeat:repeat; (가로/세로 반복)  background-repeat:no-repeat; (반복 안 됨)  background-repeat:repeat-x; (x축 반복)  background-repeat:repeat-y; (y축 반복)
background-position	배경 이미지 위치 지정	background-position:가로 위치 세로 위치;
background-attachment	배경 이미지 고정 여부(기본 scroll 고정:fixed)	background-attachment:fixed; (스크린 기준 배경 위치 고정)
함축 방식	background: 색상 이미지 반복 여부, 위치 지정 고정 여부;	background:url("images/bg.gif") no-repeat 0 50px);

 

 

* 박스 모델 속성

 

종류	설명		사용 예
width / height	너비(폭) / 높이		width:300px; / height:200px;
margin / padding	박스 바깥쪽 여백 / 안쪽 여백		margin: 10px; (상, 하, 좌, 우 바깥 여백에 적용)  / padding: 10px; (상, 하, 좌, 우 안쪽 여백에 적용)
			margin: 10px 20px; (상하 10px, 좌우 20px, 바깥 여백에 적용)  / padding: 10px 20px; (상하 10px, 좌우 20px, 안쪽 여백에 적용)
			margin: 10px 20px 5px; (상 10px, 좌우 20px, 하 5px 바깥 여백에 적용) / padding: 10px 20px 5px; (상 10px, 좌우 20px, 하 5px 안쪽 여백에 적용)
			margin: 10px 20px 30px, 40px; (상 10px, 우 20px, 하 30px, 좌 40px 바깥쪽 여백에 적용) / padding: 10px 20px 30px, 40px; (상 10px, 우 20px, 하 30px, 좌 40px 안쪽 여백에 적용)
			margin-left: 10px; (좌 10px 바깥 여백에 적용)  / padding-left: 10px (좌 10px 안쪽 여백에 적용)
border	border-color	선 색상	border-color:#000; border-color:black;
	border-width	선 두께	border-width:2px;
	border-style	선 모양(solid,, dashed, dotted, double)	border-style:solid;
	border 함축 방식		border: 2px solid #000; 또는 border-bottom: 2px solid #000;

 

 

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

- 요소에 정확한 너비와 높잇값을 입력하는 것은 레이아웃을 정렬할 때 매우 중요함.

- 만일 요소 안쪽 여백과 선이 적용되었을 때 요소의 너비와 높잇값 계산을 잘못하게 되면 의도한 대로 렝아웃 정렬이 되지 않을 수 있음.

 

전체 너비(폭) = 너비값 + 좌우 패딩값 + 좌우 선 두께  전체 높이 = 높잇값 + 상하 패딩값 + 상하 선 두께

 

 

* 마진의 오류 현상들

1. 마진 겹침 현상

- 인접 요소 간 마진의 방향이 겹치면 작은 값은 무시해 버림.

- 해결 방법은 요소에 display:inline-block을 적용하면 됨.

 

2. 더블 마진 현상

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

- 해결 방법은 요소에 display:inline을 적용하면 됨.

 

 

* display 속성

1. inline : 블록 요소를 인라인 쇼로로 바꿀 때 사용함.

2. block : 인라인 요소를 블록 요소로 바꿀 때 사용함.

3. inline-block : 요소를 인라인 블록 요소로 바꿀때 사용함. 인라인 속성에 너비/높잇값을 적용할 수 있음. 블록 요소에 inline-block 적용했을 경우 IE7 이하 버전에는 적용되지 않음. 이때는 *zoom:1; * display:inline;을 함께 주면 해결됨.

4. none : 요소를 숨길 때 사용함.

 

 

* overflow 속성

- 요소에 내용이 넘칠 경우 넘치는 내용을 어떻게 처리할지 지정하는 요소.

- 속성값

1. hidden : 넘치는 내용을 숨길 때 사용함.

2. auto : 내용이 넘칠 때는 스크롤바가 생기고, 넘치지 않을 때는 스크롤바가 숨겨짐.

3. scroll : 내용과 상관없이 무조건 스크롤바가 생김.

 

 

* float 속성

- float(Fluid Layout) 속성은 블록 요소를 정렬할 때 사용함.

- 블록 요소에 float 속성을 적용하면 서로 겹치지 않으며, 왼쪽, 오른쪽이 정렬됨.

- float을 사용한 후에는 반드시 clear 속성을 이용해 float을 해지해야 함.

- 해지를 하지 않았을 경우에는 float을 적용한 요소의 다음 요소가 float을 적용한 요소 밑으로 겹치게 됨.

 

종류	설명		사용 예
float	블록 요소를 좌우 정렬시킬 때 사용함.		float:left; (왼쪽 정렬)  float:right; (오른쪽 정렬)
clear	float을 해지할 때 사용함.		clear:left; clear:right; clear:both;

 

 

* float 속성을 해지하는 몇 가지 방법

1. clear:both를 이용함

- footer에 clear:both를 이용함.

- #footer{clear:both}

 

2. 부모 요소에 float:left;을 적용함.

 

3. 부모 요소에 overflow:auto를 적용함.

 

4. 부모 요소에 높잇값을 적용함.

 

5. 가상 요소를 생성한 후에 clear:both를 이용함.

 

                container

---------------------------------------

|[left_side]    [center]    [right_side]|

|                     *                      | 

|--------------------------------------|

[                  footer                 ]

 

- 플롯을 적용한 부모 요소 * 영역에 가상 요소를 생성한 후 clear:both를 적용함.

 

#container:after{     contents:""; display:block; clear:both;  }  #container{width:100%;} 또는 #container{*zoom:1;}

 

 

 

* 포지션-위치 지정

- position 속성은 요소가 겹치게 정렬할 때나 좌·우를 불분명하게 정렬해야 할 때 사용함.

 

 

종류	설명		사용 예
static	지정하지 않은 기본 상태임.		position:static;
relative	현재 위치를 기준으로 위치를 지정함. (상대 위치)		position:relative; left:50px; top:30px; (현재 위치 기준으로 이동)
absolute	body 또는 컨테이닝 박스를 기준으로 위치를 지정할 수 있음. (절대 위치)		position:absolute; left:50px; top:30px; (컨테이닝 박스 기준으로 이동)
fixed	스크린을 기준으로 위치가 고정됨.		position:fixed;

 

 

* z-index 속성

- position 속성은 요소끼리 겹쳐진 상태에서 위·아래로 이동하거나 또는 정렬시킬 때 사용함.

- 기본값은 auto이며, 값이 클수록 요소가 위롱 올라감.

- z-index 속성은 반드시 position 속성인 relative, absolute가 적용된 상태에서 적용해야 함.

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)