웹 문서를 디자인하다 - Css stylesheet

 html을 통해서 웹문서를 간단하게 만들어보았다. 하지만 내가 평소에 보던 웹사이트와는 다르게 재미도 없고 단촐했다. 

그렇다면 평소에 보던 웹사이트와 같이 화려하게 웹 사이트를 꾸미고 싶다면 어떻게 해야할까? css를 이용하면 된다.

 

웹 문서는 Css라는 스타일시트 언어를 이용해 꾸밀 수 있다. 

html을 이용하여 작성한 웹 문서는 영역이 각각 나뉘어 있을 것이다. css는 요소 별로 스타일을 입힐 수 있다.

문서 전체의 글꼴, 배경색, 각 요소의 영역 조절, 테두리, 폭, 넓이 등등 다양하게 꾸미는 것이 가능하다.

 

Css에는 선택자라는 문법이 존재하는데 정말 유용하다. 선택자는 원하는 영역에 접근하는데 쓰이는 문법으로 *, id, class 등등 다양한 선택자가 존재한다.  id는 고유한 영역에 대해 정의하고 class는 여러 영역에 공통적으로 접근하는데 사용하는 차이점이 있다. 선택자로 원하는 부분의 색상을 바꾸고 위치를 조절할 수도 있으며, " , " 를 이용해서 여러 영역을 동시에 바꿀 수도 있다.

 

선택자에는 상속성이라는 특징도 있다. 원하는 부모 영역을 지정하면 그 자식 영역도 부모영역의 스타일이 적용된다.

#id h1 {}와 같이 원하는 id 영역안의 h1요소들만 꾸밀 수도 있고, >를 이용해서 바로 아래의 자식 영역만 수정할 수도 있다. ~ + 등등 여러 선택자가 존재하며 css역시도 문서를 쉽게 꾸밀 수 있도록 많은 기술의 발전이 이루어져왔다.

 

지금까지 공부한 html과 css를 바탕으로 채팅방을 한번 만들어 보았는데 기본적인 틀을 구상하고, 각 영역을 어떻게 꾸밀지 구상하는 점이 꽤 흥미로웠다. 채팅 내용이 보이는 part와 채팅을 입력하는 부분을 main과 form으로 나누고 main과 form 내부에서 따로 역할이 있는 부부분을 section 영역으로 지정하며 틀을 논리적으로 구성하는 부분이 특히 기억에 남는다. 

 

나눠진 영역을 선택자를 이용하여 css style을 입혀보았는데, 처음에는 문서의 영역을 height를 위주로 구분하며 시작했다. 전체의 어느정도를 영역을 할당할 건지를 구상하고, 전체 영역의 margin과 padding 그리고 배경색, box-sizing 방법을 1차적으로 정했다. 그 후 원하는 디자인에 맞춰 하위 영역의 padding과 margin, width, height를 각각 조절했다. 

 

큰 영역부터 설계 후 점점 작은 영역들을 수정해나가는 방향성이 느껴지면서 어떻게 하면 코드를 더 깔끔하고 더 적게 사용할 수 있을지에 대한 고민도 들었다.

 

css는 프로그래밍과는 별개의 분야라는 생각이 들긴 공부를 하다보니 프로그래밍과는 다른 미적인 매력을 가지고 있는 듯 하다. 다양한 효과들에 대해 공부하며 블로그를 꾸미는 것도 해보는 목표도 한번 잡아볼까 한다.