목록
1. CSS
2. CSS 구성 요소
3. CSS의 세가지 연동 방법
1) Inline Style Sheet
2) Internal Style Sheet
3) External Style Sheet
4. External Style Sheet 활용
5. 선택자(Selector)
1) Type
2) Class
3) ID
6. 선택자 활용
1) External Style Sheet ver.
2) Internal Style Sheet ver.
1. CSS (Cascading Style Sheet)
html에서 디자인을 분리해서 깔끔하게함
문서의 레이아웃과 스타일 정의
2. CSS 구성 요소
선택자 { 속성 : 속성값; } ↔ html일 때 속성 = "속성값"
* 선택자 : 디자인을 적용할 HTML영역
* 속성 : 어떤 디자인을 적용할지
* 속성값 : 어떤 역할을 수행할지, ;을 꼭 입력해야함
h1 { font-size : 10px;
color : orange;
text-align : center; }* h1 : 선택자
* color : 속성
* orange; : 속성값
font-size : 폰트 사이즈font-family : 글꼴color : 폰트 색background-color : 배경색text-align : 텍스트 정렬
3. CSS의 세가지 연동 방법
1) Inline Style Sheet
태그 안에 직접 원하는 스타일을 적용함
<h1 style="color: orange;"> 내용입력</h1>
2) Internal Style Sheet
<style> 태그 안에 넣기
<head>
<style>
h1 { color : orange; }
</style>
</head>
3) External Style Sheet
<link> 태그로 불러옴, 제일 많이 사용함
이 방법을 사용하면 정보와 디자인이 분리가 되어 총 파일이 2개임 (.html, .css)
<head>
<link rel="stylesheet" href="style.css">
</head>
4. External Style Sheet 활용
<!DOCTYPE html>
<head>
<title> 구운고기 html 연습 </title>
<meta charset="UTF-8">
<link rel = "stylesheet" href="css.css">
</head>
<body>
<p> p1 </p>
<p> p2 </p>
<a> a1 </a>
<a href="#"> a2 </a>
</body>
</html>p { color: coral;
font-size: x-small;
background-color: antiquewhite;
width : 100px;
height : 100px; }
a { color: royalblue;
font-size: 1cm;
background-color: rgb(250, 215, 238); }
5. 선택자(Selector)
HTML의 어떤 요소에 CSS를 적용할것인지 정함
1) Type
일반 태그 이름 쓰면됨
<--! <p> 선택자 Type </p> -->
<style>
p { color : red; }
</style>
2) Class
클래스 이름으로 특정 위치에 스타일 적용 .class명
<--! <p class="KAOROU"> 블로그 </p> -->
<style>
.KAOROU { color : red; }
</style>
3) ID
ID를 사용해서 스타일 적용 #ID명
<--! <p id="KAOROU"> 선택자 ID </p> -->
<style>
#KAOROU {color : red;}
</style>
6. 선택자 활용
1) External Style Sheet ver.
(html 파일에 <link rel = "stylesheet" href="css.css"> 추가)
<!DOCTYPE html>
<head>
<title> 구운고기 html 연습 </title>
<meta charset="UTF-8">
<link rel = "stylesheet" href="css.css">
</head>
<body>
<p class="선택자"> Class </p>
<p ID="선택자"> ID </p>
<p> Type</p>
</body>
</html>p { color: red; }
#선택자 { color: orange; }
.선택자 { color: rgb(235, 235, 31); }
2) Internal Style Sheet ver.
html 파일에 <style> 추가
<!DOCTYPE html>
<head>
<title> 구운고기 html 연습 </title>
<meta charset="UTF-8">
<style>
p { color: red; }
#선택자 { color: orange; }
.선택자 { color: rgb(235, 235, 31); }
</style>
</head>
<body>
<p class="선택자"> Class </p>
<p ID="선택자"> ID </p>
<p> Type</p>
</body>
</html>'컴맹도 할 수 있다 > HTML, CSS' 카테고리의 다른 글
| CSS 부모 자식 관계 (2) | 2022.10.10 |
|---|---|
| HTML block 요소와 inline 요소 (0) | 2022.10.09 |
| HTML 기초 구조를 잡을 때 사용하는 태그 (2) | 2022.10.06 |
| HTML 태그와 기본 구조 (0) | 2022.10.06 |
댓글