[CSS-01] 개념, Selector

CSS (Cascading Style Sheet)

• 문자의 컬러, 종류, 형태 지정
• 배경화면의 이미지, 컬러 지정
• 테두리(border) 설정

 

1. In-line : tag 안에 기입

<p style="font-size: 10pt">여기가 P 태그입니다</p>

 

2. Internal : head tag에 기입 ( 가장 많이 쓰이는 방법 )

<style type="text/css">
p {
	background-color: #0000ff;
	color: white;
}

#pid {
	font-size: 150%;
}

.cls {
	background-color: #00ff00;
	color: blue;
}
</style>

→ head-tag 안에 기입

 

3. External : 외부 파일에서 호출 ( 상대적으로 속도가 떨어짐 )

<link rel="stylesheet" href="city.css">

→ header나 body에 <link> 태그 이용하여 호출

 

선택자(Selector)

• 태그는 none

p {
	background-color: #0000ff;
	color: white;
}

• id는 #

#pid {
	font-size: 150%;
}

• class는 .

.cls {
	background-color: #00ff00;
	color: blue;
}

 

Font-size

<p class="p1">p tag size 1 cm</p>
<p class="p2">p tag size 1 mm</p>
<p class="p3">p tag size 1 inch</p> <!-- 1 inch == 2.54cm -->
<p class="p4">p tag size 1 pt</p>
<p class="p5">p tag size 1 pc</p> <!-- 1 파이카 == 12pt -->
<p class="p6">p tag size 18 px</p>
<p class="p7">p tag size 1 em</p>
<p class="p8">p tag size 100 %</p>

실행결과

→ 보통 em과 px이 많이 쓰인다!