1. CSS의 등장
2. CSS의 사용
3. CSS의 기본 문법

1. CSS의 등장

HTML이 등장하면서 사용자들은 자신의 웹페이지를 더 아름답게 디자인하고자 하는 욕심이 생겼다. 따라서 글자의 크기나 색, 글꼴, 글자의 정렬, 이미지 삽입 등. 사용자들의 요구에 따라 HTML에 디자인적 요소를 가미할 수 있는 태그들이 생겨났다.

이렇듯 과거에는 HTML에 디자인적 요소를 모두 포함시켜 작성하였는데, 그러다보니 세부 스타일을 일일이 따로 지정해 줘야한다는 점에서 엄청난 노동과 시간이 요구되었고 완성한 이후에도 유지 보수가 매우 힘들게 되었다. 또한 “구조화된 문서”라는 HTML의 본연의 목적이 불분명해지고 전문가들조차 이 문서가 어떤 문서인지 직관적으로 알아보기 힘든 상황이 발생했다. 이 문제점을 해결하기 위해 W3C에서는 "디자인적 요소를 HTML에서 완전히 분리시켜 만든 새로운 style sheet 언어"인 CSS를 발표하게 된다.

CSS(Cascading Style Sheets)는 웹페이지를 꾸미기 위한 코드이다.

CSS의 등장으로 효율성이 폭발적으로 증가! 📈

1. 디자인에 관련된 코드를 따로 배제함으로써 HTML 본연의 구조화된 문서를 직관적으로 파악할 수 있게 되었다.

2. 중복 제거(가령 HTML에 1억 개의 공통된 태그가 있고 이 태그들의 글자색을 검정에서 빨강으로 바꾸고 싶을 때 - 1억 개를 일일이 바꿔야하는 일을 단 한 문장으로 바꿀 수 있게 됨)가 가능해짐으로써 엄청난 시간과 노동을 절약하게 되었다.

3. 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 되었고 그에 따른 유지 보수도 용이해졌다.

2. CSS의 사용

CSS를 사용하는 방법

✔️ inline 방식
✔️ 내부 stylesheet 방식
✔️ 외부 stylesheet 방식

+ CSS import 방식

✔️ inline 방식

해당 <tag>의 스타일 속성에 넣는 방식

<Li><a href="1.html" style="color: black">HTML</a></li>

✔️ 내부 stylesheet 방식

<style> 태그 내부에 직접 작성하는 방식

✔️ 외부 stylesheet 방식

<link>를 사용하여 별도의 css 파일을 연결하는 방식

+ TIP ☝🏻   CSS Import 방식

앞에 나열한 세가지 방식은 HTML에 CSS를 적용하는 방식이었다.
이것은 한 CSS 파일에서 다른 CSS 파일로 임포트하는 방식이다.

<style.css>

#hello1 {
  color: red;
  background-color: yellow;
}
#hello2 {
  color: green;
}

<index.html>

<style type='text/css'>
@import url("style.css");
</style>
<p id='hello1'>안녕하세요.</p>
<p id='hello2'>Hello.</p>

3. CSS의 기본 문법

전체 구조 (rule set)

선택자(selector) : rule set의 맨 앞에 있는 HTML 요소 이름.

선언(declaration) : color: red와 같은 단일 규칙. 꾸미기 원하는 요소의 속성을 명시.

속성(property) : 주어진 HTML 요소를 꾸밀 수 있는 방법.

속성값 (property value) : 주어진 속성에 나타날 수 있는 결과 중 하나를 선택.