CSS (Cascading Style Sheets) 란
•
웹 페이지의 스타일과 레이아웃을 정의하기 위한 스타일 시트 언어.
CSS를 사용하는 이유?
•
HTML의 문서에 있는 태그들에 스타일을 적용하여 시각적으로 사용자에게 편리함을 제공하기 위해서
CSS를 사용하는 방법
형식)
선택자 {
속성: 속성값;
속성: 속성값;
...
}
CSS
복사
예시)
p {
font-size : 16px;
font-weight : 700;
text-align : center;
color : red;
}
CSS
복사
사용방법)
/*
요소 선택자(Element Selector):
문법: 요소명 { 속성: 속성값; }
예시: h1 { color: blue; }
설명: 요소 선택자는 HTML 요소의 태그명을 사용하여 스타일을 적용합니다.
위 예시에서 h1은 <h1> 태그를 선택하여 텍스트의 색상을 파란색으로 설정합니다.
클래스 선택자(Class Selector): 여러값!
문법: .클래스명 { 속성: 속성값; }
예시: .highlight { background-color: yellow; }
설명: 클래스 선택자는 HTML 요소에 class 속성을 지정하고, 해당 클래스명을 사용하여 스타일을 적용합니다. 위 예시에서 .highlight는 highlight 클래스를 가진 요소들을 선택하여 배경색을 노란색으로 설정합니다.
ID 선택자(ID Selector): 하나의 값!
문법: #아이디명 { 속성: 속성값; }
예시: #logo { width: 200px; }
설명: ID 선택자는 HTML 요소에 id 속성을 지정하고, 해당 아이디명을 사용하여 스타일을 적용합니다. 위 예시에서 #logo는 logo라는 아이디를 가진 요소를 선택하여 너비를 200px로 설정합니다.
이러한 선택자들은 CSS 규칙에 따라 HTML 요소를 선택하고, 중괄호 내에서 해당 요소에 스타일을 적용합니다. 요소 선택자는 태그명을, 클래스 선택자는 .을, ID 선택자는 #을 사용하여 선택합니다. 이를 통해 원하는 HTML 요소에 대해 세부적으로 스타일을 지정할 수 있습니다.*/
CSS
복사
html 파일에서 CSS를 이용하여 페이지 꾸미는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 선택자 예시</title>
<style>
h1 {
color: blue;
}
.highlight {
background-color: yellow;
}
#logo {
width: 200px;
}
</style>
</head>
<body>
<h1>제목</h1>
<p class="highlight">내용</p>
<p id="logo">로고</p>
</body>
</html>
HTML
복사
html 파일에서 CSS 파일을 호출하여 페이지 꾸미는 방법
•
HTML의 속성을 설정 해 주는 head 안에 CSS 파일 주소를 입력
<html>
<head>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
...
</body>
</html>
HTML
복사
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 선택자 예시</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>제목</h1>
<p class="highlight">내용</p>
<p id="logo">로고</p>
</body>
</html>
HTML
복사
style.css
h1 {
color: blue;
}
.highlight {
background-color: yellow;
}
#logo {
width: 200px;
}
CSS
복사
BoxModel
•
HTML의 모든 요소(태그)는 박스(box) 모양으로 구성되어있다.
◦
그래서 웹 페이지 UI를 개발할 때 마치 박스 쌓는 것처럼 개발한다.
•
CSS Box Model은 HTML 요소를 내용(content), 패딩(padding), 테두리(border), 여백(margin) 등의 영역으로 나누어 사각형 박스로 표현하는 방법입니다.
•
예시)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Box Model 예시</title>
<style>
.box {
width: 200px;
height: 150px;
padding: 20px;
border: 1px solid #000;
margin: 30px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="box">
Box Model 예시
</div>
</body>
</html>
HTML
복사
미니퀘스트
