[CSS] 6-1. 웹 문서에 디자인 입히기

1 minute read

6-1. 웹 문서에 디자인 입히기

웹 문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉 모습을 결정 짓는 것을 가리킵니다.

그런데 이런 디자인 작업을 앞에서 배운 HTML로 하지 않고 따로 스타일을 사용하는 이유가 무엇일까요?

웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다

HTML로는 웹 사이트의 내용을 만들고 CSS로는 웹 문서의 디자인을 구성합니다.

이렇게 내용과 디자인이 구분되어 있음으로 인해 서로 영향을 미치지 않기 때문에 수정할 때에 편리합니다.

다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있습니다

기존 HTML 문서는 모바일용 홈페이지가 필요한 경우, 스마트폰 브라우저에 적합하게 문서를 따로 만들어야 합니다.

하지만 CSS를 이용하면 HTML로 작성한 내용은 그대로 두고, 대상 기기에 맞게 CSS만 바꿔 주면 같은 내용을 여러 기기에서 볼 수 있습니다.

이러한 웹 디자인을 반응형 웹 디자인이라고 합니다. 반응형 웹 디자인을 이용하면 어떤 기기로 접속하든 웹 브라우저의 크기에 맞게 레이아웃을 자동으로 바꿔줍니다.

정리하자면, 기기에 따라 웹 문서를 따로 만드는 것이 아니라 하나의 웹 문서에서 작동하도록 만드는 것이 바로 스타일의 역할입니다.

아래 그림은 Github 홈페이지의 원래 모습과 chrome 웹 스토어 의 Web Developer를 사용하여 Style을 모두 제거했을 때의 모습입니다.

HTML과 CSS로 각각 웹 문서의 내용과 디자인을 따로 관리하기 때문에 수정이 편리하고 웹 문서를 재사용하기에 용이합니다.
반응형 웹 이란, 각 기기마다 다른 웹 문서를 작성하는 것이 아니라 같은 웹 문서를 공유하고 스타일만 다르게 함으로써 기기에 맞게 레이아웃을 자동으로 바꿔주는 웹을 말합니다.