01. CSS 이해

해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

CSS란?

Cascading style Sheets. 

웹페이지의 시각적인 모습을 지정하는데 사용하는 언어 (HTML은 웹에서 배포할 문서의 골격을 정의하는 마크업 언어)

HTML은 웹 페이지의 콘텐츠 구성을 웹 브라우저에게 알려준다면 CSS는 어떻게 콘텐츠를 보여줄지를 알려줌.

 

대부분의 워드 프로세서에서 사용하는 편리한 기능을 웹으로 가져온것. CSS를 한 곳에 설정하면 특정 HTML태그, 단일 웹 페이지, 전체 웹 사이트에 걸쳐 문서에 스타일이 적용됨.

 

단순히 HTML태그에 스타일 속성을 추가하는 대신  CSS를 쓰는 이유? 

: <strong>태그는 HTML에서 텍스트를 볼드체로 만드는 한가지 일만 할 수 있다. 하지만 CSS를 사용하면 <strong>태그를 재정의해서 텍스트를 볼드체로 만들뿐만 아니라 모두 대문자로 표시하거나 특정 폰트 적용이 가능하다.

 

CSS의 동작방식  

방문자가 웹 페이지를 연다

->서버는 HTML파일과 연결되거나 HTML파일을 방문자의 컴퓨터로 전송한다.

-> CSS의 위치에 상관없이 방문자의 브라우저는 CSS를 해석하고 이를 HTML에 적용한다.

-> 브라우저는 특정 렌더링 엔진을 사용해 웹 페이지를 렌더링하고 이를 브라우저 창에 보여준다. 

 

스타일이란?

스타일에는 제목, 머리글, 주석 등에 적용할 폰트 두께, 폰트 종류,색상, 크기 등 여러가지 속성이 조합되며 이들 속성은 하나의 이름을 지정해 그룹처럼 사용할 수 있다. 

 

CSS규칙의 종류

- HTML 선택자

: HTML 선택자는 CSS규칙에서 태그가 보이는 방식을 재정의한다. 예를 들어 h1 { color: red; }는 <h1> ... <h1>에 스타일을 적용한다. 

 

- 클래스

: 원하는 HTML태그에 모두 적용할 수 있는 규칙. 여러 HTML 태그에 적용할 수 있으므로 클래스 선택자는 선택자 중에서 가장 다용도로 사용할 수 있다. 

.myClass { font: bold 1.25em times; } 는 <h1 class="myClass">...</h1>에 스타일을 적용한다.

 

-  ID

: 클래스 선택자와 비슷하게 ID규칙은 모든 HTML태그에 적용할 수 있다. 하지만 ID선택자는 자바스크립트 함수에서 객체를 사용할 수 있도록 특정 페이지상에서 특정 HTML태그에 한번만 적용해야한다. 

#myObject1 { position: absolute; top: '10px';}는 <h1 id= "myObject1">...</h1>에 적용된다.