[CSS] CSS 기초 : 개요, 문법, 적용

728x90

CSS

Cascading Style Sheets

HTML 요소들이 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어

오늘날 대부분의 웹 브라우저들은 CSS를 지원한다

HTML4부터는 모든 서식 설정을 HTML 문서로부터 분리하는 것이 가능해졌다!

CSS를 사용하는 이유

HTML만으로 웹 페이지를 제작하면 세부 디테일을 일일이 지정해주어야 한다.

이는 작업하기에도 어렵지만, 스타일의 변경이나 유지보수 시에도 힘들어집니다!

이러한 문제를 해소하기 위한 언어가 CSS

CSS는 웹 페이지의 스타일을 별도의 파일로 저장하여 사이트의 전체 스타일을 일관성있게 제어할 수 있다.

CSS 문법

선택자(selector)와 선언부(declaratives)로 구성

선택자 : 스타일을 적용하고자 하는 HTML 요소

선언부 : 하나 이상의 선언을 ;로 구분, 속성명(property)와 속성값(value)를 가지며 이 둘은 :으로 연결

a { background-color: yellow; font-size: 16px; }

CSS 선택자

˙ HTML 요소 선택자

˙ 아이디(id) 선택자

˙ 클래스(class) 선택자

<style>
	.headings { color: lime; text-decoration: overline; }
</style>

<h2 class="headings"> 이부분에 스타일 적용 </h2>

˙ 그룹(group) 선택자

<style>
	h1, h2 { text-align: center; }
</style>

CSS 주석 (comments)

/* 주석내용 */

CSS를 적용하는 방법

1. 인라인 스타일 (lnline style)

: HTML 요소 내부에 style 속성을 사용하여 적용한다.

인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.

<body>
	<h2 style="color:green; text-decoration:underline">
    	인라인 스타일로 적용하였습니다!
    </h2>
</body>

2. 내부 스타일 시트 (Internal style sheet)

: HTML 문서 내 <head>태그에 <style> 태그를 사용하여 적용한다.

내부 스타일 시트는 해당 HTML문서에만 스타일이 적용된다.

<head>
    <style>
        body { background-color: lightyellow; }
        h2 { color: red; text-decoration: underline; }
    </style>
</head>

3. 외부 스타일 시트 (External style sheet)

: 웹 사이트 전체의 스타일을 하나의 파일에서 변경한다.

외부 스타일 시트 파일은 .css 확장자로 저장한다.

웹 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함하여야 스타일이 적용된다.

<head>
    <link rel="stylesheet" href="/examples/media/expand_style.css">
</head>

스타일 적용 방법들의 우선순위

1. 인라인 스타일

2. 내 / 외부 스타일 시트

3. 웹 브라우저 기본 스타일

[참고] http://tcpschool.com/css/intro