#inline #internal #external

CSS 의 구성

span {
	color: red;
}

style을 HTML 페이지에 적용하는 3가지 방법

  1. inline

    HTML 태그 안에 적용한다. 다른 CSS 파일에 적용한 것보다 가장 먼저 적용한다.

    <p style="border:1px solid gray; color:red; font-size:2em;"></p>

  2. internal

    style 태그로 지정한다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵다. 별도로 CSS 파일을 관리하지 않아도 되며, 서버에 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.

    <head>
	<style>
		p {
			font-size: 2em;
			border: 1px solid #f90;
			color: red;
		}
	</style>
</head>
<body>
	<div></div>
</body>

  3. external

    외부파일(.css)로 지정하는 방식이다. CSS 코드가 아주 짧지 않다면 가급적 이 방법을 구현하는 것이 가장 좋다. 현업에서는 여러 개의 CSS파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 한다.

    internal 코드와 같은 css 코드를 구현하고, style.css와 같은 별도의 파일로 만든다. 이후에 아래처럼 Link태그로 추가하면 된다.

    <html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div></div>
	</body>
</html>

  4. 우선순위

    inline은 별도의 우선순위를 갖지만 internal과 external은 우선순위가 동등하다. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.

생각해보기