CSS 란? (Cascading Style Sheets)

CSS 란, Cascading Style Sheets(종속형 스타일 시트)의 약자입니다.

웹 개발에서 HTML 문서의 디자인(스타일)을 지정하는 언어로 사용됩니다.

 

● CSS란?

• HTML의 구조를 꾸미기 위한 스타일 지정 언어
• 색상, 글꼴, 배경, 여백, 배치, 애니메이션 등 웹 요소의 시각적 표현을 담당
• HTML은 '내용(content)'을, CSS는 '표현(presentation)'을 담당

● CSS의 기본 문법 예시:

css

h1 {

  color: blue;

  font-size: 24px;

}

위 코드는 <h1> 태그에 파란색 글자와 24px 크기를 적용함.

 

● CSS의 주요 개념

개념	설명
셀렉터(Selector)	스타일을 적용할 대상(예: h1, .class, #id 등)
속성(Property)	어떤 스타일을 적용할지 나타냄 (예: color, width)
값(Value)	적용할 값 (예: red, 100px, flex 등)
계단식(Cascading)	여러 스타일이 겹칠 경우 우선순위에 따라 적용됨

 

● CSS 사용 방법 3가지

1. 인라인 스타일: HTML 요소 안에 직접 작성

xml

<p style="color: red;">빨간 글씨</p>

1. 내부 스타일 시트: <style> 태그 내에 작성

xml

<style>

  p { color: red; }

</style>

1. 외부 스타일 시트: .css 파일로 따로 작성 후 링크

xml

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

● CSS로 할 수 있는 것

• 레이아웃 구성 (그리드, flexbox 등)
• 반응형 웹 디자인 (미디어 쿼리)
• 애니메이션 및 트랜지션 효과
• 다크모드 전환
• 모바일에 최적화된 스타일

 

● 요약

• CSS는 웹사이트의 시각적 표현을 담당하는 핵심 기술
• HTML + CSS = 구조 + 디자인
• 사용자 경험(UX)을 높이고, 눈길을 끄는 웹을 만들기 위해 필수