이 글은 2026년 3월 5일 기준 작성된 글이다.

오늘은 프론트엔드 개발의 기본 기술인 HTML, CSS, DOM, React, Tailwind CSS의 기초 개념을 정리했다.
웹 페이지는 보통 HTML로 구조를 만들고, CSS로 디자인을 적용하며, JavaScript와 React로 동적인 UI를 구현한다.

HTML

HTML(HyperText Markup Language)은 웹 페이지의 구조를 만드는 마크업 언어이다.
웹 페이지의 제목, 문단, 이미지, 링크 등 다양한 요소를 태그를 통해 정의한다.

예시

Hello World

이것은 문단입니다.

대표적인 HTML 태그

태그	설명
h1	제목
p	문단
a	링크
img	이미지
div	레이아웃 영역

HTML은 웹 페이지의 **기본 구조(뼈대)**를 만드는 역할을 한다.

CSS

CSS(Cascading Style Sheets)는 HTML 요소의 스타일과 디자인을 담당하는 언어이다.
색상, 글꼴, 레이아웃 등을 지정하여 웹 페이지의 시각적인 요소를 꾸밀 수 있다.

예시

h1 { color: blue; }

display 속성

CSS의 display 속성은 요소의 배치 방식을 결정한다.

값	설명
block	한 줄 전체를 차지
inline	필요한 만큼만 공간 차지
inline-block	inline처럼 배치되지만 width/height 지정 가능

예시

div { display: block; }

span { display: inline; }

button { display: inline-block; }

CSS 선택자 (Selector)

CSS 선택자는 어떤 HTML 요소에 스타일을 적용할지 지정하는 방법이다.

기본 선택자

선택자	설명
element	태그 선택
.class	클래스 선택
#id	아이디 선택

예시

p { color: red; }

.box { padding: 10px; }

#title { font-size: 24px; }

자식 선택자

자식 선택자는 특정 요소의 직접 자식 요소에 스타일을 적용한다.

예시

div > p { color: green; }

위 코드는 div 바로 아래에 있는 p 태그에만 스타일을 적용한다.

Hover

hover는 마우스를 올렸을 때 스타일을 변경하는 기능이다.

예시

button:hover { background-color: blue; color: white; }

주로 버튼이나 링크 등의 인터랙션 효과에 사용된다.

DOM (Document Object Model)

DOM은 HTML 문서를 객체 형태로 표현한 구조이다.
JavaScript를 사용하면 DOM을 통해 웹 페이지의 요소를 수정하거나 조작할 수 있다.

예시

document.getElementById("title").innerText = "Hello JavaScript";

설명

getElementById → 특정 id를 가진 HTML 요소 선택
innerText → 텍스트 변경

HTML 예시

Hello

JavaScript 실행 후

Hello → Hello JavaScript 로 변경된다.

React

React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다.
컴포넌트 기반 구조로 UI를 구성하며, 재사용 가능한 구조를 만들 수 있다.

예시

function App() { return

Hello React

; }

React의 특징

컴포넌트 기반 구조
Virtual DOM 사용
상태(State) 관리
UI 재사용성

React는 DOM을 직접 조작하기보다 Virtual DOM을 사용하여 효율적으로 UI를 업데이트한다.

Tailwind CSS

Tailwind CSS는 유틸리티 클래스 기반 CSS 프레임워크이다.
미리 정의된 클래스를 사용하여 빠르게 스타일을 적용할 수 있다.

예시

Tailwind CSS의 장점

빠른 스타일 작성
클래스 기반 디자인
높은 커스터마이징 가능

✅ 정리

프론트엔드 개발의 기본 구성은 다음과 같다.

HTML → 웹 페이지 구조
CSS → 디자인 및 스타일
DOM → JavaScript로 HTML 조작
React → UI 개발 라이브러리
Tailwind CSS → 빠른 스타일링

이 기술들을 함께 사용하여 웹 애플리케이션을 개발할 수 있다.