이 글은 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 → 빠른 스타일링
이 기술들을 함께 사용하여 웹 애플리케이션을 개발할 수 있다.
