01. CSS 이해

CSS

ㅇㄱ9 2021. 5. 28. 19:35

728x90

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

Cascading style Sheets.

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

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

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

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

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

방문자가 웹 페이지를 연다

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

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

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

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

- 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>에 적용된다.

728x90