웹 페이지의 건축 설계도! HTML, CSS, JavaScript로 프론트엔드 구조 이해하기
[ 오늘 배운 핵심 인사이트 ]
웹 페이지는 단순히 하나의 덩어리가 아니라, HTML, CSS, JavaScript라는 3가지 핵심 구성 요소가 유기적으로 결합하여 작동합니다. 이 세 가지는 웹 개발의 기본 중의 기본이며, 각각 '뼈대(구조), 옷(스타일), 움직임(기능)'을 담당합니다. 이 원리를 이해하는 것은 프론트엔드 개발의 진화 과정을 파악하고, 개발팀과의 소통 수준을 높이는 데 필수적입니다. 웹 기술은 점점 편하고 강력하게 진화하고 있으며, 이 3가지 기본기가 모든 발전의 토대입니다.
📘 배운 내용
1️⃣ 웹 개발의 3대 기본 구성 요소
- 웹 페이지를 만드는 가장 기본적인 3가지 요소입니다.
1. HTML : 웹 페이지의 구조를 정의하는 표준 마크업 언어입니다.
2. CSS : 못생긴 HTML에게 색상, 폰트, 레이아웃, 여백 등 스타일 규칙을 정의하여 예쁘게 꾸며줍니다.
3. JavaScript : 웹 페이지에 '생동감과 기능(동적인 동작)'을 추가하는 프로그래밍 언어입니다.
2️⃣ 웹 개발 진화 여정
- 웹 기술은 사용자에게 더욱 편리하고 강력한 경험을 제공하기 위해 단계적으로 진화해 왔습니다.
1단계. HTML - 뼈대 > 못생기고 정적
2단계. CSS - 옷 입히기 > 여전히 정적
3단계. JavaScript - 움직임 추가 > 복잡한 로직일수록 코드가 복잡해짐
4단계. React 등 - 컴포넌트로 조립 > SEO 문제 발생할 수 있음
📍 오늘의 정리 포인트
1. 3요소의 협력: 웹 페이지는 'HTML(구조) + CSS(스타일) + JavaScript(기능)'의 협력으로 완성된다.
2. HTML은 정적: HTML 자체는 디자인이나 동작이 없고, 문서의 의미를 표현하는 데 집중한다.
3. JavaScript는 동적: JavaScript는 HTML에 동적인 동작과 기능을 추가하여 웹 페이지에 생동감을 불어넣는다.
💭 오늘의 적용 아이디어
- 자주 방문하는 웹 페이지를 열고, 각 요소가 HTML, CSS, JavaScript 중 어떤 역할에 해당할지 구분해보기
✏️ 오늘의 한 줄 정리
"웹 페이지는 구조, 스타일, 기능을 담당하는 세 가지 언어로 만들어진 살아있는 건축물이다."
🙏🏻 오늘의 과제 - GPT에서 랜딩페이지 만들기 요청
반응형