HTML 기본 구조
<!DOCTYPE html> : HTML5를 사용하고 있음을 명시. 문서의 첫 번째 줄에 위치
<html lang="ko"> : 모든 HTML요소를 감싸는 최상위 요소. lang속성으로 문서의 언어를 설정할 수 있음
<head> : 메타데이터를 포함하며, 웹 페이지의 제목, 문자 인코딩, 외부 스타일 시트 등 설정
<meta charset="UTF-8"> : 문서의 문자 인코딩 방식을 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : 뷰포트를 설정하여 모바일 기기에서도 적절히 표시되도록 함
<title> : 웹 페이지의 제목 설정. 브라우저의 제목 표시줄이나 탭에 표시됨
<link rel="stylesheet" href="style.css"> : 외부 스타일 시트 연결. href속성으로 스타일 시트 파일의 경로 지정
<style> : 내부 스타일 시트를 정의. CSS 코드를 직접 포함할 수 있음
텍스트 관련 요소
제목 요소
<h1>~<h6> : 제목을 표시하는 데 사용. <h1>은 가장 중요한 제목, <h6>은 가장 덜 중요한 제목을 나타냄. ID와 클래스 속성을 통해 스타일을 적용할 수 있음
문단 요소
<p> : 문단을 나타냄. 여러 문장으로 구성된 텍스트를 담을 때 사용. 자동으로 여백이 주어져 문단 구분
범용 요소
<div> : 블록 레벨 요소, 한 줄 전체를 차지함. 웹 페이지의 레이아웃을 잡거나 스타일을 적용할 때 자주 사용됨
<span> : 인라인 요소, 한 줄에 여러 개 위치 가능. 텍스트의 일부를 스타일링하거나 특정 부분을 감싸는 데 사용됨
리스트 요소
순서 없는 리스트
<ul> : 순서 없는 리스트를 나타냄. 항목들은 일반적으로 불릿 포인트로 표시됨
<li> : 리스트 항목을 나타냄. <ul>또는 <ol>요소 내에서 사용됨
순서 있는 리스트
<ol> : 순서 있는 리스트를 나타냄. 항목들은 번호로 표시됨
이미지 요소
<img src="경로" alt="설명" width="너비"> : 이미지 삽입. src속성으로 이미지 파일의 경로를, alt속성으로 이미지 설명을, width 속성으로 이미지의 너비를 설정
폼 요소
입력 요소
<form> : 사용자 입력을 받아 서버로 전송하는 폼 정의. 폼 내에서 여러 입력 요소를 사용할 수 있음
<input type="text" placeholder="텍스트를 입력하세요"> : 텍스트 입력 필드 생성. placeholder속성으로 입력란에 힌트 표시 가능
<input type="radio name=" "> : 라디오 버튼 생성. 같은 <name>을 가진 요소 중 하나만 선택 가능
<input type="checkbox name=" " value="value"> : 체크박스 생성. 여러 개의 체크박스를 선택할 수 있음
<input type="number" placeholder="숫자 입력" min="0" max="100"> : 숫자 입력 필드 생성. min과 max속성으로 입력 가능한 범위를 설정할 수 있음
<input type="password" placeholder="비밀번호"> : 비밀번호 입력 필드 생성
<input type="email" placeholder="exam@ple.com"> : 이메일 입력 필드 생성
기타 입력 요소
<input type="time"> : 시간 입력 필드 생성
<input type="date"> : 날짜 입력 필드 생성
<input type="color"> : 색상 선택 필드 생성
<input type="file" multiple> : 파일 선택 필드 생성. multiple속성으로 여러 파일 선택 가능
<input type="file" accept="image/*"> : 이미지 파일만 선택할 수 있는 파일 선택 필드 생성
<button type="submit"> : 폼을 제출하는 버튼 생성
<button type="reset"> : 폼을 초기화하는 버튼 생성
<button type="button"> : 단순 버튼 생성
하이퍼링크 요소
<a href="URL> : 다른 페이지나 리소스로 이동하는 링크 생성 href속성으로 링크 대상의 URL을 지정
의미론적 요소
주요 구조 요소 (시맨틱)
<header> : 페이지의 머리말 정의
<nav> : 내비게이션 링크 포함. 다른 페이지로 이동하는 링크들을 그룹화
<article> : 독립적으로 구분될 수 있는 콘텐츠를 담음
<section> : 관련된 콘텐츠를 그룹화
<aside> : 페이지의 부가 정보를 담음
<footer> : 페이지의 바닥글 정의
미디어 요소
오디오 요소
<audio controls> : 오디오 파일 삽입하고 재생 컨트롤 제공. <source>요소로 오디오 파일의 경로 지정
비디오 요소
<video controls width="250"> : 비디오 파일을 삽입하고 재생 컨트롤 제공. width속성으로 비디오의 너비를 설정할 수 있음 <source>요소로 비디오 파일의 경로 지정
임베디드 콘텐츠
<iframe width="560" height="315" src="URL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> : 다른 웹 페이지나 콘텐츠를 현재 페이지에 삽입. src속성으로 임베디드할 콘텐츠의 URL을 지정. width와 height속성으로 프레임의 크기를 설정할 수 있음 allowfullscreen속성으로 전체 화면 허용
'FE > HTML & CSS' 카테고리의 다른 글
| HTML | 시맨틱 마크업 (Semantic Markup) (0) | 2024.10.09 |
|---|---|
| HTML | HTML에 대하여 (2) | 2024.10.09 |
| CSS | CSS를 적용하는 방법 및 우선순위 (0) | 2024.09.26 |