🛠️ 개발 기초 지식 정리

✔️ 개발용어 및 개념 정리

HTML (HyperText Markup Language)

정의

웹 페이지의 구조와 내용을 정의하는 마크업 언어

웹 문서의 제목, 문단, 링크, 이미지 등 요소를 구성하는 역할

특징

콘텐츠의 구조를 정의 (제목, 리스트, 표 등)
브라우저가 문서를 해석할 수 있도록 태그(Tag) 기반으로 작성
의미론적 태그 사용 가능 (<header.,<article>,<footer> 등)

예시

<!DOCTYPE html> <html> <head> <title>나의 첫 웹페이지</title> </head> <body> <h1>안녕하세요!</h1> <p>이것은 HTML 문서입니다.</p> <a href="https://example.com">링크</a> </body> </html>

CSS (Cascading Style Sheets)

정의

HTML 요소의 시각적 표현을 담당

색상, 글꼴, 레이아웃, 반응형 디자인 등을 조정

특징

스타일 분리: HTML과 분리하여 디자인 관리 가능
선택자(Selector) 기반 스타일 지정
반응형 웹 구현 가능 (미디어 쿼리 사용)
계단식(Cascading): 우선순위에 따라 스타일 적용

예시

body { background-color: #f0f0f0; font-family: 'Arial', sans-serif; }

h1 { color: navy; font-size: 2em; }

a { text-decoration: none; color: blue; }

HTML과 연결

JavaScript (JS)

정의

웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어

버튼 클릭 처리, 폼 검증, 콘텐츠 동적 변경 등 사용자와 상호작용을 처리

특징

동적 웹 페이지 제작(DOM 조작)
이벤트 처리 (클릭, 입력 등)
서버와 비동기 통신 가능 (AJAX, fetch API)
HTML에 직접 삽입하거나 외부 파일로 분리 가능
ES6 이후 문법 발전: 클래스, 모듈, async/await 등

예시

// 버튼 클릭 시 문구 변경 document.getElementById("btn").addEventListener("click", function() { document.getElementById("text").innerText = "클릭되었습니다!"; });

HTML과 연결

<button id="btn">클릭하세요</button> <p id="text">여기에 문구가 표시됩니다.</p> <script src="script.js"></script>

세 기술의 관계

역할	HTML	CSS	JavaScript
목적	구조	스타일	동작
사용 시기	가장 먼저	HTML 이후	사용자 이벤트 후
예시	제목, 이미지	색상, 배경	클릭 이벤트 처리

✔️ WEB 주요 개념 정리

WEB

인터넷을 통해 정보를 공유하고 접근하는 시스템
사용자는 브라우저(Chrome, Safari 등)를 통해 웹 사이트에 접근하고, 웹 서버에서 제공하는 콘텐츠(HTML, CSS, JS)를 받아 확인