CSS

Posted on | In

CSS 개념

CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있습니다.

초기의 웹은 HTML 하나로 문서의 뼈대도 만들고 꾸미기도 함께 하였지만, 공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재했죠.

CSS는 이런 문제를 해결함과 동시 웹페이지의 내용과 스타일(표현)을 분리 해주어, 역할 분담도 되는 효과를 가지고 있습니다.


사용법

CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의 차이가 존재합니다. 기술하는 방법은 아래의 3가지가 있습니다.

  1. HTML 태그의 style 속성을 이용

  2. <style> 태그를 통해 HTML 문서 내부에 기술 (<style> 태그는 주로 <head>태그 내부에 사용합니다)

  3. .css 파일로 분리하여 HTML 문서에 연결

1
2
<!-- 1번 방법 -->
<div style="color: red"> this is red text </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 2번 방법 -->
<html>
<head>
	<style type="text/css">
		.my-text{ color: blue }
	</style>
</head>
<body>
	<div class="my-text">
		this is red blue
	</div>
</body>
</html>

1
2
3
4
<!-- 3번 방법 -->
<head>
	<link rel="stylesheet" href="경로.css" type="text/css">
</head>

1번 처럼 사용시 HTML과 CSS를 분리하는 장점이 없어지기 때문에 2,3번을 주로 활용합니다.
<style> 태그의 type="text/css"는 필수가 아니지만, 더 정확한 표현을 위해 함께 써주기도 합니다.

0%