HTML기초 CSS
CSS (Cascading Style Sheets) 문법
<p>요소의 배경색을 노란색으로 설정하는 CSS선언
p { background-color: yellow; }
위의 선언에서 선택자는 "p"입니다. 이것은 단락을 나타내는 <p>요소를 의미합니다.
중괄호안에 들어있는것이 선언입니다. "background-color"는 속성의 이름이고 "yellow"는 속성의 값입니다.
앞의 선언은 <p>요소의 배경색이 노란색임을 말하고 있습니다. 각각의 CSS선언은 항상 ;로 끝나야 합니다.
하나의 요소에 여러개의 속성을 지정할 수도 있습니다.
p {
background-color: yellow;
border: 2px solid red;
}
CSS의 위치는 기본적으로 HTML의 <head>요소내에 <style>~</style>안에 적어주면 됩니다.
<html>
<head>
<title>KOREA WEB</title>
<style>
p { background-color: yellow; }
</style>
</head>
<body>
<p>연습입니다.</p>
</body>
</html>
<결과>
연습입니다.
<html>
<head>
<title>KOREA WEB</title>
<style>
h1 {
background-color: yellow;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>제목입니다.</h1>
</body>
</html>
CSS에서 가장 중요한 부분이 선택자 입니다.
p { color: blue; }
선택자 p요소를 선택하고 color속성을 blue로 변경하는 예입니다.
타입 선택자 - 가장 기본적인 선택자로 요소이름을 사용합니다.
<h1>요소를 선택하려면 h1이라고 적어주면 됩니다.
다음의 선택자는 모든 h1요소를 선택합니다.
h1 { color: green; }
전체 선택자 - *기호로 표시되며 페이지 안 모든 요소를 선택할때 사용합니다.
주로 모든 요소의 공통적인 속성을 지정할때 사용됩니다.
다음의 선택자는 모든 요소를 선택합니다.
* { color: blue; }
아이디 선택자 - 특정한 요소를 선택합니다. 요소의 id앞에 #을 붙이면 됩니다.
#special { color: red; }
아이디가 special인 요소를 선택합니다.
아이디 선택자를 사용하려면 먼저 HTML 요소를 정의할때 id를 부여해야합니다.
<p id="special">id가 special인 단락입니다.</p>
다음의 선택자는 <h1>요소중에서 아이디가 "special"인 요소를 선택합니다.
h1#special {color: red; }
<html>
<head>
<title>CSS 연습</title>
<style>
#special {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<p id="special">id가 special입니다.</p>
<p>여긴 정상입니다.</p>
</body>
</html>
<결과>
id가 special입니다.
여긴 정상입니다.
클래스선택자 - .을 이용해서 정의합니다.
.target { color: red; }
클래스가 target인 요소를 선택합니다.
id선택자가 하나의 요소만을 선택할수 있는 반면에 클래스선택자는 여러개의 요소를
한번에 선택할 수 있습니다.
<p class="type1">class가 type1인 단락입니다.</p>
p요소의 class를 "type1"으로 지정합니다.
클래스가 type1인 모든 요소를 선택합니다.
.type1 { color: blue; }
<h1>요소중에서 클래스가 type1인 요소를 선택합니다.
h1.type1 { color: blue; }
<html>
<head>
<title>CSS연습페이지</title>
<style>
.type1 {
text-align:center;
}
</style>
</head>
<body>
<h1 class="type1">class가 type1인 헤드입니다.</h1>
<p class="type1">class가 type1인 단락입니다.</p>
</body>
</html>
클래스가 type1인 요소를 선택해서 텍스트 정렬을 중앙정렬로 변경합니다.
~~~
<style>
p.type1 {
text-align: center;
}
</style>
~~
<body>
<h1 class="type1">class가 type1인 헤드입니다.</h1>
<p class="type1">class가 type1인 단락입니다.</p>
</body>
~~
클래스가 type1인 p요소를 선택해서 텍스트 정렬을 중앙정렬로 변경합니다.
단 클래스 이름은 숫자로 시작하면 안됩니다.
선택자를 콤마(,)로 분리하여 나열하면 선택자 그룹을 만들수있습니다.
선택자 그룹을 사용하면 동일한 규칙을 가진 선언을 하나로 만들수있습니다.
h1 { font-family: sans-serif; }
h2 { font-family: sans-serif; }
h3 { font-family: sans-serif; }
위 선언은 아래의 선언과 동일합니다.
h1, h2, h3 { font-family: sans-serif; }
~~
<style>
h1, p {
font-family: sans-serif;
color: red;
}
</style>
~~
<body>
<h1>여긴 헤드입니다.</h1>
<p>여긴 단락입니다.</p>
</body>
~~
여긴 <h1>과 <p>를 동시에 선택합니다.
CSS를 삽입하는 방법
각 HTML 페이지는 <link> 태그를 이용해서 스타일 파일에 연결해야 합니다.
<link>태그는 헤드부분에 있어야 합니다.
외부스타일시트
<link type="text/css" rel="stylesheet" href="mystyle.css">
대한민국 생활정보 블로그 & GOODMAN BLOG
'생활정보' 카테고리의 다른 글
| 공공주택이 재정비 및 리모델링으로 더 좋게 바뀐다. (0) | 2022.04.19 |
|---|---|
| 코로나로 인한 사회적 거리두기 전면 해제 (0) | 2022.04.18 |
| 임산부 지원 교통비 70만원 신청하세요 (0) | 2022.04.14 |
| 뱀의다리 사족, 새옹지마 고사성어 내용 (0) | 2022.04.12 |
| 코로나 생활지원비, 유급휴가비용 신청안내 (0) | 2022.04.12 |
