🐣 HTML 기초 정리 🐣
HTML
HyperText Markup Language
웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어
웹 브라우저는 HTML 문서를 해석해 웹 페이지로 렌더링
Tim Berners-Lee에 의해 처음 개발됨
Markup
태그 등을 이용해 문서나 데이터의 구조를 명시하기 위해 고안된 것
HyperText
참조(하이퍼링크)를 통해 독자가 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
Rendering
컴퓨터 프로그램을 사용해 이미지나 영상을 만드는 과정
HTML 주요 TAG
# HTML 구조
<html> : HTML 문서의 루트 요소, 문서의 시작과 끝
<head> : 메타데이터(문서 제목, 스타일, 스크립트 등) 정의
<title> : 브라우저 탭에 표시되는 문서 제목
<body> : 문서의 본문 컨텐츠 정의
------------------------------------------------------------------------------------
# 제목
문서 내에서 중요한 제목을 표시할 때 사용, SEO에서도 활용
<h1> : 제목1
<h2> : 제목2, 제목1보다 작은 폰트
<h3> : 제목3, 제목2보다 작은 폰트
<h4> : 제목4, 제목3보다 작은 폰트
<h5> : 제목5, 제목4보다 작은 폰트
<h6> : 제목6, 제목5보다 작은 폰트
------------------------------------------------------------------------------------
# 단락
텍스트로 단락을 구분할 때 사용, 자동으로 앞뒤 여백 추가
<p> : 단락 정의
<span> : 특정 텍스트를 묶어 스타일링, 스크립트를 적용할 때 사용
------------------------------------------------------------------------------------
# 목록
<ul> : 순서 없는 목록 정의
-- 각 항목은 <li> 태그로 정의 : 기본적으로 항목 앞에 불릿이나 아이콘 표시
-- 중첩 가능
ex)
<ul>
<li>항목1</li> // ● 항목1
<li>항목2</li> // ● 항목2
</ul>
<ol> : 순서 있는 목록 정의
-- 각 항목은 <li> 태그로 정의 : 기본적으로 항목 앞에 숫자 자동 추가
-- order 속성 : 항목의 번호 변경 가능
-- 중첩 가능
ex)
<ol>
<li>항목1</li> // 1. 항목1
<li>항목2</li> // 2. 항목2
</ol>
<li> : 목록의 항목 정의
-- 중첩 리스트 : 다른 리스트를 항목으로 포함하는 리스트
------------------------------------------------------------------------------------
# 정의 리스트
<dl> : 정의 리스트 전체를 감싸는 태그, 정의할 항목들의 목록 포함
<dt> : 목록 항목의 제목, 용어나 항목 이름 입력
<dd> : <dt>에서 정의된 항목에 대한 상세 설명
------------------------------------------------------------------------------------
# 하이퍼링크
<a> : 하이퍼링크 생성
-- href 속성 : 링크의 목적지 URL 지정
ex) <a href="https://www.google.com">구글</a> -> 구글 클릭 시 구글 페이지로 이동
# 이미지 삽입
<img> : 이미지 삽입
-- src : 이미지 파일의 경로 지정
-- alt : 이미지가 로드되지 않거나 시각적이지 않은 사용자를 위한 대체 텍스트 제공
ex) <img src="example.jpg" alt="예시 이미지">
------------------------------------------------------------------------------------
# 줄바꿈
텍스트를 다음 줄로 옮길 때 사용
<br> : 줄바꿈
# 수평선
<hr> : 수평선을 그려 컨텐츠를 시각적으로 구분
------------------------------------------------------------------------------------
# 테이블
<table> : 테이블(표 양식) 정의
-- border : 테이블의 테두리 스타일 설정
-- cellpadding : 셀 내 여백을 설정
-- cellspacing : 셀 사이의 간격을 설정
<tr> : 테이블 Row 정의
<th> : 테이블의 헤더 셀 정의
<td> : 테이블 데이터 셀 정의
ex)
<table>
<tr>
<th>가</th>
<th>나</th>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
</table>
-- colspan : 셀을 가로로 합치기
-- rowspan : 셀을 세로로 합치기
ex) <td colspan="2">내용 없음</td>
------------------------------------------------------------------------------------
# 폼
<form> : 사용자가 데이터를 입력해 서버로 전송할 수 있는 폼 정의
-- text : 일반 텍스트
-- email : 이메일 형식
-- password : 비밀번호 (입력 시 숨겨짐)
-- checkbox : 체크박스 (다중 선택 가능)
-- radio : 라디오 버튼 (단일 선택)
-- number : 숫자
-- date : 날짜 선택
<input> : 입력 필드 정의
<button> : 버튼
-- button : 기본 동작
-- submit : 폼 데이터 제출
-- reset : 폼 데이터 초기화
-- disabled 속성 : 버튼 비활성화
------------------------------------------------------------------------------------
# 라벨 및 그룹화
<label> : 입력 필드에 대한 설명 제공
<textarea> : 여러 줄의 텍스트 입력 필드
<fieldset> : 입력 항목들을 그룹화할 때 사용
<legend> : <fieldset> 안에 제목 추가
------------------------------------------------------------------------------------
# 드롭다운 목록
<select> : 드롭다운 목록 정의
-- name : 드롭다운 값의 이름
-- size : 드롭다운에 표시되는 항목의 인덱스(기본 1)
-- multiple : 여러 항목을 동시에 선택 여부
<option> : <select> 태그 내부에서 드롭다운 목록의 항목 정의
-- value : 옵션 값을 지정
-- selected : 해당 옵션 선택
<optgroup> : <select> 목록을 여러 그룹으로 나누어 사용
-- label : 그룹 제목 정의
------------------------------------------------------------------------------------
<meta> : 문서의 메타데이터 정의, SEO 및 브라우저 동작에 영향
<link> : 외부 리소스(CSS 등)와의 관계 정의
<script> : JS 코드 삽입, 외부 Script 연결
------------------------------------------------------------------------------------
# 문서 구조
<header> : 문서, 섹션의 머리글 정의
<footer> : 문서, 섹션의 바닥글 정의
<article> : 독립적인 콘텐츠 정의
<section> : 문서의 주제를 정의하는 섹션
<nav> : 네비게이션 링크를 포함하는 섹션 정의
------------------------------------------------------------------------------------
# 외부 미디어 삽입
<audio> : 오디오 컨텐츠 삽입
<video> : 비디오 컨텐츠 삽입
<source> : <audio>, <video>에 미디어 소스 지정
------------------------------------------------------------------------------------
# 서식
<b> : 굵게
<strong> : 텍스트 강조 = 굵게
<i> : 기울임
<em> : 텍스트 강조 = 기울임
<mark> : 배경색 변경 = 하이라이트
<small> : 텍스트 작게
<sub> : 아래 첨자
<sup> : 위 첨자
------------------------------------------------------------------------------------
# 컨테이너
<div> : 문서에서 컨테이너 역할을 하는 블록 레벨 요소HTML5 주요 TAG
시맨틱 태그
문서의 구조와 의미를 명확히 나타내기 위해 도입
- 가독성 : 코드 구조 명확
- 접근성 : 화면 낭독기 등의 보조 기술이 컨텐츠 구조를 더 잘 이해
- SEO : 검색 엔진이 컨텐츠 구조와 주요 정보를 효율적으로 파악
<header> : 헤더 영역 구분
<nav> : 내부의 다른 영역이나 외부를 연결하는 링크 영역 구분
<section> : 논리적으로 관련 있는 내용의 영역을 구분
<article> : 독립적인 영역 구분
<aside> : 사이드 내용의 영역 구분
<footer> : footer 영역 구분
<main> : 주요 내용 지정, 문서 내 반복 등장하는 요소 X
-- article, aside, footer, header, nav 태그의 하위에 포함할 수 X
<audio> : 오디오 파일 삽입
<video> : 비디오 파일 삽입<Meta>
웹 페이지의 메타 데이터를 정의하는데 사용되는 HTML 요소
사용자에게 보이지 X
검색 엔진, 브라우저, 소셜 미디어 플랫폼 등이 웹 페이지를 이해하도록 도움 제공
SEO(Search Engine Optimization)에 중요한 역할
Meta data
다른 데이터를 정의하고 기술하는 데이터
SEO(Search Engine Optimization)
검색 엔진 최적화
웹 사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정 = 검색 순위 개선
<meta name="description" content="내용">
: 페이지 내용을 요약해 검색 엔진 결과 페이지(SERP)에 표시
<meta name="keywords" content="keyword1, keyword2, keyword3">
: 페이지와 관련된 키워드를 쉼표로 구분하여 나열
<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 반응형 웹 디자인을 지원하기 위해 페이지의 초기 크기와 화면 스케일 설정
<meta charset="UTF-8">
: 브라우저와 검색 엔진이 올바르게 페이지를 읽을 수 있도록 페이지의 문자 인코딩 설정검색 엔진
웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 컨텐츠의 인덱스를 생성
검색 결과에서 보이는 것 = 인덱스로된 컨텐츠
크롤러는 일정 규칙을 따르므로 SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹 사이트가 검색 결과의 최상위에 노출될 가능성이 높음 > 수익으로 연결
문서의 HTML화 = 공유 목적
-> 잘 나타내도록 메타 데이터를 활용함
-> 배포를 통해 문서를 지속적으로 보여줌
기본 구조
<!DOCTYPE html> : 문서형 정의
<html lang="en"> : HTML 문서의 시작과 끝
<head> : 문서 정보 정의
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page name</title>
</head>
<body> : 웹 브라우저에 표시할 내용
<p>페이지 내용</p>
</body>
</html>HTML 요소
Block Element
화면의 새 줄에서 시작
가로 폭 최대 차지
위, 아래로 쌓임 = 수직 정렬
다른 요소와 겹치지 X
레이아웃 구성 및 큰 영역을 나타낼 때 사용
css의 width, height, margin, padding 모두 적용 가능
<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table> Inline Element
텍스트 또는 다른 인라인 요소와 같은 줄에 표시
컨텐츠의 크기 만큼 공간 차지
다른 인라인 요소와 가로로 나란히 배치
텍스트나 소규모 컨텐츠 강조, 링크, 스타일 적용 시 사용
css의 width와 height 무시, margin과 padding은 수평 방향만 적용
<span>, <a>, <strong>, <em>, <img>, <button>HTML, CSS 통합
In-line Style Sheet
HTML 태그의 style 속성에 직접 CSS 작성
- 장점 : 특정 요소만 빠르게 수정 가능
- 단점 : 유지 보수 및 재사용성 낮음
<p style="color: purple; font-size: 16px;">문장입니다.</p>Internal Style Sheet
문서 <head> 태그 내부에서 <style> 태그를 사용해 CSS를 작성하는 방식
- 장점 : 한 문서 내에서 여러 요소를 스타일링 가능
- 단점 : 여러 문서에서 공유하기 어려움
<style>
body {
....
}
</style>External Style Sheet
외부의 .CSS 파일을 작성해 HTML 문서에서 <link> 태그로 연결
- 장점 : 스타일 재사용성 높음, 유지보수 용이
- 단점 : 파일이 분리되어 있어 초보자에게 복잡
# style.css
body {
...
}
h1 {
...
}# example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page name</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>페이지 내용</p>
</body>
</html>
🍀 ٩(ˊᗜˋ*)و 🍀