Web | 웹

Edit on GitHub

케스케이딩 스타일 시트는 하나 또는 연관된 문서의 표현 영역을 제어하는 강력한 방법이다.

하지만 문서 자체가 존재하지 않으면 CSS는 무용지물이다.

그 이유는 CSS가 표현할 대상인 콘텐츠가 없기 때문이다.

기품을 잃고 타락한 웹

HTML은 원래 문서의 다양한 부분을 설명하는 데 사용할 수 있는 구조적인 마크업 언어를 목표로 만들어졌고, 이런 부분들이 어떻게 보여저야 하는지에 대해서는 거의 다루지 않았다.

하지만 사이트의 수가 늘어나면서 특별한 기능을 가진 새로운 HTML 요소를 원하는 요구도 커져갔다.

제작자들은 텍스트를 두껍게하거나 기울여서 표현할 수 있는 방법을 요구하기 시작했다.

이러한 문제들로 인해 구조적인 언어가 표현적인 언어로 바꾸기 시작한 것이다.

엉망진창이 된 웹

실제로 유용한 정보에 비해서 지나치게 많은 마크업에 놀라게 된다.

더 문제가 되는 것은 대부분의 사이트가 table과 font 요소로만 이루어져 있다.

이 두 요소들은 표현되는 대상에 대하여 어떤 시멘틱한 의미도 전달하지 못한다.

이러한 현상이 나타나는 이유는 디자인한 페이지의 모습 그대로 독자가 보기를 원한다.

구조적인 HTML 마크업을 사용하려면 페이지의 겉모습에 대한 제어를 상당 부분 포기해야 한다.

하지만 이러한 잘못된 접근 방식은 다음과 같은 문제점을 가진다.

구조화되지 않은 페이지는 콘텐츠의 색인 작업을 상당히 어렵게 만든다. 구글은 마크업 구조를 고료해서 페이지의 순위를 정한다. 따라서 구조적인 페이지는 구글 검색 순위를 높혀준다.
불확실한 구조는 접근성을 떨어뜨린다. 음성 합성 브라우저에 의존하여 웹을 검색할때 접근성이 좋아야 한다.
구조화되지 않은 마크업은 유지보수하기 어렵다. 구조적인 마크업을 사용하면 코드도 깔끔해지고 찾고 싶은 부분도 더 쉽게 찾을 수 있게 된다.

구원을 위해 등장한 CSS

HTML이 표현적인 마크업으로 변질되고 있다는 사실을 인지하고 빠른 해결책을 찾기 시작했다.

1995년 W3C에서 CSS라고 이름을 붙인 작업물을 공개하기 시작하면서 1996년에 완전한 권고안이 되었다.

풍부한 스타일

CSS는 HTML이 표현적인 부분에 정점에 이르렀을 떄보다더 훨씬 풍부하게 문서를 표현할 수 있도록 해준다.

사용의 편리함

스타일시트는 특정한 시각 효과에 대한 명령을 문서 전체에 분산시키지 않고 관리하기 편한 하나의 장소에 집중시킬 수 있게 해준다.

예를 들어 문서의 모든 h2 제목을 보라색으로 표현해야 한다면 HTML에서는 모든 제목에 font태그를 넣어야 한다.

하지만 이런게 수십개 라면 하나씩 수정해야만 한다.

이런 방법 대신에 단 하나의 규칙을 사용하는 것이 훨씬 나은 방법이다.

h2 {
  color: purple;
}

CSS 규칙 대부분은 문서의 한 곳에 모여진다.

연관성이 있는 스타일이나 개별적인 요소에 따라 규칙을 나누는 방법으로 규칙을 문서에 분산시킬 수도 있지만 일반적으로 모든 스타일을 하나의 스타일시트에 넣는 것이 훨씬 효율적이다.

여러 페이지에 스타일 적용하기

특정 페이지에 관한 모든 스타일 정보를 한 곳에 집중시킬 수 있을 뿐 아니라 여러 페이지에 적용할 수 있는 하나의 스타일시트를 만들 수도 있다.

이렇게 하려면 스타일시트를 독립적인 문서로 저장한 다음 이 스타일시트를 필요로 하는 문서에서 불러오면 된다.

CSS의 이런 기능을 이용하면 웹사이트 전체에 적용될 일관적인 디자인을 빠르게 만들 수 있다.

캐스케이딩

CSS에는 상반된 규칙을 처리할 수 있는 규칙도 있는데 이것을 캐스케이딩이라고 한다.

페이지 스타일을 대부분 공유하면서 자신에게만 적용되는 특별한 규칙도 포함하고 있는 페이지를 추가할려면 이 페이지에서만 불러들일 새로운 스타일시트를 만들어서 이지 존재하는 스타일시트와 함께 불러들이거나 특별한 스타일을 필요로 하는 페이지에 넣기만 하면 된다.

작은 파일 크기

CSS는 문서 크기를 최대한 작게 만들어서 다운로드 속도를 빠르게 해 줄 수 있다.

많은 페이지들이 멋진 시각 효과를 위해서 table과 font 요소를 사용하고 있다.

이 방법은 파일 크기를 증가시키는 부수적인 HTML 마크업을 만들어낸다.

시작적인 스타일 정보를 편리한 곳에 한데 모으고 상당히 간결한 CSS문법을 사용해서 스타일규칙을 표현하면 font 요소나 흔히 쓰이는 다른 많은 태그를 제거할 수 있다.

따라서 CSS로 로딩 시간을 줄일 수 있다.

요소

요소는 문서 구조의 기반이다.

문서 내의 모든 개별 요소는 문서 표현에 참여한다. 이 말은 CSS 용어로 각가의 요소가 자신의 콘텐츠를 담는 박스를 만들어낸다는 의미이다.

대체되는 요소와 대체되지 않는 요소

CSS가 비록 요소에 의해 좌우되기는 하지만 모든 요소가 동등하게 만들어지는 것은 아니다.

대체되는 요소

대체되는 요소란 요소의 콘텐츠가 문서 콘텐츠로 직접 표현되지 않는 무엇인가로 대체되는 요소이다.

예를 들어 img 요소는 실제 콘텐츠가 없다.

이 마크업에는 실제 콘텐츠는 없고 요소 이름과 속성만 있다.

대체되지 않는 요소

대부분의 HTML과 XHTML 요소는 대체되지 않는다.

이 말은 요소의 콘텐츠가 요소 자신이 만들어낸 박스 안에서 사용자 에이전트에 의해 표현됨을 의미한다.

예를 들어 <span>안녕</span>은 대체되지 않는 요소이고 사용자 에이전트는 안녕이라는 텍스트를 보여줄 것이다.

요소의 표현 방식

블록 레벨과 인라인 레벨이라는 두 개의 다른 기본 유형으로 요소를 분류한다.

블록 레벨 요소

블록 레벨 요소는 기본적으로 부모 요소의 콘텐츠 영역을 채우면서 양 옆으로 다른 요소가 배치되지 않는 요소 박스를 만든다.

다시 말해 블록 레벨 요소는 요소 박스 전후로 줄 바꿈이 생긴다.

리스트 아이템은 특별한 블록 레벨 요소이다. 다른 블록 요소와 동일한 방식으로 동작하지만 요소 박스에 덧 붙이는 마커를 추가적으로 만든다.

인라인 레벨 요소

인라인 레벨 요소는 한 줄의 텍스트 안에서 요소 박스를 만들고 그 줄의 흐름을 끊지 않는다.

가장 대표적인 인라인 요소는 a,strong,em이 있다.

HTML과 XHTML에서 블록 레벨 요소는 인라인 레벨 요소의 자손이 될 수 없다.

하지만 CSS에서는 요소의 표현방식이 상호간에 어떻게 중첩될 수 있는지에 관한 제한이 없다.

<body>
  <p>이것은 <em>인라인 요소를 </em> 포한하는 문단이다.</p>
</body>

XHTML 명세서에 따르면 em은 p의 자손이 될 수 있지만 그 반대는 불가능하다.

일반적으로 XHTML 계층 구조는 이렇게 인라인이 블록의 자손일 경우에만 효력을 갖고 그 반대일 경우에는 제대로 적용되지 않는다.

반면에 CSS에는 이런 제한이 없다. 마크업은 그대로 두고 두 요소의 표현 방식만 다음과 같이 바꿀 수가 있다.

p {
  display: inline;
}
em {
  display: block;
}

이 규칙은 요소들이 인라인 박스 안에 블록 박스를 만들게 해준다.

하지만 발생할수 있는 유일한 문제는 요소들의 포함 관계를 반대로 바꾸려고 할 때 생긴다.

CSS와 XHTML 연결하기

link 태그

link 태그의 근본적인 목적은 link 태그를 포함하는 문서와 다른 어떤 문서를 HTML 제작자가 연결시킬 수 있게 해주는 것이다.

CSS는 이 태그를 이용해서 스타일시트를 문서에 연결시킨다.

외부 스타일시트를 제대로 불러오기 위해서는 link가 head요소 안에 이썽야 하고 그외의 다른 요소 안에는 있어서는 안된다.

속성

rel은 관계를 의미하고 관계는 stylesheet이다. type은 항상 text/css로 지정한다.

이 속성값은 link 태그를 사용해서 불러들일 데이터의 유형을 나타낸다.

웹 브라우저는 이런 방식으로 스타일 시트가 CSS 스타이시트 인 것을 알게 되고 불러들인 데이터를어떻게 처리할지 결정하게 된다.

href는 사용할 스타일시트의 URL이 된다.

URL으 상황에 따라 절대 경로나 상대 경로 둘 중 하나가 된다.

media 속성은 스타일시트가 어떤 표현 미디어에 적용되어야 한다는 의미앋.

media 속성으로 다음과 같은 다양한 값이 올 수 있다.

media: all, aural, braille, embossed, handheld,print,projection,screen,tty,tv

가장 널리 지원되는 것은 all, screen, print 유형이다.

적용할 미디어를 쉼표로 구분해서 나열하면 둘 이사으이 매체에서 스타일시트를 사용할 수 있다.

하나의 문서에 다수의 외부 스타일스트가 연결될 수도 있다.

대체 스타일시트

스타일시트의 rel 속성을 alternate stylesheet로 지정하면 대체 스타일시트가 정의되고 사용자가 선택할 경우에만 문서 표현에 사용된다.

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" />
<link
  rel="alternate stylesheet"
  type="text/css"
  href="sheet1.css"
  title="Big text"
/>
<link
  rel="alternate stylesheet"
  type="text/css"
  href="sheet1.css"
  title="Crazy color"
/>

그러면 사용자가 자신이 원하는 스타일을 고릴 수 있고 브라우저는 최초의 스타일시트를 사용자가 선택한 스타일로 바꾸게 된다.

다수의 대체 스타일시트에 같은 title 값을 부여해서 대체 스타일시트를 그룹으로 묶는 것 또한 가능하다.

rel 속성이 stylesheet인 link 요소에 title 속성을 주면 해당 스타일시트를 우선 스타일시트로 지정하기 때문이다.

해당 스타일시트가 대체 스타일시트보다 우선적으로 사용된다는 의미이다.

만약 세 요소가 모두 title속성값이 있으면 모두가 우선 스타일시트로 지정되지만 실제로는 그 중에 단 하나만이 사용되고 나머지 두 스타일시트는 완전히 무시된다.

어떤 스타일시트가 무시되고 어떤 것이 사용돼야 하는지를 결정할 방법을 제공하지 않기 때문에 확실한 답은 없다.

만약 스타일시트에 title 속성을 주지 않으면 그 스타일시트는 고정 스타일시트가 되고 문서 표현에 항상 사용된다.

style 요소

style 요소는 스타일시트를 포함시키는 방법의 하나로 문서 자체에 들어간다.

style 요소는 반드시 type 속성과 함께 사용해야하는데 CSS 문서의 경우 올바른 type 속성값은 link요소와 똑같은 text/css이다.

외부 스타일시트에서 허용되는 값을 style 요소의 media 속성으로 줄 수도 있다.

문서 스타일시트안에는 문서에 적용될 다영한 스타일이 들어가며 추가로 @import 명령을 사용해서 다수의 외부 스타일시트를 링크시킬수도 있다.

@import 명령

@import 명령은 link와 똑같이 웹 브라우저가 외부 스타일시트를 불러와서 그 안에 있는 스타일을 HTML 문서 렌더링에 사용하도록 지시하는데 이용된다.

둘 사이의 주요 차이점은 실제 문법과 명령이 올 수 있는 위치뿐이다.

@import 명령은 style 요소안에 들어가 있다. 반드시 그 안에 있어야 하고 다른 CSS 규칙보다 앞에 있어야 한다.

하지만 link와는 달리 @import로 불러오는 모든 스타일시트는 로딩이 되고 나서 사용되어 진다.

link처럼 스타일시트 URL 뒤에 적용될 미디어를 나열해서 불러들일 스타일시트를 특정 미디어에 한정 지을수 있다.

@import는 외부 스타일시트에서 다른 외부 스타일시트에 있는 스타일을 사용해야 할 떄 특히 유용하다.

외부 스타일시트는 어떤 문서 마크업도 허용하지 않기 때문에 link 요소를 사용할수 없지만 @import는 가능하다.

실제 스타일 규칙

하위 접근성

브라우저가 자신이 인식하지 못하는 태그는 무시한다

이와 똑같은 방식이 스타일시트에도 적용된다.

style 태그를 인식하지 못하면 이 태그들은 완전히 무시된다 하지만 브라우저 입장에서 이 태그 안에 있는 스타일 선언은 일반적인 텍스트와 다를 바가 없기 때문에 반드시 무시되지는 않는다.

결과 스타일 선언이 페이지 맨 앞에 나타나게 된다.

이 문제를 해결하려면 스타일 선언을 주석 태그 안에 넣어주는 것이 좋다.

이렇게 하면 구형 브라우저는 style 태그와 함께 선언도 완전히 무시하는데 그 이유는 HTML 주석을 표현하지 않기 때문이다.

하지만 CSS를 이해하는 브라우저는 여전히 스타일시트를 읽을 수 있다.

CSS 주석

CSS에서도 주석을 사용할 수 있는데 /* */으로 여러 줄을 한꺼번에 주석 처리할 수도 있다.

하지만 CSS 주석은 중첩해서 사용할 수 없다는 점을 기억해야한다.

인라인 스타일

문서 스타일시트나 외부스타일시트 없이 하나의 개별 요소에 간단히 몇 개의 스타일을 지정하고 싶을 떄는 HTML 속성인 style을 사용해서 인라인 스타일을 만들 수 있다.

속성 값으로 넣을 수 있는 것은 규칙에서 중괄호 사이에 올 수 있는 것들뿐이다.

일반적으로 style 속성르 사용하는게 좋은 방법은 아니다.

CSS의 주요 장점 중 하나는ㄴ 문서 전체의 겉모습이나 웹서버에 있응 전체 문서의 겉모슴을 관리하는 집중된 스타일을 구성할 수 있다는 점인데 인라인 스타일을 사용하면 이런 장점이 사라진다.

요약

외부 스타일 시트의 실질적인 중요성은 제작자가 사이트의 표현에 관한 모든 정보를 한 곳에 모을 수 있고 모든 문서가 그 한 곳에 있는 정보를 이용할 수 있도록 해주는 방식에 있다.

이것은 사이트의 업데이트와 관리를 쉽게 해줄뿐 아니라 문서에서 표현에 관한 내용을 제거하기 때문에 네트워크 전송량을 줄여준다.

CSS

Selector | 선택자