[Web Front]웹 구조에 시각적 표현을 입히는 언어 CSS

Notice

Recent Posts

Recent Comments

Link

인스타그램

« 2026/07 »
일	월	화	수	목	금	토
			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

관리 메뉴

리제

[Web Front]웹 구조에 시각적 표현을 입히는 언어 CSS 본문

개발자 호소인/Front

[Web Front]웹 구조에 시각적 표현을 입히는 언어 CSS

리제🫧 2026. 6. 22. 09:11

CSS(Cascading Style Sheets)

HTML 문서에 시각적 표현(스타일) 을 입히는 언어이다.

HTML이 문서의 뼈대(구조)를 정의한다면, CSS는 그 위에 색상, 글꼴, 간격, 레이아웃, 애니메이션 등을 더해 사용자가 보기 편한 화면을 만든다.
이름의 Cascading은 여러 스타일 규칙이 겹쳤을 때, 우선순위와 소스의 선언 순서에 따라 최종적으로 적용되는 방식을 의미한다.
즉, CSS는 웹사이트를 단순한 텍스트 구조에서 완성된 디자인 화면으로 바꿔주는 역할을 한다.

CSS 적용 방법 3가지

인라인 스타일
- HTML 태그의 style 속성 안에 직접 작성하는 방식
- 장점: 간단한 테스트나 특정 요소에만 바로 적용 가능
- 단점: 코드가 지저분해지고 유지보수 어려움
- 예시: 버튼 하나의 글자색만 급하게 바꿀 때 사용
- → <button style="color:red;">삭제</button>
내부 스타일(Internal)
- <head> 안의 <style> 태그에 작성하여 문서 전체에 적용
- 장점: 한 문서 안에서 빠르게 스타일링 가능
- 단점: 여러 HTML 파일에 동일한 스타일을 적용하기 어려움
- 예시: 단일 페이지 과제에서 제목 색상, 본문 폰트를 지정할 때
외부 스타일(External)
- 별도의 .css 파일을 만들고 <link> 태그로 HTML과 연결
- 장점: 여러 페이지에서 재사용 가능, 유지보수와 협업에 유리
- 단점: 파일을 따로 관리해야 함
- 예시: 회사 웹사이트 전체에 통일된 색상/레이아웃을 적용할 때

→ 실무에서는 외부 스타일 방식을 가장 많이 사용한다.

CSS 적용 방법 3가지

인라인 스타일
- HTML 태그의 style 속성 안에 직접 작성하는 방식
- 장점: 간단한 테스트나 특정 요소에만 바로 적용 가능
- 단점: 코드가 지저분해지고 유지보수 어려움
- 예시: 버튼 하나의 글자색만 급하게 바꿀 때 사용
- → <button style="color:red;">삭제</button>
내부 스타일(Internal)
- <head> 안의 <style> 태그에 작성하여 문서 전체에 적용
- 장점: 한 문서 안에서 빠르게 스타일링 가능
- 단점: 여러 HTML 파일에 동일한 스타일을 적용하기 어려움
- 예시: 단일 페이지 과제에서 제목 색상, 본문 폰트를 지정할 때
외부 스타일(External)
- 별도의 .css 파일을 만들고 <link> 태그로 HTML과 연결
- 장점: 여러 페이지에서 재사용 가능, 유지보수와 협업에 유리
- 단점: 파일을 따로 관리해야 함
- 예시: 회사 웹사이트 전체에 통일된 색상/레이아웃을 적용할 때

→ 실무에서는 외부 스타일 방식을 가장 많이 사용한다.

선택자와 우선순위

선택자(Selector)

: 어떤 HTML 요소에 스타일을 적용할지를 알려주는 규칙.

예: 태그 선택자(p), 클래스 선택자(.box), 아이디 선택자(#main), 속성 선택자([type=text]), 가상 클래스(:hover) 등

우선순위 규칙

: 같은 요소에 여러 스타일이 겹칠 경우, 더 높은 우선순위를 가진 규칙이 적용된다.

인라인 스타일(태그 안 직접 작성) → 가장 강력
ID 선택자 → 특정 요소 1개만 지정할 수 있어 강함
클래스 / 속성 / 가상 클래스 선택자 → 중간 정도
태그 선택자 → 낮음
전체 선택자(*) → 가장 약함

→ 동일한 수준의 선택자가 충돌하면, 나중에 작성된 스타일이 최종적으로 적용된다.

!important: 모든 우선순위를 무시하고 강제로 적용하는 규칙.

하지만 유지보수성이 크게 떨어지고 다른 개발자와 협업 시 혼란을 주므로 꼭 필요한 경우에만 사용해야 한다.

상속과 캐스케이딩

상속: 글꼴, 색상 등 텍스트 관련 속성은 하위 요소에 전달된다.
비상속: 레이아웃 관련 속성(마진, 보더, 크기 등)은 기본적으로 상속되지 않는다.
캐스케이딩: 여러 규칙이 겹칠 때 우선순위 → 소스 순서에 따라 최종 결과가 정해진다.

박스 모델(Box Model)

모든 HTML 요소는 사각형 박스로 표현된다.
구조: 콘텐츠(content) → 패딩(padding) → 보더(border) → 마진(margin).
실제 요소 크기를 계산할 때, 이 네 가지를 모두 고려해야 한다.
유지보수 편의를 위해 보통 box-sizing을 전체 요소에 통일한다.

단위와 색상

단위(Unit)

절대 단위
- px : 화면의 실제 픽셀을 기준으로 한 고정 크기.
- 장점: 결과가 예측 가능 → 버튼, 아이콘 같은 고정 크기 요소에 자주 사용.
- 단점: 화면 크기·해상도가 달라져도 크기가 변하지 않음.
상대 단위
- % : 부모 요소 크기를 기준으로 비율 적용.
- em : 부모 요소의 글꼴 크기를 기준으로 배율 적용.
- rem : 문서의 최상위(html) 글꼴 크기를 기준으로 배율 적용 → 실무에서 가장 많이 사용 (일관된 글자 크기와 간격 유지 가능).
- vw / vh : 화면(viewport)의 너비/높이를 기준으로 퍼센트 적용 → 화면 전체 배경, 반응형 레이아웃에 활용.

색상(Color)

표현 방식
- HEX(16진수) : #RRGGBB 형태 → 웹에서 가장 흔히 사용됨.
- RGB : rgb(255, 0, 0) 형태, 빨강/초록/파랑 값 지정.
- HSL : 색상(Hue), 채도(Saturation), 명도(Lightness)로 지정 → 색조를 조절하기 편리.
투명도(Alpha 값)
- rgba, hsla 등 알파 채널을 추가해 불투명도(0~1) 지정 가능.
- 예: 버튼 호버 시 살짝 반투명한 배경, 오버레이 효과에 활용.

레이아웃

display
- 요소가 화면에 배치되는 기본 방식을 결정하는 속성.
- block은 줄바꿈이 되는 큰 덩어리(예: <div>), inline은 한 줄 안에 이어 붙는 요소(예: <span>).
- 최신 웹에서는 flex와 grid가 주로 사용되며, 복잡한 레이아웃을 효율적으로 구현할 수 있다.
position
- 요소를 문서 내에서 배치하는 방식.
- static(기본 흐름), relative(자기 위치 기준 이동), absolute(상위 기준 위치 고정), fixed(브라우저 화면 고정), sticky(스크롤에 따라 상대/고정 혼합).
- 예: 상단 네비게이션 고정, 버튼에 뱃지 표시 등 다양한 UI에서 활용.
float
- 원래는 텍스트 주위에 이미지를 배치하기 위한 속성이었음.
- 과거에는 레이아웃 구현(컬럼 구조 등)에도 자주 쓰였지만, 현재는 Flexbox와 Grid 등장으로 제한적 용도(이미지 배치 등) 에만 사용된다.
Flexbox (Flexible Box)
- 1차원(가로 혹은 세로 방향) 레이아웃에 강력.
- 수평/수직 정렬, 요소 간 간격 조정, 공간 분배가 간단해짐.
- 예: 네비게이션 메뉴, 버튼 그룹, 카드 나열 등.
Grid
- 2차원(행과 열 동시에) 레이아웃을 관리.
- 복잡한 페이지 구조(헤더/사이드바/메인/푸터 등)를 체계적으로 배치 가능.
- 예: 대시보드, 갤러리, 잡지형 레이아웃.

저작자표시 비영리 변경금지 (새창열림)

'개발자 호소인 > Front' 카테고리의 다른 글

CSS 코드와 웹사이트의 구조 (0)	2026.06.24
Visual Studio Code 실습문제 톺아보기 (0)	2026.06.22
[CSS] "소수는 어렵고 배수는 쉽다" 는 무슨 뜻일까? / Relation 이해하기 (0)	2026.06.22
[Web Front 2] HTML 기초 (0)	2026.06.18
[Web Front 1] 웹을 구성하는 기본구조 HTML (0)	2026.06.18

'개발자 호소인/Front' Related Articles

리제

[Web Front]웹 구조에 시각적 표현을 입히는 언어 CSS 본문

[Web Front]웹 구조에 시각적 표현을 입히는 언어 CSS

CSS(Cascading Style Sheets)

CSS 적용 방법 3가지

CSS 적용 방법 3가지

선택자와 우선순위

상속과 캐스케이딩

박스 모델(Box Model)

단위와 색상

단위(Unit)

색상(Color)

레이아웃

'개발자 호소인 > Front' 카테고리의 다른 글

티스토리툴바