💫 CSS
- Cascading Style Sheets
- HTML에 서식을 지정하는 언어
- 독립 실행 불가능하다. 반드시 HTML 문서가 있어야 CSS 실행이 가능하다.
💫 기본 작성법
h1 {
color: blue;
}h1 : 선택자
{ color: #0bd; } : 선언 블록
color: #obd; : 선언
color : 속성
blue : 값
- 선택자, 속성, 값을 조합해
어디에, 무엇을, 어떻게 바꿀 것인지를 설정한다.
선택자
어디를 장식할 것인지지정- HTML 태그명, 클래스명, ID 설정
속성
- 선택자에서 지정한 부분의
무엇을 바꿀것인지설정 - 속성과 값 사이에는 :(콜론)을 표기해 구분한다.
값
어떻게 바꿀 것인지- 복수의 속성과 값을 지정할 때는 값 뒤에 ;(세미콜론)을 추가한다.
💫 CSS 적용 방법
1. CSS 파일을 불러와 적용
-
외부 스타일 시트, External Style Sheet
-
.css 확장자가 붙은 CSS 파일을 만들어 HTML 파일에 불러온다.
-
적용방법 |
- HTML 파일에
<head>에 <link> 태그를 사용해 CSS 파일 경로를 설정한다. - rel 속성에 style sheet를, href 속성에 CSS 파일 경로를 적는다.
- HTML 파일에
<link rel="stylesheet" href="style.css">- 장점 : CSS 재사용 높음, 여러 HTML 파일에 불러와 적용할 수 있음
2. HTML 파일의 <head>에 <style> 태그로 지정
- 내부 스타일 시트, Embeded Style Sheet
- 적용방법 |
- HTML 파일의 <head> 태그 안에 <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>Document</title>
<style>
li {font-style: italic;}
</style>
</head>3. 태그 안에 style 속성 지정
- 인라인 스타일 시트, Inline Style Sheet
다른 방법보다 CSS가 적용되는 우선순위가 높아서CSS를 덮어 쓰고 싶을 때나 디자인의 일부만 변경하고 싶을 때 사용할 수 있다.- 적용방법 |
- 태그 안에 CSS를 적을 때 각 태그 안에 style 속성을 설정한다. 선택자나, 콤마는 사용하지 않아도 된다.
<body>
<h1>오늘의 할일</h1>
<ul>
<li>VS Code 설치하기</li>
<li style="color: blue;">CSS 속성 복습하기</li>
</ul>
</body>💭 편리하게 관리하기 위해서는 특별한 이유가 없으면 1번 방법을 사용한다.
