HTML 태그로만 기본적인 웹 페이지의 뼈대를 만들었다면 만들어진 웹 페이지가 개성 없고 심심하게 보입니다. 정리되지 않은 글이 나열되어 전문성이 떨어져 보일 것입니다. 이런 웹 페이지의 골격에 내가 원하는 디자인을 입혀서 보기 좋고 개성이 넘치는 웹 사이트로 업그레이드해야 합니다. 웹 개발에서 CSS를 빼놓고 말할 수 없을 정도로 중요합니다. HTML 보다 더 많은 역할을 한다고 말할 수도 있습니다. 이번 글에서는 CSS를 활용하여 어떻게 웹 문서에 디자인을 입힐 수 있는지 알아보도록 하겠습니다.
CSS(Cascading Style Sheets)는 왜 중요한가요?
HTML 태그만으로 웹 사이트를 디자인 하는것은 한계가 있습니다. HTML만으로 웹 페이지의 스타일을 만들게 된다면 HTML 본연의 기능이 사라져 기획한 방향과 다른 웹 사이트가 될 수도 있습니다. 따라서 복잡하게 코딩이 된 웹 사이트를 CSS를 사용하여 HTML과 병행하여 프로그래밍을 함으로써 웹 페이지 디자인의 일관성을 확립할 수 있습니다.
웹 페이지의 디자인 최적화가 가능하게 되기 때문에 웹 페이지를 통해 전달하는 정보는 HTML이 담당하고 디자인은 CSS를 사용하여 이후 웹 페이지에 있는 정보를 변경할 상황이 생겼을 경우 쉽고 빠르게 수정할 수 있는 장점이 있습니다.
웹 문서 스타일을 사용하는 이유는 무엇일까요?
웸 문서에서 스타일(Style)은 HTML 문서에서 자주 사용되는 색상, 정렬, 글꼴 등의 배치 방법과 같이 웹 문서의 모습을 결정짓는 것을 말합니다. 글 단락에서 줄의 간격을 조절하고 표의 선을 바꾸는 것도 스타일로 정의됩니다. 그런데 이런 디자인 작업을 HTML을 이용하지 않고 따로 스타일을 사용하는 이유는 무엇일까요?
- 내용과 상관없이 디자인만을 바꿀 수 있습니다.
웹 표준의 시작은 HTML로 웹 사이트의 콘텐츠를 나열하고 CSS를 활용하여 웹 문서의 디자인을 구성한다 것이였습니다. 내용과 디자인이 구분되어 있어 웹 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 빠르고 효율적으로 작업을 할 수 있습니다. 또 내용은 건드리지 않고 스타일 시트만을 활용해 디자인만 바꿔 전혀 다른 느낌의 웹 페이지를 만들 수도 있습니다.
- 다양한 디바이스에 맞도록 반응하는 문서를 만들 수 있습니다.
CSS를 활용하여 HTML로 작성한 내용은 그대로 유지하면서 각기 다른 디바이스에 반응하는 디자인을 만들 수 있습니다. 대상 디바이스에 맞게 CSS만 바꿔서 적용해 주면 되는데 이를 반응형 웹 페이지(디자인)이라고 합니다. 반응형 웹 페이지는 사용자가 PC로 접속했을 때나 스마트폰으로 접속했을 때나 브라우저의 크기에 따라 화면의 레이아웃을 자동으로 바꿔 주는 것을 말합니다. 이로 인해서 개발자는 2개의 디자인을 만들지 않고 하나의 웹 문서에서 작동하도록 할 수 있습니다.
스타일 시트는 무엇입니까?
웹 문서 안에서는 여러 개의 스타일 규칙을 사용합니다. 이러한 스타일 규칙을 한번에 확인하고 필요시 수정하기도 쉽도록 하기 위해 한 곳에 모아 묶어 놓은 것을 스타일 스트라고 합니다. 스타일 시트는 웹 브라우저에서 기본으로 만들어져 있는 브라우저 기본 스타일과 웹 사이트의 제작자가 직접 만드는 사용자 스타일로 나눌 수 있습니다. 여기에서 사용자 스타일은 인라인 스타일과 내부 스타일 시트, 외부 스타일 시트로 나뉘게 됩니다.
- 브라우저 기본 스타일
CSS를 사용하지 않는 웹 페이지라도 웹 브라우저에 표시될 때는 기본 스타일을 사용하게 되는데 이를 브라우저 기본 스타일이라고 합니다. 예를 들어 ,<h1> 태그를 사용한 텍스트는 큰 글자로 표시되고 <p> 태그를 사용한 텍스트는 작게 본문으로 표시되게 됩니다. 그리고 텍스트 간의 여백도 이미 브라우저에서 정해 놓은 기본 스타일입니다.
- 인라인 스타일은 간단한 스타일 정보를 적용합니다.
간단한 스타일 정보는 스타일 시트를 사용하지 않고 직접 표시할 수 있는데 이를 인라인 스타일이라고 합니다. 스타일을 적용하고 싶은 부분이 있을 경우 해당 태크에 style 속성을 사용하여 style="속성": 속성값;" 같은 형채로 스타일을 직접 바꿀 수 있습니다.
- 내부 스타일 시트를 통해 스타일을 여러곳에 적용할 수 있습니다.
웹 문서에서 사용할 스타일을 같은 문서에 정리한 것을 내부 스타일 시트라고 합니다. 모든 스타일 정보는 <head> 태그 안에서 정의하고 <style>과 </style> 태그 사이에 작성합니다.
- 외부 스타일 시트는 스타일 정보를 따로 저장한 것입니다.
웹 사이트를 만들때 하나의 웹 문서로 사이트가 만들어지는 경우는 거의 없습니다. 여러 하위 페이지가 메인 디자인과 일관성이 있도록 여러 웹 문서를 사용합니다. 하지만 그때마다 웹 문서를 같은 내부 스타일 시트로 만든다면 서버 공간과 시간에 소요가 엄청날 것입니다. 그래서 웹 사이트를 개발할 때는 여러 웹 문서에서 사용하게 될 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용합니다.
댓글