CSS(Cascading Style Sheet)

✒️ 2025-05-16 11:45 내용 수정

참고 자료 : 위키백과 CSS, TCPShool CSS

Markup 언어로 작성된 문서에 스타일을 주는 스타일시트 언어

색상, 폰트, 각 요소의 위치 변경, 백그라운드 및 간단한 애니메이션 등의 효과를 주는 역할을 한다.
HTML, XHTML, XML에서 사용된다.
- Markup 언어가 웹 사이트의 구조를 만들고, CSS는 웹 사이트를 꾸미는 역할을 한다.
- CSS의 계단식과 상속 참고.

구성

selector { property1 : value; property2 : value;}

선택자(Selector) : 스타일을 지정할 HTML 요소, class, id, group
- 선택자(Selector) 참고.
속성명과 속성값은 콜론 ":" 으로 구분한다.
서로 다른 속성명을 한 번에 적용할 때는 세미콜론 ";" 으로 구분한다.
주석은 /*주석 내용*/으로 처리한다.

div{
	/*color : blue;*/
}

/*
h1 {font-size: 30px;}
h2 {font-size: 18px;}
*/*

HTML에서 CSS를 적용하는 방법

1. 속성으로 적용(Inline Style)

HTML의 구조 참고
우선 순위가 가장 높다.
HTML의 요소 안에 분산되어 저장되기 때문에 유지 보수에 어려움이 있을 수 있다.
각 태그에 style="속성값" 으로 적용한다.
Javascript로 CSS 속성 변경 시 인라인 스타일로 변경한다.

<p style="color:red">빨간색</p>

2. style 태그(Internal Style Sheet)

<head>에 작성한다.
body안에 존재하는 각각의 태그에게 스타일을 적용할 수 있다.
<style 속성> 태그이름{속성} </style> 순서로 작성한다.
type="text/css"를 생략해도 적용된다.
body에 같은 이름의 태그가 여러 개라면 모두 적용이 된다.
선택자에 의한 속성 적용 우선 순위 : 인라인 스타일 > # id > .클래스 > 태그

<head>
	<style type="text/css">
		/* 초기화 용도 */
		태그{속성:속성값;} 
		
		/*
		여러 번 사용 가능, 그룹으로 공통된 서식 적용시에도 사용
		*/
		.클래스명{속성:속성값;}
		
		/*
		중복 사용 불가. 페이지 내 1번만 사용
		*/
		#id명{속성:속성값;}
	</style>
</head>

3. 외부 스타일 시트 사용(External Style Sheet)

.css 확장자 파일에 스타일을 저장하고 불러와서 사용한다.
우선 순위가 가장 낮다.
공통적으로 사용해야 하는 스타일을 정할 때 사용할 수 있다.
HTML 코드 자체를 간단하게 사용할 수 있다.
link 태그를 사용한다. (HTML#3. link 태그)

<head>
	<link rel="stylesheet" href="example.css">
</head>

css 파일에는 <style> 태그에 작성했던 내용들로 작성한다.

@charset "UTF-8";

*{margin:0; padding:0;}

a{text-decoration: none;}

li{list-style: none;}

table{border-collapse: collapse;}