[CSS] <style> 태그

디자인과 내용의 분리

HTML 웹 문서를 만들때, 웹 페이지의 구조, 내용, 글을 작성하는 칸등 내용을 만드는 부분과

글씨체,색깔,글자간격등 디자인에 관한 부분을 분리 할 필요가있다.

예를 들어 집을 짓는다고 할때 기초 골격과 거실,주방,안방등 뼈대에 관한 부분을 HTML이라고 한다면

지어진 집에 벽지도 바르고, 방도 꾸미고 하는것을 CSS라고 할 수 있다.

이러한 CSS를 사용하기위해 크게 3가지 방법이있다.

인라인 스타일

인라인 스타일이란, <body> 태그안에서 각각의 요소들에 직접 style="속성:속성값" 을 넣어 하나하나 꾸며주는 방법으로 가장 기본적인 방법이다.

내부 스타일시트

내부 스타일 시트는 <head>와 <body> 사이에 <style>태그를 넣어 해당 HTML문서안의 모든 요소들에 대해

전체 요소중에서 <h1>태그는 어떻게~ <h2>태그는 어떻게~ 등등 각각 스타일을 넣어주는 방법이다.

class를 지정하여 해당 클래스를 가진 요소들에 원하는 style을 입혀주거나,

<body> 전체에 적용되는 style을 줄수도 있다.

외부 스타일 시트

인라인 스타일, 내부 스타일 시트는 특정 하나의 HTML 문서를 꾸미는 것이라면,

이러한 스타일 시트들을 모두 모아 폴더에 담아놓고, 이 stylesheet들을 링크로 연결하여 여러개의 HTML 문서를 꾸미는 방법으로 가장 많이 사용된다.

다음과 같이 stylesheet 파일을 link하고, 그 폴더의 주소를 써주면 많은 HTML 문서들을 포괄적으로 꾸밀수 있다.

또한 스트랩부트를 이용하면 이러한 방식으로 다양한 템플릿들을 원하는대로 선택해 사용할 수 있다.

개발 블로그