Web (2) - Bootstrap, Semantic Web

paramad·2026년 2월 26일

II. Bootstrap과 Semantic Web

1. Bootstrap

CSS 프론트엔드 프레임워크. 다양한 기기 환경(모바일, 태블릿, 데스크탑)에서 웹 페이지가 적절히 표시되도록 반응형 웹 디자인을 지원하는 도구다.

현재 가장 인기 있는 프론트 프레임워크 중 하나다. Github Star 개수 기준 현재 21위.
반응형 웹 디자인을 쉽게 구현할 수 있고, 커스터마이징(customizing)에 용이하다.
크로스 브라우징(Cross browsing)을 지원해 모든 주요 브라우저에서 작동하도록 설계되어 있다.

1-1. 사용 및 설치 방법

https://getbootstrap.com/에 접속 후 [Read the docs] - [Get started with Bootstrap]에서 link와 script 요소를 복사해서 사용

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Bootstrap 코드 파일 다운로드

[Docs] - [Download]에서 [Compiled CSS and JS] 파일 다운로드 후 bootstrap.css와 bootstrap.bundle.js 사용

파일 별 포함 기능이 다르므로 공식문서를 확인하면 좋다.

1-2. 기본 문법

Bootstrap에 미리 작성된 스타일 및 레이아웃을 사용하기 위해서는 특정 규칙을 따라야 한다. 아래는 'Spacing'을 표현하기 위한 Bootstrap의 문법이다.

property: margin, padding을 의미
- margin은 '외부 간격', padding은 '내부 여백'을 의미한다
sides: 방향(top, left, x, y 등) 의미
size: Spacing의 상대적 너비

Property (속성)

이름	값
m	margin
p	padding

Sides (방향)

이름	값
t	top
b	bottom
s	left
e	right
y	top, bottom
x	left, right
blank	4 sides

Size (크기)

이름	값 (상대)	값 (절대)
0	0 rem	0px
1	0.25 rem	4px
2	0.5 rem	8px
3	1 rem	16px
4	1.5 rem	24px
5	3 rem	48px
auto	auto	auto

1-3. Reset CSS

모든 HTML 요소 스타일을 일관된 기준으로 재설정하는 간결하고 압축된 규칙 시트를 말한다. 여러 요소에 일관성 있게 스타일을 적용시키는 기본 단계.

모든 브라우저는 각자의 user agent stylesheet(기본 스타일시트)를 가지고 있다.
문제는 이 설정이 브라우저마다 다르다는 것... 따라서 모두 똑같은 스타일 상태로 만들고 개발을 시작하자는 의미에서 등장한 규칙 시트

user agent stylesheet가 존재하는 이유는?

CSS가 전혀 없는 상태에서도 HTML 문서의 정보를 올바르게 전달하기 위해

네트워크가 오류가 나서 CSS 로딩이 안 돼도, 사용자가 정보를 읽는데 지장이 없도록 안전장치 역할을 수행하는 셈이다.

Normalize CSS

Reset CSS 방법 중 대표적인 방법. 웹 표준 기준으로 브라우저 중 하나가 불일치 한다면 차이가 있는 브라우저를 수정하는 방법이다.

경우에 따라 IE 또는 EDGE 브라우저는 표준에 따라 수정할 수 없는 경우도 있는데, 이럴 경우 IE 또는 EDGE의 스타일을 나머지 브라우저에 적용시킨다.
Bootstrap은 bootstrap-reboot.css라는 파일명으로 normalize.css를 자체적으로 커스텀해서 사용 중이다.

1-4. Bootstrap 활용

Typography

Typography: 제목, 본문, 목록 등
Display Heading: 기존 헤딩보다 더 눈에 띄는 제목 지원
Inline text elements: HTML inline 요소에 대한 스타일
Lists: HTML list 요소에 대한 스타일

Color

Bootstrap Color System: Bootstrap에서 지정하고 제공하는 색상. 의미론적 관점에서 색상을 적용하게 해준다
- ex) red → danger / blue → primary

Component

재사용 가능한 독립적 부품. 더 크고 복잡한 시스템을 구축하기 위해 사용된다. (일종의 레고 블록)

Component 동작은 JavaScript를 활용해서 만들어졌다.
- 만약 동작이 잘 안되면 <script> 요소가 잘 추가되어 있는지 꼭 확인할 것! (JavaScript 요소)
- "data-*"로 시작하는 속성이 잘 정의되있는지도 확인하자.
한번 잘 만들어두면 여러 페이지에서 반복 사용이 가능하다.
또한 각 컴포넌트가 자체 작동하는 모든 코드를 갖고 있기 때문에, 다른 컴포넌트에 영향을 거의 안 미친다.
대표 컴포넌트
- Alerts
- Badges
- Cards
- Navbar
- Carousel: 이미지나 ㅌ텍스트 슬라이드 같은 요소를 순환하며 보여주는 슬라이드쇼 컴포넌트
  - carousel id와 버튼의 data-bs-target이 각각 일치하는지 확인할 것.
- Modal: 기존 화면의 상호작용을 일시 차단하고 그 위에 레이어를 띄워, 즉각 확인을 요구하는 대화 상자
  - Carousel 같이 modal id와 버튼의 data-bs-target이 각각 일치하는지 확인할 것.

2. Semantic Web

웹 데이터를 의미론적 구조화된 형태로 표현하는 방식. 요소의 시각적 측면보다 목적, 역할에 집중하는 방식이다. 개발자가 웹 페이지의 콘텐츠를 이해하기 쉽게 해준다.

2-1. HTML Semnatic Element

header: 소개 및 탐색에 동무을 주는 콘텐츠
nav: 현 페이지 내 다른 페이지 링크를 보여주는 구획
main: 문서의 주요 콘텐츠
article: 독립적으로 구분해 배포 가능한 콘텐츠
section: 문서의 독립적 구획. 더 적합한 요소가 없다면 사용한다
aside: 문서의 주요 내용과 간접적으로 연관된 부분
footer: 작성자, 저작권 정보, 관련 문서 등

2-2. OOCSS (Object Oriented CSS)

CSS에 객체 지향 접근법을 적용한 이론. 구조와 스킨, 컨테이너와 콘텐츠를 분리하는 방식이다.

구조와 스킨 분리

반복되는 코드를 함수처럼 분리한다

컨테이너와 콘텐츠 분리

객체에 직접 스타일 적용 (X) → 객체를 둘러싼 컨테이너에 스타일 적용 (O)
의존적인 스타일 사용 (X)
- Bootstrap의 미디어 객체(Utilities > Flex > Media Object)가 이 분리 원칙을 잘 보여주는 예시

나쁜 예시

/* 중복이 발생하고, 구조가 고정됨 */
.header h2 { font-size: 24px; color: white; }
.footer h2 { font-size: 24px; color: black; }

좋은 예시

/* 공통 스타일: 콘텐츠의 본질(크기) 정의 */
.container .title { font-size: 24px; }

/* 개별 스타일: 위치나 맥락에 따른 외형(색상) 정의 */
.header { color: white; }
.footer { color: black; }