지난주에 HTML 실습을 추가적으로 진행하면서
글자 크기, 색, 정렬 같은 스타일을 <h1>이나 <p> 태그 안에 직접 넣어 사용했었다.
그 당시에는 아직 CSS에 대한 정확한 개념을 배우기 전이라 그렇게 작성했는데,
파일이 길어질수록 태그가 지저분해지고 구조와 디자인이 뒤섞여
문서의 내용이 한눈에 들어오지 않는 경험을 했었다.
오늘은 CSS에 대해 제대로 학습하면서
“웹 문서가 이렇게 깔끔해질 수 있구나”라는 경험을 하게 되었다.
이번 글에서는 CSS의 기본 개념부터
선택자, 박스 모델, 우선순위, 단위까지 차근차근 정리해본다.
1. CSS란? ✨
[출처: 위키피디아_CSS]
CSS(Cascading Style Sheets)는 HTML 문서에 디자인과 레이아웃을 적용하기 위한 스타일 언어다.
HTML이 구조를 담당한다면, CSS는 시각적 표현을 담당한다.
✔️ HTML vs CSS 역할 비교
- HTML → “무엇인가?”를 정의하는 구조
- CSS → “어떻게 보일까?”를 결정하는 스타일
1.1. 기본 구조
CSS는 크게 세 가지 방식으로 적용할 수 있다.
1.1.1. 인라인 스타일 (Inline Style)
HTML 태그 안에 직접 style=""을 넣어 설정하는 방식.
✔️ 특징
- 장점: 빠르게 수정 가능
- 단점: 문서가 지저분해지고 유지보수가 어려움
1.1.2. 내부 스타일 시트 (Internal CSS)
HTML 안의 <head> 태그에 <style>을 넣어서 작성하는 방식
→ 문서 하나만 꾸밀 때는 좋지만, 여러 파일을 관리하기엔 비효율적
1.1.3. 외부 CSS 파일 (External CSS)
HTML 파일과 분리된 .css 파일에서 스타일을 관리하는 방식.
✔️ 특징
- 코드가 훨씬 깔끔해짐
- 여러 HTML 문서에서 동시에 재사용 가능
- 유지보수 편함
→ 실제 프로젝트에서는 대부분 외부 CSS 방식을 사용한다.
cf) Internal CSS는 왜 실제 프로젝트에서 거의 쓰이지 않을까?
✔️ 확장성(Scalability), 재사용성(Reusability)이 부족하다
내부 스타일은 해당 HTML 파일 1개에만 적용된다.
웹사이트는 보통 여러 HTML 페이지로 구성되어 있기 때문에,
각 페이지마다 같은 스타일을 반복해서 적어야 한다.
→ 유지보수가 어렵고, 파일이 많아질수록 비효율적.
✔️ 협업(Teamwork)할 때 심각하게 불편하다
프론트엔드 개발자는 보통 HTML과 CSS를 분리해 관리한다.
왜냐하면,
- HTML: 구조(Structure)
- CSS: 디자인(Style)
이 두 가지는 담당도 다르고, 변경 주기도 다르기 때문.
내부 스타일로 작성하면 HTML 개발자와 CSS 개발자가 같은 파일을 공유해야 하고, 충돌(merge conflict)도 많이 발생한다.
→ 협업에서 비효율성 증가
✔️ 파일 크기 증가 → 성능 문제 유발
HTML 문서 안에 스타일 코드가 길어질수록 문서 크기(파일 용량)가 커진다.
특히 큰 프로젝트에서는 HTML 파일 수가 많기 때문에
전체 다운로드 용량도 증가해 로딩 속도에도 악영향을 준다.
→ 외부 CSS 파일은 한 번만 다운받으면 브라우저가 캐시에 저장함
→ 이후 페이지 이동 시 매우 빠르게 로딩됨
✔️ 브라우저 캐시(Caching)를 활용할 수 없다
브라우저는 .css 파일을 캐시에 저장해두고 재사용한다.
하지만 내부 스타일은 HTML 문서가 로드될 때마다 다시 다운로드되므로
캐시 이점을 활용할 수 없다.
→ 대규모 사이트에서 큰 성능 차이 발생
1.2. 선택자(Selectors)
CSS는 “이 HTML 요소를 스타일링하겠다”라는 대상을 선택자로 지정한다.
1.2.1. Class 선택자 (.class)
여러 요소에 공통 스타일을 적용할 때 사용.
1.2.2. ID 선택자 (#id)
페이지 내에서 단 하나만 존재하도록 만든 고유 식별자.
1.3. 1차 실습 결과
[캡쳐 1-1. 선택자 실습]
2. CSS 박스 모델(Box Model)
웹의 모든 요소는 “박스”로 구성된다.
박스 모델을 이해하면 레이아웃이 훨씬 쉬워진다.
2.1. 개념
모든 HTML 요소는 아래 구조를 가진다.
✔️ 구성 요소
content: 실제 텍스트·이미지padding: content 주변 내부 여백border: 요소의 테두리margin: 요소 바깥의 외부 여백(다른 요소와 거리)
2.2. 2차 실습 결과
[캡쳐 2-1. 박스의 높이, 너비 변화]
[캡쳐 2-2. 박스 내부 여백 변화]
[캡쳐 2-3. 박스 테두리 굵기, 외부 여백 변화]
3. CSS 우선순위(Specificity)
여러 스타일이 겹쳤을 때, “누구의 말을 들을 것인가?”를 결정하는 규칙이다.
3.1. 개념
CSS 우선순위는 아래 기준으로 계산된다.
- 중요도:
!important - 인라인 스타일
- ID 선택자
- 속성 / Class / pseudo-class
- 속성(attribute):
HTML 태그 안에 추가 정보를 제공하는 모든 "key=value 형태" - class (HTML):
속성 중 하나. HTML 요소를 특정 그룹으로 묶기 위한 "이름" - pseudo-class (CSS):
브라우저에서 요소가 특정 상태일 때를 선택하는 CSS 문법
- 속성(attribute):
- 태그 선택자 / 전체 선택자(
*)- 태그 선택자: 특정 태그가 쓰인 모든 요소에 스타일을 적용
- 전체 선택자: CSS에서 모든 요소 전체에 스타일을 적용하는 선택자
cf) 상속 스타일(Inheritance)이란?
HTML 요소에는 부모 요소의 스타일이 자식 요소에게 자동으로 전달되는 성질이 있다.
CSS는 일부 속성이 상속되고, 일부 속성은 상속되지 않는다.
✔️ 상속되는 대표 속성들
colorfont-sizefont-familyline-heighttext-alignvisibility
✔️ 상속되지 않는 속성들
paddingmarginwidthheightborderbackgroundpositiondisplay
이런 레이아웃 관련 속성은 상속될 경우 전체 화면이 망가질 수 있어서
기본적으로 상속되지 않음.
3.2. 우선순위 계산 방식
✔️ 기준
- 점수가 높은 선언이 우선시 됨
- 점수가 같으면, 가장 마지막에 해석된(작성된) 선언이 우세함
✔️ 점수 매기기
!important: 무한대- 인라인 선언 방식: 1000점
- id 선택자: 100점
- class 선택자: 10점
- 태그 선택자: 1점
- 전체 선택자(
*): 0점 - 부정 선택자(
:not(p)): 0점
3.3. 3차 실습 결과
[캡쳐 3-1. !important가 우세한 상황]
[캡쳐 3-2. id 선택자가 우세한 상황]
[캡쳐 3-3. .highlight보다 p.inline-style이 더 우세한 상황]
[캡쳐 3-4. 태그 선택자보다 class 선택자가 우세한 상황]
4. CSS 단위(Units)
CSS에는 다양한 크기 단위가 존재하며, 고정형과 상대형으로 나뉜다.
4.1. 개념
단위는 요소의 크기, 여백, 글자 크기 등을 설정할 때 사용한다.
4.2. 주요 단위
4.2.1. 고정 단위 (절대 단위)
브라우저 크기 변화와 상관없이 일정
px (픽셀)→ 가장 많이 사용
4.2.2. 상대 단위 (반응형에 유용)
부모 요소나 화면 크기에 따라 변함
em: 부모 요소의 글자 크기를 기준rem: 루트(html)의 글자 크기 기준%: 부모 요소 기준 비율vw,vh: 뷰포트 기준
5. 종합 실습 내용
[캡쳐 4-1. CSS 종합 실습 결과]
선택자 우선 순위를 똑똑하게 이용해서
HTML 및 CSS 문서를 보기 좋게 깔끔하게 작성할 수 있도록
연습이 많이 필요할 것 같다는 생각이 들었다.
[참고한 사이트 목록]
