CSS
- Cascading Style Sheets 의 약자
- HTML 요소가 화면에 어떻게 보일지 묘사하는 언어
CSS 문법
HTML <head> 요소 안에 <style> 요소를 사용하여 적용
선택자 { 속성명: 속성값; }
선택자 { 속성명1: 속성값1; 속성값2: 속성값2; ..}
p { text-align: center; color: blue; }css 사용 유형
인라인 스타일
HTML 요소 내부에 style 속성을 사용하여 적용하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스타일</title>
</head>
<body>
<h2 style="text-align: center; font-size: 50px">인라인 스타일</h2>
<p style="text-align: center; font-size: 20px; color: deepskyblue">HTML 요소 내부에 style 속성을 사용하여 적용하는 방법</p>
</body>
</html>Result:
내부 스타일
HTML 문서의 <head> ~ </head> 사이에 <style> ~ </style> 요소를 사용하여 적용하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 스타일</title>
<style>
body { text-align: center; }
h2 { font-size: 50px; }
ul { list-style: none; }
li { display: inline-block; margin-right: 50px; font-weight: bold; color: deeppink;}
</style>
</head>
<body>
<h2>CSS를 적용하는 방법</h2>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>Result:
외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스타일</title>
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<h2>CSS를 적용하는 방법</h2>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>style.css
/*
style.css
작성일: 2023-10-10
작성자: Caramel Bottle
내용: 외부 스타일 적용 방법
*/
h2 { font-size: 50px; } /* h2 요소의 사이즈를 50px로 설정 */
ul { list-style: none; }
li { display: inline-block; margin-right: 50px; font-weight: bold; color: deeppink;}Result:
* rel
현재 문서와 링크된 문서 사이의 연관관계를 명시
* CSS 주석
/* 안에 주석 내용 작성 */
/*
여러
줄도
가능
*/
댓글