1 프론트엔드란?
→ 사용자가 직접 보고 조작하는 웹 화면(UI)와 동작(JS)
→ 기술과 사람을 잇는 웹의 얼굴
→ 겉(프론트) vs 데이터와 로직 등의 속(백엔드)
2 웹사이트 작동 원리
→ 도메인을 입력하면 DNS가 IP 주소를 반환
→ 브라우저가 서버에 요청(Request)
→ 서버가 HTML, CSS, JS 파일 응답(Response)
→ 브라우저가 렌더링하여 화면 출력
3 프론트엔드 핵심 기술
| 기술 | 역할 | 비유 |
| HTML | 구조와 뼈대 | 집의 설계도 |
| CSS | 디자인과 스타일 | 인테리어 |
| JavaScript | 동작과 기능 | 전기, 자동문 |
4 프론트엔드 개발자가 하는 일
→ HTML로 레이아웃 구성
→ CSS로 시각 디자인 구현
→ JS로 인터랙션과 DOM 조작
→ 반응형, 접근성, 성능 최적화
→ 기획, 디자인, 백엔드와 협업
5 UI와 UX
| 구분 | 의미 | 초점 |
| UI | 버튼, 색상, 메뉴 등 눈에 보이는 모든 요소 | 보이는 것 |
| UX | 사용하면서 느끼는 편의와 만족 | 느끼는 것 |
※ UI가 예뻐도 UX가 나쁘면 사용자는 떠나므로, 두 축을 함께 고민해야 함
6 브라우저와 DOM 원리
1) 렌더링 엔진
→ Chrome(Blink)
→ Safari(WebKit)
→ Firefox(Gecko)
2) DOM
→ 브라우저가 HTML을 객체 트리로 변환한 구조
→ JS로 읽기, 수정, 삭제 가능
7 반응형 웹(Response Web)
| 포인트 | 설명 |
| 정의 | 화면 크기에 맞춰 레이아웃, 글씨, 이미지가 자동 조정 |
| 장점 | 기기별 별도 제작이 아니라 유지보수 효율과 사용자 만족이 업 |
| 주의 | 성능과 디자인 제약이 걸리고, 다양한 기기 테스트가 필요 |
8 필수 개발 도구 세트
| 카테고리 | 도구 | 핵심 기능 |
| 코드 편집 | VSCode | 자동 완성과 확장 |
| 실시간 미리보기 | Live Server | 저장하고 브라우저 자동으로 새로고침 |
| 브라우저 | Chrome DevTools | 구조, 스타일, 콘솔, 네트워크 실시간 분석 |
| 디자인 공유 | Figma | 픽셀, 색상, 간격 정보를 클릭 한 번에 |
| 리소스 | Google Fonts, Font Awesome, Unsplash | 무료 폰트, 아이콘, 이미지 제공 |
※ ※ 첫 세트는 VSCode, Live Server, Chrome DevTools, Prettier 만으로 충분
9 미니 프로젝트: 3파일로 완성하는 첫 웹
1-1 코드 : index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>나의 첫 웹페이지</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>안녕하세요!</h1>
<p id="mainText">첫 웹페이지 예제입니다.</p>
<button id="changeBtn">눌러보세요</button>
<script src="script.js"></script>
</body>
</html>1-2 코드 : style.css
body{
background:#f0f0f0;
text-align:center;
font-family:sans-serif
}
button{
background:#007BFF;
color:#fff;
border:0;
border-radius:5px;
padding:10px 20px
}1-3 코드 : script.js
const btn=document.getElementById('changeBtn');
btn.onclick=()=>{
const p=document.getElementById('mainText');
p.innerText='반갑습니다!';
p.style.color='blue';
};1-1 결과 : index.html 바로 실행한 초기 화면
1-2 결과 : 버튼을 누른 후의 이미지
※ Live Server로 열고 저장하면 화면이 즉시 갱신됨
10 최종 요약
→ 프론트엔드는 HTML, CSS, JS 3요소로 화면을 보이고, 꾸미고, 움직임
→ UI(보이는 것)와 UX(느끼는 것) 두 축 모두 개선해야 사용자가 재방문을 함
→ 반응형, 브라우저, DOM 이해는 필수 기본
→ 작은 예제, 실시간 확인, 빠른 피드백 루프가 학습 지름길
프론트엔드에 대한 더 상세한 설명을 원하는 분들은 아래 사이트에 접속
☞ 프론트엔드란?
프론트엔드 뿐만 아니라 다른 프로그래밍 언어에 대해 알고 싶은 분들은 아래 사이트에 접속하여 원하는 링크에 접속
'공통' 카테고리의 다른 글
| 프론트엔드 라이브러리란? React와 Vue 쉽게 비교 정리 (1) | 2025.07.19 |
|---|---|
| React, Vue, Angular부터 Next.js까지! 프론트엔드 프레임워크 완벽 정리 & 선택 가이드 (2025 최신) (0) | 2025.07.06 |
| 코딩이란? 누구나 이해하는 코딩 개념부터 시작하는 입문 가이드 (9) | 2025.06.26 |
| [프로그래밍 기초] 제어 구조 완벽 정리 - 순차, 조건, 반복문과 흐름도까지 쉽게 설명 (1) | 2025.06.25 |
| 버전이란? 의미부터 버전 번호, 종류, 충돌까지 쉽게 정리 (1) | 2025.06.24 |