클라이언트vs서버
클라이언트
- 좁은의미의 웹 브라우저
- 사용자가 웹 사이트에 접근할 때 사용하는 기기
서버
- 웹 요소와 여러 정보들이 저장됨
- 인터넷에 연결된 컴퓨터
프론트엔드vs백엔드
프론트엔드 개발
- 웹 브라우저 화면에 보이는 부분을 다룸 - 웹사이트 제작
- 기본적으로 html, css, 자바스크립트 사용
백엔드 개발
- 사용자 뒤에서 보이지 않는 영역, 즉 서버를 다룸
- 데이터베이스를 설계하거나 데이터 처리
- 자바, php, 파이썬 등 프로그래밍 언어 사용
html,css,js?
HTML
웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속
정식적인 프로그래밍 언어가 아니다.
CSS
웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법
Javascript
사용자 동작에 반응해서 동적인 효과를 만들기 위한 기술
자바스크립트를 알고 있다면 새로운 프레임워크를 배우기 쉬움 ex) React.js...
HTML 요소 정리
문서 정보를 지정하는 <meta> 태그,
브라우저에게 정보를 주는 <head> 태그 등 필수적인 기능을 표로 정리해보았다.
style태그로 인라인 css 적용 가능
a태그로 링크 지정 가능
🧱 1. 기본 구조 관련 요소
태그설명
| <!DOCTYPE html> | HTML5 문서임을 선언 |
| <html> | HTML 문서의 루트(root) 요소 |
| <head> | 문서의 메타데이터(제목, 인코딩, 스타일 등) 포함 |
| <meta> | 문자 인코딩, 뷰포트, SEO 정보 등 설정 |
| <title> | 브라우저 탭에 표시될 문서 제목 |
| <body> | 실제 화면에 표시되는 콘텐츠 영역 |
🧩 2. 텍스트 및 콘텐츠 요소
태그설명
| <h1> ~ <h6> | 제목(Heading). 숫자가 작을수록 중요도 높음 |
| <p> | 문단(paragraph) |
| <br> | 줄바꿈(line break) |
| <hr> | 구분선(horizontal rule) |
| <span> | 인라인 요소 그룹 (CSS 스타일링용) |
| <div> | 블록 요소 그룹 (레이아웃 구분용) |
| <strong> | 굵은 글씨(의미적으로 강조) |
| <em> | 기울임(의미적으로 강조) |
| <b>, <i> | 단순 스타일용 굵게/기울임 |
| <u> | 밑줄 |
| <small> | 작은 글씨 |
| <mark> | 형광펜 효과(하이라이트) |
🖼️ 3. 멀티미디어 요소
태그설명
| <img> | 이미지 삽입 (src, alt 속성 필수) |
| <audio> | 오디오 삽입 |
| <video> | 비디오 삽입 |
| <source> | <audio>나 <video>의 소스 지정 |
| <canvas> | 그래픽, 애니메이션, 게임 등 렌더링용 |
| <figure> | 이미지나 미디어를 하나의 단위로 묶을 때 |
| <figcaption> | <figure>의 설명 텍스트 |
🔗 4. 링크 및 내비게이션
태그설명
| <a> | 하이퍼링크(anchor). href로 링크 지정 |
| <nav> | 내비게이션 메뉴 영역 |
| <button> | 클릭 가능한 버튼 |
| <link> | 외부 리소스(css, favicon 등) 연결 |
📦 5. 리스트(List)
태그설명
| <ul> | 순서 없는 리스트 (unordered list) |
| <ol> | 순서 있는 리스트 (ordered list) |
| <li> | 리스트 항목 (list item) |
| <dl> | 설명 리스트 (definition list) |
| <dt> | 용어(term) |
| <dd> | 정의(description) |
📋 6. 표(Table)
태그설명
| <table> | 표 생성 |
| <tr> | 행(row) |
| <th> | 헤더 셀(header cell) |
| <td> | 데이터 셀(data cell) |
| <thead>, <tbody>, <tfoot> | 표의 구역 지정 |
🧾 7. 폼(Form)
태그설명
| <form> | 사용자 입력을 서버로 전송하는 폼 |
| <input> | 입력 필드 (text, password, email 등) |
| <textarea> | 여러 줄 입력 필드 |
| <select> | 드롭다운 메뉴 |
| <option> | <select>의 항목 |
| <label> | 입력 필드 설명 |
| <fieldset> | 관련 입력 그룹화 |
| <legend> | <fieldset> 제목 |
| <button> | 폼 제출용 버튼 |
🧭 8. 시맨틱(의미론적) 레이아웃 요소
태그설명
| <header> | 페이지나 섹션의 머리글 |
| <footer> | 페이지나 섹션의 바닥글 |
| <main> | 주요 콘텐츠 영역 |
| <section> | 주제별 구역 |
| <article> | 독립적인 콘텐츠 단위(기사, 블로그 글 등) |
| <aside> | 보조 정보 영역(사이드바 등) |
⚙️ 9. 스크립트 및 스타일
태그설명
| <script> | JavaScript 코드 삽입 또는 외부 스크립트 연결 |
| <style> | 내부 스타일(CSS) 정의 |
| <link> | 외부 CSS 파일 연결 |
🧭 10. 기타 유용한 태그
태그설명
| <iframe> | 다른 웹페이지를 현재 페이지에 삽입 |
| <meta charset="UTF-8"> | 한글이 깨지지 않게 인코딩 설정 |
| <base> | 문서의 기본 URL 경로 지정 |
html기본 구조및 권장 레이아웃
다음 게시물에서는 필수 css요소를 정리하여 보겠다.
'web > html' 카테고리의 다른 글
| 웹 프로그래밍(HTML5+CSS+javaScript) - 3 (Javascript) (0) | 2025.10.27 |
|---|---|
| 웹 프로그래밍(HTML5+CSS+javaScript) - 2 (CSS) (0) | 2025.10.27 |
| 프론트 링크 자료 모음🎱 (0) | 2023.01.20 |
| [html] springboot 기초실습1 (기초, table, input) (0) | 2022.09.27 |