CSS와 Style sheet

Notice

Recent Posts

Recent Comments

Link

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

無제

CSS와 Style sheet 본문

<style>

CSS와 Style sheet

yo-u-loo 2026. 3. 12. 12:54

🔶 CSS 🔶

웹 개발에서 사용하는 이유.

구조와 디자인의 분리: HTML은 정보 전달 역할, CSS는 다양한 스타일 역할로 분리하여 코드를 간결화 한다.
유지보수의 용이성: 하나의 CSS를 여러 HTML에 적용하면 사이트 전체 디자인을 통일할 수 있다.
반응형 웹 구현: 같은 HTML이라도 CSS를 다르게 적용하면 PC, 태블릿, 스마트폰 등 각 기기 화면에 최적화된 레이아웃을 제공할 수 있다.

◼️ 작성 규칙

h1 {
  color: blue;
  font-size: 20px;
}

선택자 (Selector): 스타일을 적용할 대상을 지정. (h1)
속성 (Property): 변경할 디자인 요소. (color, font-size)
값 (Value): 속성에 적용할 설정과 수치. (blue, 20px)
선언 블록 (Declaration Block): {속성: 값;} 한 쌍을 의미하며, 세미콜론(;)으로 끝맺음. ({})

◼️ 주석 표기 방법

/* 메인 배너 스타일 시작 */
.banner {
  background-color: #f0f0f0; /* 배경색 지정 */
}
/* .banner { display: none; } <- 이 코드는 실행되지 않습니다. */

/* 로 시작하고 */ 로 끝나는 방식
- 의미: 코드 설명 추가, 코드 구조 정리, 특정 스타일 임시 비활성화.

◼️ 코드 경량화 (Minification)

CSS 파일의 용량을 줄이고 불필요한 코드를 제거하여 웹 페이지의 로딩 속도를 빠르게 만드는 작업.

주석, 공백, 줄바꿈 제거.
중복 코드 줄이기.
단축 속성 사용 (shorthand)

🔗 Toptal CSS Minifier 🔗

원본 파일: style.css

압축 파일: style.min.css

https://www.toptal.com/developers/cssminifier

CSS Minifier & Compressor | Toptal®

Use our CSS Minifier & Compressor tool to reduce CSS code size and make your website load faster. Get started for free now.

www.toptal.com

🟢 Style sheet 종류

◼️ Browser Style (Default Style)

HTML 요소에 자동으로 적용되는 기본 스타일.

h1 → 큰 글씨, 굵은 글씨.
p → 위아래 여백. (margin)
a → 파란색 + 밑줄.
ul → 점 표시. (bullet)

◼️ Inline Style (인라인 스타일)

<p style="color: red; font-size: 20px;">
This is a paragraph.
</p>

HTML 문서의 태그 안에 직접 스타일을 작성하는 방법.

장점: 특정 요소에만 즉각적으로 스타일을 적용할 때 빠르고 편리하다.
단점: 우선순위가 높아 추후 수정이 어렵고, 코드의 가독성을 떨어트린다.

◼️ Internal Style (내부 스타일)

<head>
<style>
p {
  color: blue;
  font-size: 18px;
}
</style>
</head>

HTML 문서의 <head> 안에 <style> 태그를 사용하여 작성하는 방법.

장점: 해당 HTML 페이지 전체에 적용된다.
단점: 외부 파일을 불러올 필요가 없어 로딩 속도가 미세하게 빠를 수 있지만, 페이지가 많아지면 관리가 힘들어진다.

◼️ External Style (외부 스타일)

HTML

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

CSS

p {
  color: green;
  font-size: 18px;
}

별도의 .css 파일을 만들어 HTML 문서에서 <link> 태그로 연결하는 방법.

장점: 여러 HTML 파일에서 적용 가능하며, 유지보수가 쉬워 전 세계 웹 표준으로 사용된다.

◻️ Include Style (스타일 포함)

Include Style은 CSS 파일을 HTML 문서에 포함(연결)해서 사용하는 방법.

External CSS 를 연결할 때 사용한다.
HTML 문서가 외부 CSS 파일을 포함(include) 해서 스타일을 적용한다.

◻️ Exclude Style (스타일 제외)

HTML 문서 안에 직접 CSS를 작성하지 않고, 외부 파일로 분리해서 관리하는 방법.

즉, [HTML→구조, CSS→디자인] 으로 스타일을 HTML에서 분리(exclude) 하는 개념이다.

📊 차이 정리 📊

개념	의미
Inline / Internal / External / Browser	CSS 스타일 적용 방식 (종류)
Include Style / Exclude Style	CSS 스타일 적용 여부

✔️ Include Style와 Exclude Style은 CSS의 스타일시트 종류(Inline, Internal, External, Browser)와는 다른 개념이다.
즉, 스타일을 어디에 작성하느냐가 아니라 스타일을 HTML에 어떻게 연결하느냐와 관련된 표현.

🛎️ Style sheet 우선 순위 요약 🛎️

① !important

② Inline Style

③ Internal/External Style

④ Browser Style

🔗 CSS example 🔗

https://www.csszengarden.com/

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

www.csszengarden.com

'<style>' 카테고리의 다른 글

color 속성 (0)	2026.03.17
Web font (0)	2026.03.16
font 속성 (0)	2026.03.13
우선순위(Precedence)와 상속(Inheritance) (0)	2026.03.13
Selectors (선택자) 타입 (0)	2026.03.13

'<style>' Related Articles

無제

CSS와 Style sheet 본문

CSS와 Style sheet

🔶 CSS 🔶

🟢 Style sheet 종류

'<style>' 카테고리의 다른 글

티스토리툴바