CSS : Cascade Style Sheet
html이 데이터를 다룬다면, css는 style에 대해 다룬다.
문서내용 작성하는 부분과 꾸미는 부분을 분리하여 내용을 수정하여도, 디자인을 바꿀 필요가 없고
디자인을 수정해도 글 내용을 바꿀 필요가 없다.
다양한 기기에도 디자인만 따로 적용하여 구동 시킬 수 있다.
style : 정해진 속성을 입력하여 웹페이지를 꾸미는 것
stylesheet 웹페이지에서 반복적으로 쓰는 style을 모아놓은 것
스타일 기본 형식
css를 html에 적용하는 방법
1. html요소의 inline style속성 작성
2. html문서의 내부 style태그 작성
3. 외부 css파일을 현재 html문서와 연결
1. html요소의 inline style 속성 작성하기
<body>
<h1>CSS</h1>
<h2>css를 html문서에 적용하는 방법</h2>
<ol>
<li style="color:hotpink; text-decoration:underline;">html요소의 inline style속성 작성</li>
</ol>
<hr>
</body>2. html문서의 내부 style태그 작성
<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>CSS</title>
<style>
/*내부 style태그 - head태그 안에 작성 */
li{
font-size: 32px;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h2>css를 html문서에 적용하는 방법</h2>
<ol>
<li>html문서의 내부 style태그 작성</li>
</ol>
<hr>
</body>3. 외부 css파일을 현재 html문서와 연결
/* CSS 영역 */
ol{
background-color: lightgray;
}<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>CSS</title>
<!--외부 스타일 문서 연결하기-->
<link rel="stylesheet" href="css/style.css">
</style>
</head>
<body>
<h1>CSS</h1>
<h2>css를 html문서에 적용하는 방법</h2>
<ol>
<li>외부 css파일을 현재 html문서와 연결</li>
</ol>
<hr>
<ul>
<li><a href="01_selector.html">선택자</a></li>
<li><a href="02_selector_priority.html">선택자 우선순위</a></li>
</ul>
</body>
실제로는 3. 외부 css파일을 현재 html문서와 연결하는 방법을 제일 많이 사용한다.
선택자
css선택자 설명 링크 🔼
<!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>
<h1 title="선택자">선택자</h1>
<!-- div>p#p$.group1{HelloWorld$}*5 -->
<div>
<p id="p1" class="group1" title="안녕1">HelloWorld1</p>
<p id="p2" class="group1">HelloWorld2</p>
<p id="p3" class="group2">HelloWorld3</p>
<p id="p4" class="group2" title="안녕4">HelloWorld4</p>
<p id="p5" class="group1 group2">HelloWorld5</p>
</div>위와 같은 코드에서 선택자에 대해 배워보자
태그명
p선택자를 가지는 속성 전부 보라색으로 설정됨
아이디
p3아이디를 가지는 속성 연두색으로 설정됨
클래스명 - 태그 그룹핑
우선순위가 똑같으면 나중에 작성된(스타일코드에서) 스타일 적용
선택자 나열
선택된 p1,p3아이디만 밑줄 그어짐
속성
타이틀이 존재하는 것은 배경색이 씌워지고, 타이틀이 안녕1인것만 white 글씨로 지정됨.
위에서 배운 내용 혼용하기
title이 있는 것은 배경색이 적용되고, p속성중 group2클래스를 가지는 것만 bold체 처리되었다.