환영합니다!
CSS와 뗄 수 없는 웹 디자인
웹과 디자인
디자인이란 인간 생활에 필요한 조형 활동이다. 디자인은 숟가락 하나에서부터 초대형 빌딩까지 사람이 사용하는 모든 물건에 적용되는 것이다. 그래서 디자인에는 미학적인 면과 함께 그 실용적인 면이 반드시 강조된다. 웹 디자인 역시 마찬가지라 그 아름다움과 더불어 사용자 경험에 근거했을 때 얼마나 페이지를 가독성이나 사용성이 높게 구성하느냐가 매우 중요해지는 것이다. UI나 UX가 웹 디자인에서 대두되는 이유는 바로 웹 페이지가 예술품이 아니라 사용했을 때 인간의 생활이 더 편리해지는 하나의 도구로 인식되고 있기 때문이다.
웹이 인간의 도구라는 점을 굳이 장황하게 설명할 필요는 없을 것이다. 다만, 그 도구가 어떤 용도로 사용되고 있는지는 짚어볼 필요가 있다. 2006년 한국정보문화진흥원의 조사에 따르면 우리 나라 사람들이 웹을 이용하는 가장 큰 목적이 정보나 자료를 찾는데 있는 것으로 나타났다. 사람들이 웹을 정보를 쉽게 얻을 수 있는 곳으로 인식하고 있다는 증거라 하겠다. 그런데도, 국내 웹에 올라와 있는 정보들은 형태적으로는 그럴 듯해도 구조적으로 정리되지 않은 경우가 훨씬 많아서 단일 웹 페이지 이외에서 그 페이지의 정보를 재활용하거나 기계적으로 내용을 파악하기 어렵다.
웹 페이지를 더욱 보기 좋게
웹 페이지를 구성하는데 필요한 많은 도구가 있지만, CSS는 웹 사이트의 디자인을 해주는 아주 중요한 도구라고 할 수 있다. CSS는 기본적으로 혼자서 사용될 수는 없는 언어이다. HTML과 같은 Markup 언어가 있어야만 동작하며, 이는 CSS의 역할이 Markup 언어를 보조하는 것이라는 점을 분명히 알려준다. HTML이 웹 페이지의 뼈대를 만들어준다면, CSS는 그 뼈대 위에 장식을 해주는 역할을 한다. 그래서 HTML이 어떻게 작성되어 있느냐에 따라 CSS를 사용하는 방법이 달라지게 된다.
예를 들어, 기존에 흔히 하던대로 table 태그만을 이용해 웹 페이지를 작성한다면, 각각 다른 영역과 구성 요소에 굉장히 많은 종류의 클래스를 사용하여 각 영역을 구별하고, 별도의 속성을 지정해줘야 한다. 이는 콘텐트 간의 구분을 지어주는 요소가 없기 때문이다.
반대로 6월호에서 소개한 방식으로 웹 표준을 지켜서 HTML을 작성한다면 사용해야 하는 클래스는 굉장히 적어지고 HTML 코드 역시 더 간결해진다. 이는 HTML 태그가 CSS를 적용해야 하는 지점을 명확하게 구별해주기 때문이라 할 수 있다.
웹 디자인은 구조 디자인
아래에 나올 선택자의 종류를 자세히 살펴보면 알 수 있겠지만, 웹은 문장이나 그림을 나열하는 것이 아니라 정보를 구조화해서 배치할 수 있도록 만들어져 있다. Cascading Style Sheet라는 이름에서 Cascading(계층적)이라는 말이 바로 이런 점을 그대로 드러내고 있다. 그래서 CSS는 HTML 문서의 상하 구조 순서와 요소에 따라 그 속성을 상속할 수 있다.
일례로 많이 쓰고 있는 바와 같이 body 태그에 CSS로 글자 크기를 지정할 경우, body 안에 들어가는 요소의 글자도 같은 속성을 상속받게 된다. 일부의 태그는 경우에 따라 상위 요소의 속성을 그대로 상속받지 않기도 한다. CSS에서 상속은 매우 중요한 특징이며, 이로 인해 CSS는 많은 부분을 중복하여 사용하지 않아도 사이트의 스타일을 지정할 수 있게 된다. 이런 이유 때문에 HTML에서 상하 구조를 잘 설계해서 작성하는 것이 중요해지는 것이다.
Selector
HTML의 구조에 따라 CSS는 어떤 부분을 어떻게 꾸밀지를 결정할 수 있고, Selector(선택자)라는 도구가 이를 이용할 수 있게 해준다. 흔히 사용하는 클래스 역시 이 Selector의 한 종류에 불과하다.
Element Selector(요소 선택자)
요소 선택자란 HTML Element인 태그를 선택자로 사용하는 경우이다. 예를 들어 아래와 같이 CSS를 사용한다면, 이 CSS가 적용되는 문서에서 P 태그가 쓰인 모든 곳의 글자 색상은 검정색이 될 것이다.
p { color:black; }
ID Selector(아이디 선택자)
특정 ID가 부여되어있는 요소에 대해 속성을 적용하게 된다. CSS에서 ID는 # 부호를 이용하여 구별한다.
#MENU { border:1px solid #333; }
<h2 class="menu">내용</h2> <p class="menu">내용</p>
윗 줄은 CSS의 코드이고 아랫줄은 HTML의 코드이다. 클래스와 사용하는 방법은 유사하지만, HTML 문서 내에서 동일한 ID는 중복 사용할 수 없다.
Class Seleotor(클래스 선택자)
특정 class에 해당하는 모든 요소에 속성을 적용한다. Class는 . 부호를 이용하여 구별한다.
.menu { background:#EEE; }
ID와 class가 다른 점이라면, 동일한 ID는 문서당 한번만 사용할 수 있지만, class는 동일한 이름을 여러 번 사용해도 된다는 점이다.
Contextual Selector(문맥 선택자)
문맥 선택자란 페이지의 구조에 따라 태그나 ID, 클래스 등을 상위 요소부터 차례대로 찾아나가는 방식이다. 이 때 문맥 선택자임을 나타내기 위해 요소와 요소 사이에 공백 문자를 넣어주게 된다.
어김없이 CSS Naked Day가 돌아왔다.
작년에 이어 올해도 당연히 참여.
요즘은 바쁘단 핑계로 포스팅도 뜸하지만서도… -_-;;
어쨌든 벗어봅니다.
PHP코드로 붙여놓은 관계로… 시차를 고려하여 만 이틀 정도를 벗고 있을 겁니다. 아마.
뭐 좀 휑할지는 몰라도, 페이지를 읽는데는 문제가 없으시죠?
deute님 화이팅! 저도 100만년만에 트랙백 하나 날려봅니다. ㅋㅋ
CSS 초급과 중급의 차이
Hooney님 글에 트랙백. 일단 제목에 맞는 예제부터 보시고…
예제
초급
.font_04 { color: #333333; font-weight: bold;}
.font_05 { font-family: "돋움"; font-size: 14px; color: #ffffff; font-weight: bold;}
.font_06 { font-family: "돋움"; font-size: 12px; color: #006699; font-weight: bold;}
.font_07 { font-size: 14px; color: #CC3333; font-weight: bold;}
.font_08 { font-size: 14px; color: #134472; font-weight: bold;}
.font_09 { font-family: "돋움"; font-size: 12px; color: #CC3333; font-weight: bold;}
.font_sun { color: red;}
.font_sat { color: blue;}
중급
body { font-family:"돋움", Dotum, Arial, sans-serif; font-size:.75em; color:#333; }
#wrap { width: 65em; margin: 0 auto; }
#header { paddding: 0 1em; }
#header p { line-height:1em; }
#calendar { width: 80%; font-size: 1em; color: #c33; }
#calendar .sun { color: red; }
#calendar .sat { color: blue; }
차이점
- 초급은 클래스를 남발한다. CSS는 그저 HTML을 장식하는데 좀 더 편리한 수단에 지나지 않는다. 그래서 HTML에 class외의 관련 속성을 찾아보기 힘들다.
- 초급은 에디터에서 지원하는 속성이나 값에 의존하는 경향이 강하기 때문에 올바른 속성을 사용하지 않는 경우가 많다.
- 초급은 CSS에서 글자 색상이나 배경색, 테두리 색상 등, 간단한 것들만 선언하는 경우가 많다.
- 중급은 상속의 개념 등을 이해하기 때문에 id와 class를 적절히 섞어 쓰며, CSS 구문도 효율적으로 작성한다.
- 중급은 속성과 값을 알고 사용할 수 있어서 사이트의 전반적인 형태를 CSS로 제어할 수 있다.
- 중급은 선택자를 적절히 사용하기 때문에 HTML 구문 역시 구조적이고 효율적으로 작성한다.
뭐 Hooney님 글 보면서 대충 생각나는 것만 적어봤습니다. 추가 삭제할 부분있다면, 태클 걸어주세요. 
RSS
