CSS_CSS/HTML에 대한 포괄적인 이해

Dreamweaver MX 2004 출시 이후 저는 Dreamweaver의 새로운 기능을 신규 및 기존 Dreamweaver 사용자에게 수없이 선보였습니다. 저는 제품 데모를 할 때마다 CSS(또는 Cascading Style Sheets)를 디자인하고 렌더링하는 Dreamweaver MX 2004의 새로운 기능에 대해 극찬합니다. 이 기사에서는 CSS에 대한 상세하고 포괄적인 이해를 제공합니다.

그런데 최근 새로운 사용자가 질문을 했습니다. 솔직히 말해서 이 질문에 할 말을 잃었습니다. 이 사용자는 단순히 "왜 CSS를 사용해야 합니까?"라고 물었습니다. 저는 매일 HTML과 CSS를 사용하는 사람들은 CSS의 장점을 잘 알고 있지만 여전히 그렇지 않은 사람들이 많다는 것을 깨달았습니다. 아니면 CSS가 제공하는 모든 이점을 완전히 인식하지 못할 수도 있습니다. 이 글은 위의 신규 사용자에게 제가 작성한 답변입니다.

CSS의 유래
CSS의 장점을 살펴보기에 앞서 CSS의 역사를 소개하고 싶습니다. 웹 관리 조직인 W3C는 1996년 11월 CSS 사용을 권장하고 CSS 레벨 1 사양을 승인했습니다. CSS 레벨 1 사양은 HTML 페이지에 사용되는 속성을 설명합니다. 이러한 속성은 기존 글꼴 태그와 색상, 여백 등의 기타 "스타일" 태그를 대체합니다. 1998년 5월 W3C는 CSS 레벨 2 사양을 승인하여 레벨 1 사양에 몇 가지 추가 기능을 추가하고 위치 속성을 도입했습니다. 이러한 속성은 페이지 요소의 표시를 디자인하기 위해 일반적이지만 잘못된 테이블 태그 사용을 대체합니다. CSS 사양의 최신 버전은 CSS 2.1로, 특정 속성을 개선하고 현재 브라우저에 효과가 없거나 거의 없는 속성을 제거합니다.

안타깝게도 많은 신기술과 마찬가지로 CSS도 널리 채택되기까지는 오랜 시간이 걸렸습니다. 이에 대한 가장 큰 이유는 브라우저와 해당 브라우저용 사이트를 구축하는 웹 디자이너에 있습니다. CSS 비준 기간 동안 Netscape Navigator(NN)는 여전히 주요 브라우저였으며 CSS는 해당 브라우저에서 거의 지원되지 않았습니다. Microsoft는 브라우저 버전 3에 CSS에 대한 매우 제한된 지원을 추가했지만 당시 대부분의 웹 디자이너(나 자신 포함)는 여전히 선호하는 플랫폼으로 NN에서 페이지를 코딩하고 있었습니다.

수년에 걸쳐 브라우저 제조업체는 새 버전이 나올 때마다 CSS에 대한 지원을 확대해 왔습니다. 현재 Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera 및 Safari는 모두 CSS를 완벽하게 지원합니다. 그러나 이것이 웹 디자이너와 개발자로서의 우리 경력에 문제가 없다는 의미는 아닙니다. 위의 모든 브라우저는 CSS 레벨 2를 지원하지만 호환성 수준은 다양합니다. 그리고 어떤 경우에는 특정 속성으로 인해 여전히 많은 문제가 발생할 수 있습니다. 그렇긴 하지만, 여전히 "테스트 및 테스트"라는 오래된 신조를 준수해야 합니다.그러나 CSS 사양의 핵심 속성을 고수하면 페이지를 올바르게 렌더링할 수 있습니다.

그런데 W3C는 왜 CSS 사양을 만들 필요성을 느꼈을까요? HTML 기반 웹 사이트와 응용 프로그램을 만들 때 이 모든 것이 나에게 무엇을 의미합니까? 제 생각에는 CSS를 사용해야 하는 이유와 CSS가 가져오는 이점은 크게 유연성, 프리젠테이션, 접근성

유연성
세 가지 측면으로 나눌 수 있습니다. 거의 모든 웹 디자이너와 개발자가 그런 고통스러운 순간을 경험했을 것입니다. 주의 깊게 페이지 레이아웃을 지정하고 중첩된 테이블을 모두 완성한 후에 클라이언트가 "약간의" 변경을 요청합니다. 이 작은 변화는 "그 그래픽을 조금 왼쪽으로 움직일 수 있습니까?"와 같이 간단할 수도 있고 "이 제목이 마음에 들지 않습니다. 더 크게 만들 수 있습니까? 글꼴을 변경할 때 색상을 바꾸는 건 어때요?" 작업할 페이지 수가 제한되어 있다면 심호흡을 하고 한 시간 중 더 많은 시간을 귀찮은 변경 작업에 보낼 수 있습니다. 그러나 대규모 사이트의 경우(이미 일반적인 현상임) 간단한 변경은 어쨌든 그렇게 간단하지 않습니다.

왜 이 상황이 괴로운 걸까요? 페이지의 모양을 정의하는 마크업 자체가 페이지의 일부이기 때문입니다. 예를 보려면 사이트의 페이지로 이동하여 글꼴 및 표 태그 수를 세어보세요. 실제 페이지의 흐름(또는 코드)에서 이러한 태그를 제거하거나 외부화할 수 있다면 중앙 집중식으로 변경할 수 있습니다. 이것이 바로 CSS가 할 수 있는 일입니다.

하나 이상의 외부 스타일 시트를 사용하는 경우 스타일 시트를 수정한 후 수정된 버전을 업로드하여 사이트에 변경 사항을 적용할 수 있습니다.

기존 테이블 기반 레이아웃에서 사이트 탐색을 페이지 왼쪽에서 페이지 오른쪽으로 이동하는 것이 얼마나 어려울지 상상해 보세요. 이를 위해서는 몇 시간의 반복적이고 지루한 작업이 필요했습니다. 그러나 CSS의 위치 지정 속성(CSS-P라고도 함)을 사용하여 페이지를 디자인하기로 선택한 경우 외부 스타일 시트에서 부동 또는 위치 속성을 변경하여 페이지를 업데이트할 수 있습니다. 추가 이점은 다음과 같습니다. 해당 스타일을 사용하는 사이트의 모든 페이지를 업데이트할 수 있습니다.

표현성
광대역의 광범위한 사용으로 인해 많은 개발자는 더 이상 브라우저에서 페이지를 렌더링하는 데 소요되는 시간을 고려하지 않습니다. 그러나 많은 대상 사용자가 여전히 전화 접속 연결을 사용한다는 점을 명심해야 합니다. 기존의 테이블 기반 레이아웃은 페이지 다운로드 속도가 느린 주요 원인입니다. 브라우저가 서버로부터 페이지를 수신할 때 먼저 일련의 복잡한 모자이크 테이블을 검사하고 "이해"해야 하기 때문입니다. 먼저 가장 안쪽에 포함된 콘텐츠를 찾은 다음 가장 바깥쪽 컨테이너인 body 태그에 도달할 때까지 코드를 조심스럽게 실행해야 합니다. 위의 모든 프로세스가 완료되면 브라우저는 화면에 콘텐츠 렌더링을 시작할 수 있습니다.

CSS를 사용하는 경우 페이지에 표시 마크업이 없거나 거의 없기 때문에 브라우저는 서버에서 콘텐츠를 받은 후 즉시 렌더링 프로세스를 시작할 수 있습니다.

외부 스타일 시트를 사용하면 잠재적인 프레젠테이션 이점도 있습니다. 전통적인 테이블 기반 접근 방식에서는 브라우저가 각 페이지를 개별적으로 검색, 구문 분석 및 렌더링해야 합니다. 즉, 브라우저는 사이트의 30페이지를 표시하는 데 1페이지를 표시하는 데 필요한 만큼의 작업을 수행합니다.

그러나 외부 스타일 시트가 표시에 사용되는 경우 사이트의 첫 번째 페이지에서는 페이지에서 사용되는 링크된 스타일 시트 파일을 캐시하라는 메시지가 브라우저에 표시됩니다. 즉, 브라우저가 이미 스타일 시트를 캐시했기 때문에 위 스타일 시트를 사용하는 사이트의 모든 후속 페이지가 더 빠르게 다운로드됩니다.

발표와 관련된 마지막 장점은 영화 '모차르트'가 생각난다. 영화에서 모차르트는 왕에게 자신의 오페라에 대해 어떻게 생각하는지 묻습니다. 왕은 그것이 좋은데 지루하다고 말했습니다. 모차르트는 계속해서 압박을 가했고, 왕은 "너무 많은 음표"에 문제가 있다고 설명했습니다.웹 디자인에도 같은 문제가 있을 수 있습니다. 물론 여기에 있는 참고 사항은 실제 HTML 코드를 참조하기는 하지만요. 코드가 많을수록 브라우저가 페이지를 이해하는 데 시간이 더 오래 걸립니다.

공식 앱에 대한 소문을 들어보셨을 것입니다. 공식 앱은 제대로 코딩되지 않았고 복잡한 정보로 가득 차 있지만 문서 페이지가 렌더링되지 않습니다. Dreamweaver 사용자라면 이런 문제가 발생하지 않을 것입니다. 그러나 코드를 너무 많이 작성하면 죄책감을 느끼게 될 것입니다. 고전적인 테이블 기반 디자인이 좋은 예입니다.

디자인에 CSS를 사용하면 고객이 다운로드해야 하는 코드의 양이 줄어듭니다. 특정 페이지의 글꼴 태그를 줄이는 것만으로도 코드 양을 크게 줄일 수 있습니다. 대부분의 경우 CSS-P를 사용하여 완전히 디자인하면 코드 양을 최대 50% 이상 줄일 수 있습니다. 코드가 적다는 것은 페이지 다운로드 속도가 더 빠르다는 것을 의미합니다.

접근성
요즘 접근성에 대한 이야기를 많이 듣습니다. 대부분의 개발자는 접근성이 더 높은 사이트를 구축해야 한다는 것을 알고 있지만, 대부분의 경우 정부나 교육 기관을 위한 사이트를 구축하는 개발자만이 실제로 이를 수행해야 합니다. 접근성 문제를 생각할 때 대부분의 개발자는 단순히 alt 속성을 그래픽에 추가해야 한다는 의미라고 생각합니다. 그러나 실제로는 접근성을 향상시키기 위해 할 수 있는 일이 많으며 CSS를 사용하면 접근성 있는 사이트를 쉽게 구축할 수 있습니다.

접근성과 관련된 주요 문제(그리고 CSS를 사용하여 해결할 수 있는 문제)는 보조 기술(예: 스크린 리더)이 페이지를 "읽는" 방법입니다. 전통적인 테이블 기반 환경에서 화면 판독기는 페이지를 읽는 방법을 결정하는 데 큰 어려움을 겪습니다. 화면 판독기가 깊게 테셀레이션된 테이블을 발견하면 얼마나 혼란스러울지 생각해 보십시오. 콘텐츠를 읽어야 할까요, 아니면 건너뛰어야 할까요? 콘텐츠를 건너뛴 후 나중에 콘텐츠로 돌아가는 방법은 무엇입니까?

페이지를 클릭하면 페이지 상단의 탐색 및 기타 콘텐츠를 무시하고 관심 있는 페이지의 콘텐츠를 빠르게 볼 수 있습니다. 시력이 나쁜 사람은 이런 일을 할 수 없습니다. 그는 스크린 리더가 페이지 상단과 관심 있는 콘텐츠 사이의 모든 복잡한 정보를 구문 분석할 때까지 기다려야 합니다.

물론 스크린 리더가 탐색을 건너뛸 수 있도록 하는 기술이 있지만 이를 위해서는 탐색 모음이나 기타 콘텐츠의 이미지에 링크를 추가해야 합니다. 이러한 기술의 작동은 사이트를 방문하는 다른 사람들에게 혼란스럽고 눈에 띌 수 있습니다. CSS를 사용하면 페이지에서 보이지 않는 요소(다른 사이트 방문자와 마우스에 보이지 않는 요소)를 완전히 정의할 수 있습니다. 화면 판독기는 이러한 요소를 사용하여 빠르게 탐색하고 문서를 효율적으로 작업할 수 있습니다.

CSS는 마크업을 표시하지 않기 때문에 스크린 리더가 겪는 유일한 문제는 실제 콘텐츠에 관한 것입니다. 또한 CSS-P로 디자인하면 콘텐츠의 실제 "흐름"에 집중하게 됩니다. 페이지의 논리적 순서에 대해 생각하기 시작합니다.

이 문서를 읽으면서 정보의 "흐름"을 이해하게 됩니다. 그러나 모자이크 테이블 예에서 다중 열 레이아웃을 사용하는 경우 이 단락은 페이지의 오른쪽 상단에 있을 가능성이 높습니다. 이렇게 하면 화면 판독기가 기사 끝 부분에서 이 단락을 읽어야 한다는 것을 알 수 없습니다.

CSS-P를 사용한 후에도 브라우저 창의 오른쪽 상단에 이 단락이 계속 표시될 수 있지만, 문서의 소스 코드를 보면 문서의 html에 있는 단락이 여전히 표시됩니다. 지금 보이는 것이 그 위치입니다. 이렇게 하면 페이지에 더 쉽게 접근할 수 있습니다.

요약 및 계획
이상이 제 답변입니다. 웹 디자인에 CSS를 사용하는 고유한 이점을 설명했으면 좋겠습니다. 분명히 배울 점이 많습니다. 따라서 CSS*에 대한 다른 Macromedia 개발자 센터 기사를 읽어 보시기 바랍니다. 이 기사는 CSS의 이점을 더 잘 이해하고 디자인에 CSS를 사용하는 전체 프로세스를 가르쳐 줄 것입니다. 앞으로 몇 주, 몇 달 안에 더 많은 CSS 튜토리얼을 가지고 돌아오겠습니다. 여기에 글을 쓰는 것은 여기까지입니다. 우리 스타일을 즐겨 사용하시기 바랍니다.


저자 소개
Greg Rewis는 Macromedia의 선도적인 웹 기술 전도사입니다. Greg는 웹에 배포되는 Macromedia 소프트웨어 제품군 및 웹 응용 프로그램 개발 서버에 대한 Macromedia의 대중 옹호자이며, 제품 개발 조직을 통해 수천 명의 회사 고객의 이익을 대변합니다. Greg는 1년에 200일 동안 "외근"하면서 고객과 대화하고 무역 박람회, 세미나 및 컨퍼런스에서 제품을 시연하고 Macromedia 제품군에 대한 고급 교육 세션을 조직하기 때문에 Macromedia 고객의 생각을 정확히 알고 있습니다. Greg는 항상 전 세계를 비행하지만 일하지 않을 때는 애리조나 사막에서 골프를 치며 두 아들에게 "수영장에서 휴식을 취하는" 기술을 가르치는 것을 즐깁니다.