CSS

서민수·2023년 7월 10일

HTML 기초

목록 보기

5/18

CSS??

CSS는 Cascading Style Sheets의 줄임말이다.

<h1>Welcome</h1>
<ul>
	<li> Toy Story </li>
    <li> Zootopias </li>
    <li> Inside OUt </li>
</ul>

CSS는 룰 기반(Rule-based)의 언어이다.
CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있다.

선택자 (Selector): 스타일을 지정할 HTML 요소를 선택

선언 블록(declation block): 중괄호 {} 내부의 여러 선언들을 작성

선언(declations): 프로퍼티와 값으로 이루어진 쌍

선택자 { 하나이상의 선언 }의 형태로 이루어진 하나의 Rule (혹은 Rule Set)

h1 {
	color: red;
    font-size: 5em;
}

p{
	color: black
}

CSS를 적용하는 방법

내부 스타일(embedded)

인라인 스타일(inline)

외부 스타일(extemal)

1. 내부 스타일 (embedded)

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
    	h1 {
        	color: red;
        }
    </style>
</head>
<body>
    <h1> Welcome! </h1>
</body>
</html>

2. 인라인 스타일 (inline)

<body>
    <h1 style="color:red"> Welcome! </h1>
</body>

3. 외부 스타일 (external)

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="style/main.css"/>
</head>
<body>
    <h1> Welcome! </h1>
</body>
</html>