티스토리 뷰

잉고래의 티스토리

CSS 사용법 3가지 정리

잉고래 2017. 2. 15. 01:00

CSS를 쓰는 3가지 사용법

브라우저는 CSS 즉 스타일 시트를 읽으면 스타일 시트의 정보에 따라 HTML 문서의 서식을 지정한다. 쉽게 말해 스타일에 따라 HTML을 예쁘게 꾸며주는거다. 그러려면 HTML에 스타일을 넣어줘야 하는데, 넣는 곳에 따라서 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 이렇게 3가지 방법이 있다. 스타일 시트를 HTML에 삽입하는 세 가지 방법을 알아보자.

참고로 이 포스팅은 CSS에 대한 지난 글에 이어지는 글이다. 순서대로 읽어보면 이해하기 편하다.

  1. CSS 소개 : CSS는 왜 Cascading Style Sheet일까?
  2. CSS가 생겨난 이유 : CSS가 없던 시절의 문제
  3. CSS 문법 소개 : CSS 기초 문법 2가지 구문만 알면 오케이~
  4. CSS의 선택자 1편 : 기본적인 CSS 선택자 3가지
  5. CSS의 선택자 2편 : CSS 선택자(Selector) 심화학습

외부 스타일 시트

외부 스타일 시트는 말 그대로 CSS(스타일 시트)를 외부 파일로 하나 만들어서 쓰는걸 말한다. 가령 hello.css란 스타일 시트를 만들어서 html의 head태그 사이에 link 태그를 이용하여 이 스타일을 참조하는 식이다.

이렇게 외부 스타일시트 파일을 참조하는 식으로 사용하면 외부 스타일 하나의 파일만 변경하면 참조된 전체 웹 사이트의 html 페이지들이 변경되기 때문에 전체 웹사이트의 모양을 변경할 수 있다는 장점이 있다.

사용법은 다음과 같다.

  1. css란 확장자를 가진 파일을 편집기로 하나 만든다. (예:hello.css)
  2. 파일의 내용에 CSS 문법을 기입한다.
  3. HTML 페이지의 HEAD 태그 사이에 link 태그로 외부 스타일 시트 파일에 대한 참조를 넣는다.

<head>
<link rel="stylesheet" type="text/css" href="hello.css">
</head>
cs

내부 스타일 시트

CSS 즉 스타일시트를 외부에 파일로 두지 않고 HTML 페이지 내에 넣은걸 내부 스타일 시트라고 한다. 보통 한 페이지에 고유한 스타일이있는 경우 내부 스타일 시트가 사용될 수 있다.

내부 스타일은 HEAD 태그 사이에 style 태그 사이에 CSS를 삽입하여 쓴다.

사용법은 다음과 같다.

  1. HTML 페이지의 HEAD 태그 사이에 style 태그를 넣는다.
  2. style 태그 사이에 CSS 문법을 기입한다.

<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>
cs

인라인 스타일

인라인 스타일은 한개 HTML 태그 요소에 스타일을 적용하는 걸 말한다. 공통적으로 사용되는게 아닌 유니크하게 특정 태그에 고유한 스타일을 적용하는데 사용될 수 있다. 주의할 점은 인라인 스타일은 스타일 시트의 많은 장점을 상실하기 때문에 되도록이면 조금 사용해야 한다.

사용법은 다음과 같다.

  1. 원하는 태그에 style 속성을 추가한다.

<h1 style="color:blue;margin-left:30px;">hello</h1>
cs

다중 스타일 시트

외부, 내부, 인라인 등 여러개의 스타일 시트가 중첩이 되면 어떤게 우선이 될까? 정답은 다른 스타일 시트에서 동일한 선택자에 대해 일부 속성이 정의 된 경우 마지막으로 읽은 스타일 시트의 값이 사용된다.

가령 외부 스타일 시트가 H3 태그에 스타일을 갖고 내부 스타일 시트도 H3 태그에 대해 스타일을 갖는다고 하자. 이 때에 내부 스타일이 외부 스타일 시트에 대한 링크 뒤에 정의되면 내부 스타일이 적용된다. 그러나 내부 스타일이 외부 스타일 시트에 대한 링크 앞에 정의되어있는 경우 외부 스타일이 적용된다.

<head>
<link rel="stylesheet" type="text/css" href="hello.css">
<style>
h1 {
    color: orange;
}
</style>
</head>
cs

케스케이드 순서

앞서 한 질문을 다시 생각해보자. HTML 요소에 대해 하나 이상의 스타일이 지정되면 어떤 스타일이 사용될까? 모든 스타일은 다음 규칙에 따라 새로운 가상 스타일 시트(Virtual Style Sheet)로 케스케이드(계단식) 된다. 우선 순위가 높은것 부터 1,2,3 순으로 나열 했다.

  1. 인라인 스타일 (HTML 요소 내부)
  2. 외부 및 내부 스타일 시트 (Head태그 사이)
  3. 브라우저 기본값 스타일

따라서 모든 스타일보다 우선하고 싶으면 인라인 스타일을 쓰면 된다.

정리

CSS는 넣는 곳에 따라 외부, 내부, 인라인 스타일 이렇게 3가지 방법이 있다. 이 중 우선 순위가 높은것은 인라인, 외부 또는 내부 마지막으로 브라우저 기본값 순이다.

'잉고래의 티스토리' 카테고리의 다른 글

최고의 html 편집기 3종 비교  (6) 2017.02.20
3가지 CSS color 속성 지정 방법  (0) 2017.02.18
CSS 선택자(Selector) 심화학습  (4) 2017.02.09
기본적인 CSS 선택자 3가지  (2) 2017.02.04
초간단 git 설치 방법  (0) 2017.02.03