CSS 공부 (1) : CSS 탄생 배경, 기본 문법

이 글은 생활코딩의 WEB 2 CSS 시리즈 동영상 내용에 기반한다. 또한 본 글은 개인적인 학습 및 정리 용도로 쓴 것이다.

CSS 기초 강의들을 조금씩 보고 있는데 CSS를 어디서부터 알고 모르는지, 뭘 더 배워야 하는지 이런 메타인지적인 정보가 너무 부족하다. 이걸 보완하고자 쓰는 글. 

 

WEB 2 CSS 1, 2, 3편까지의 내용

인터넷이 최초로 생겨났을 때, 웹 문서를 HTML으로만 표현할 수 있었다. 사람들은 웹 문서에 디자인 요소를 추가하길 원했다. HTML에 디자인 명령어들을 추가하는 것은 미봉책에 불과했으므로 사람들은 HTML과는 다른 새로운 웹 디자인 언어를 만들기로 하였다. 그것이 바로 CSS 이다.  CSS 는 웹에 있어 디자인적 요소만을 담당한다.  따라서 검색엔진은 HTML과 CSS를 구분하여 웹 정보들을 읽어낼 수 있다.

 

 

WEB 2 CSS 4편

CSS를 HTML 문서에 추가하는 방법은 두 가지가 있다. (1) HTML에 내장된 CSS 태그 <style>을 쓰는 것과 (2) HTML 태그사이에 style 속성을 넣는 것이다.

(1) <style>   a {     text-decoration-line:none;      color: black;     } </style>    (2)  <a style="text-decoration-line:none";      "color: black";><a>

(1) 은 HTML 태그인 <style>을 쓴 것이다. <style>태그는 대상 태그를 지정하고(여기서는 <a>태그), 그 태그 모두에 효과를 적용한다. 효과는 여러 개 중첩하여 적용할 수 있는데, 각 효과 사이에는 세미콜론(;)을 넣어 구분한다. 이때 대상이 되는 태그는 Selector, 선택자라고 부른다. 

(2) 는 개별 태그에 style 속성을 넣은 것이다. 따라서 style 효과도 이 태그 안에서만 적용된다. 

 

WEB 2 CSS 5편

CSS 주요 용어 정리

a {
    color: red;
    }

 

a: Selector. 선택자. CSS 효과를 줄 HTML 태그를 의미함

color: Property. 속성.  

red: Property Value. 속성의 값.

{ color: red; }

: Declaration. 선언 또는 효과. 어떤 CSS 효과를 줄지 의미.