Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
67 lines (50 sloc) 2.02 KB
layout title categories redirect_from
post
CSS 입문
css
/css-course/

개요

Cascading Style Sheets

HTML 입문 강의에서 HTML을 웹 사이트에서 화면에 표시되는 정보를 약속 한 것이라고 했는데요,
CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있습니다.

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

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

사용법

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

  1. HTML 태그의 style 속성을 이용
  2. <style> 태그를 통해 HTML 문서 내부에 기술 (<style> 태그는 주로 <head>태그 내부에 사용합니다)
  3. .css 파일로 분리하여 HTML 문서에 연결
<!-- 1번 방법 -->
<div style="color: red"> this is red text </div>
<!-- 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번 처럼 사용시 HTML과 CSS를 분리하는 장점이 없어지기 때문에 2,3번을 주로 활용합니다.
<style> 태그의 type="text/css"는 필수가 아니지만, 더 정확한 표현을 위해 함께 써주기도 합니다.

3번에 관해서는 CSS 파일 분리 문서를 참고해주세요.

주석

/*로 시작하여 */로 끝납니다.

#my-box{
	/* color: red; */
	color: blue;
}
You can’t perform that action at this time.