📄 HTML
목록
- HTML 기본 구조
- HTML 태그의 기본 구조
- 중요 HTML 태그들
- 텍스트 관련
- 제목 태그 <h1>~<h6>
- 문단 <p>
- 텍스트의 일부를 감쌀 때 <span>
- 굵은 글씨체 <strong>, <b>
- 기울임 글씨체 <em>, <i>
- 링크와 이미지
- 하이퍼링크 <a>
- 이미지 표시 <img> : 닫는 태그 없음
- src : 이미지 파일 경로
- alt : 이미지 대체 텍스트(이미지가 로드되지 않을 경우)
- 목록 <li></li>
- 순서 없는 목록 <ul></ul
- 순서 있는 목록 <ol></ol>
- 테이블 <table>, <tr>, <td>, <th>
- 텍스트 관련
- 폼(Form) 태그
- 미디어
- 비디오
- 오디오
- HTML 속성
- 시맨틱 태그
- 주석
- HTML 문법 규칙
- 반응형 웹을 위한 메타 태그
🌹 HTML 기본 구조
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>HTML 문서를 작성하는 기본 구조입니다.</p>
</body>
</html>
주요 요소:
- <!DOCTYPE html>: HTML5 문서를 선언하는 코드로, 문서가 HTML5를 사용함을 나타냄.
- <html>: HTML 문서의 루트 요소.
- <head>: 메타데이터(문서 정보, 스타일시트, 스크립트 등)를 포함.
- <meta charset="UTF-8">: UTF-8 문자 인코딩 설정(한글, 특수문자 지원).
- <body>: 화면에 보이는 실제 콘텐츠를 포함.
🌹 HTML 태그의 기본 구조
더보기
- 태그(tag): <태그이름>내용</태그이름>
- 예: <p>이것은 문단입니다.</p>
- 속성(attribute): 태그에 추가 정보를 제공.
<a href="https://www.google.com">구글로 이동</a>🌹 중요 HTML 태그들
📙 텍스트 관련 태그
▼ 제목
더보기
<h1> ~ <h6>
: 제목 태그. 숫자가 작을수록 큰 제목
<h1>제목 1</h1>
<h2>제목 2</h2>▼ 문단
더보기
<p>
: 문단
<p>여기에 문단 내용을 작성합니다.</p>▼ 텍스트의 일부를 감쌀 때
더보기
<span>
: 텍스트의 일부를 감쌀 때 사용
<p>이 문장에서 <span style="color: red;">특정 부분</span>만 강조.</p>▼ 굵은 글씨
더보기
<strong>, <b>
: 텍스트를 굵게 표시
<strong>중요한 내용</strong>▼ 텍스트 기울임
더보기
<em>, <i>
: 텍스트를 기울임
<em>강조된 내용</em>▼ 링크와 이미지
더보기
<a>
: 하이퍼링크를 생성
<a href="https://www.example.com">이곳으로 이동</a>
<img>
: 이미지를 표시 (닫는 태그가 없는 빈 태그)
<img src="이미지주소.jpg" alt="이미지 설명">
- src: 이미지 파일 경로.
- alt: 이미지 대체 텍스트(이미지가 로드되지 않을 경우 표시).
▼ 목록
더보기
순서 없는 목록
<ul> - unordered list)과 항목 (<li> - list item):
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
순서 있는 목록
<ol> - ordered list):
<ol>
<li>첫 번째</li>
<li>두 번째</li>
</ol>▼ 테이블
더보기
<table>, <tr>, <td>, <th> 등을 사용
<table border="1">
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>홍길동</td>
<td>25</td>
</tr>
</table>🌹 폼(Form) 태그
폼은 사용자 입력을 받을 때 사용:
더보기
<form action="/submit" method="POST">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
<input type="submit" value="제출">
</form>주요 태그:
- <form>: 폼 요소의 컨테이너. action과 method 속성 필수.
- <input>: 사용자 입력 필드.
- <label>: 입력 필드와 관련된 텍스트.
- <textarea>: 여러 줄 입력.
- <button>: 버튼 생성.
🌹 미디어
▼ 비디오
더보기
<video controls>
<source src="video.mp4" type="video/mp4">
동영상 재생이 지원되지 않습니다.
</video>▼ 오디오
더보기
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
오디오 재생이 지원되지 않습니다.
</audio>🌹 HTML 속성
📙 공통 속성
▼ id
더보기
id
: 요소의 고유 식별자
<p id="intro">여기는 소개 문구입니다.</p>▼ class
더보기
class
: 여러 요소를 그룹화
<p class="highlight">강조된 내용</p>▼ style
더보기
style
: 인라인 스타일 지정
<p style="color: blue; font-size: 16px;">파란 텍스트</p>▼ title
더보기
title
: 요소에 마우스를 올리면 표시될 설명
<p title="힌트">이 문장은 힌트가 있습니다.</p>🌹 시맨틱 태그
HTML5에서 추가된 태그로, 문서 구조를 더 명확하게 정의.
- <header>: 페이지나 섹션의 머리글.
- <nav>: 내비게이션 링크를 포함.
- <section>: 문서의 구획.
- <article>: 독립적인 콘텐츠 블록.
- <footer>: 페이지나 섹션의 바닥글.
🌹 주석
HTML 코드에서 주석을 추가하려면 <!-- -->를 사용
<!-- 이 코드는 주석으로 처리됨. -->🌹 HTML 문법 규칙
1. 태그는 반드시 열고 닫아야 함
<p>문단입니다.</p>
2. 속성 값은 따옴표("")로 감싸야함
<a href="https://www.example.com">링크</a>
3. 중첩 태그는 순서를 지켜야 함
<div>
<p>내용</p>
</div>🌹 반응형 웹을 위한 메타 태그
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 반응형 웹 디자인을 위해 필수적인 설정임
- 웹페이지가 다양한 기기와 화면 크기에서 적절히 보이도록 설정함
- 특히, 모바일과 데스크톱에서 화면을 최적화하는 데 중요한 역할을 함
📙 이 태그의 의미
- name="viewport":
- viewport는 브라우저의 가상 창을 의미함.
- 특히 모바일 기기의 화면 크기와 밀접하게 연관됨
- 이 속성은 브라우저가 웹페이지를 렌더링 할 때 뷰포트를 어떻게 설정해야 하는지 지시함
- viewport는 브라우저의 가상 창을 의미함.
- content="width=device-width":
- 뷰포트의 너비를 기기 화면의 너비와 동일하게 설정함
- 예를 들어,
- 스마트폰 화면의 너비가 375px이라면 뷰포트도 375px로 설정됨
- initial-scale=1.0:
- 페이지의 초기 확대/축소 배율을 설정함
- 1.0은 기본 줌 수준(100%)으로, 화면의 모든 콘텐츠가 자연스러운 크기로 보이게 함
- 이 설정이 없으면 모바일 브라우저는 콘텐츠를 화면 너비에 맞추기 위해 과도하게 축소하거나 확대할 수 있음
📙 왜 필요할까?
기본적으로 많은 브라우저(특히 모바일)는 데스크톱 웹사이트를 화면에 맞추기 위해 축소해서 표시하려고 함
이로 인해 다음과 같은 문제가 발생할 수 있음:
- 콘텐츠가 너무 작아져서 읽기 어려움.
- 버튼이나 클릭 가능한 영역이 너무 작아져 사용자 경험 악화.
<meta name="viewport">를 사용하면 브라우저가 기기의 실제 화면 크기를 기준으로 콘텐츠를 표시하게 되어,
반응형 웹 디자인이 제대로 작동함
📙 추가 설정 옵션
content 속성에 다양한 설정을 추가할 수 있음
maximum-scale=1.0:
사용자가 페이지를 확대하지 못하도록 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
user-scalable=no:
사용자가 화면을 확대/축소하지 못하도록 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
minimum-scale=0.5:
사용자가 페이지를 최소 50%까지 축소할 수 있도록 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5">
📙 예제: 반응형 디자인 적용
반응형 웹을 만들기 위해 메타 태그를 포함한 HTML 코드 예제
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹페이지</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1rem;
}
main {
padding: 1rem;
}
.box {
background-color: lightblue;
margin: 1rem 0;
padding: 1rem;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>반응형 웹페이지</h1>
</header>
<main>
<div class="box">화면 크기에 따라 요소가 조정됩니다.</div>
</main>
</body>
</html>