[PNUCSE Web] CSS Basic

해당 자료는 부산대학교 최성기 교수님의 웹 응용 프로그래밍 강의 자료입니다.
저번 글에 이어 CSS에 대해 간략하게 알아보자.

What is CSS?

CSS(Cascading Style Sheet)란, HTML이나 XML같은 문서를 꾸밀 때 사용하는 언어이다.
배경색, 위치, 너비, 높이 뿐만 아니라 장치에 따라 화면을 다르게 표시하는 등의 다양한 표현이 가능하다.

장점은 내용과 표현이 분리가 가능하다는 점이다.
이 덕분에 HTML 파일에 모두 몰아넣는 것보다 유지보수가 훨씬 수월해졌다.

MIME Type

HTTP 공부를 하다보면 만날 수 있는 MIME Type 이다.
MIME Type이란,

HTTP에서는 text/plain, application/json과 같은 형태가 있다.
HTML에서는 text/html 을 사용해야 인식을 한다.
마찬가지로 CSS는 text/css를 사용해야 인식이 가능하다.

Inline Style Sheet

<body>
	<p style = "font-size: 20pt;"> This is Inline </p>
	<p style = "color: #00FFFF;"> This color is Aqua </p>
</body>

위의 코드와 같이 Tag내에 바로 Style 속성을 집어넣는 것을 Inline Style 이라고 한다.

Embedded Style Sheet

<head>
	<style>
		em{ font-weight: bold;
			color: black;}
		p{ font-style: italic;
		   color: aqua;}
	</style>
</head>

위의 코드와 같이 Head 부분에 따로 태그별로 Style을 지정해서 빼낼 수 있다.
이를 Embedded Style 이라고 한다.
아래와 같이 class나 id로도 Style 설정이 가능하다.

<head>
	<style>
		.intro{
			background-color: black;
		}
		#firstname{
			font-weight: bold;
			color: white
		}
		#lastname{
			color: white
		}
	</style>
</head>
<body>
	<div class = "intro">
		<p id = "firstname"> I'm Sim </p>
		<p id = "lastname"> Jinseop </p>
	</div>
</body>