[HTML] HTML5 문서의 기본

노은서·2024년 10월 25일

📌 2장. HTML5 문서의 기본

✅ 기본 문서 만들기

🏷️ HTML 요소와 속성

HTML

: 웹을 위한 하이퍼텍스트 문서 작성 언어
태그 종류 : 시작 태그, 종료태그, 단독태그
** 단독태그는 / 슬래시를 안 넣어도 됨

ex) 단독 태그 <br/> <hr/> --> <br> <hr> 로 사용 가능 
⭐ <br> 태그 : 한 줄 띄워주는 태그
⭐ <hr> 태그 : 세로줄 그어주는 태그

속성

: 요소에 추가정보를 주기 위해서 사용

📢 구조

요소의 시작태그 내에 나타남

이름 = "속성값" or 이름 = '속성값'

하나의 요소에 여러 개의 속성 가능, 빈 칸으로 구분

🏷️ HTML 문서의 기본 구조

<head>와 <body> 로 구성, <body>에 원하는 요소를 넣음

head 요소

✔️ title 요소
: 문서 제목
✔️ meta 요소
: 문서 관리를 위한 메타 정보를 기록
--> 문서 정보, 키워드, 저자 정보, 언어, 인코딩 정보
--> 웹 브라우저나 검색 엔진 같은 외부 도구들이 HTML 문서를 분석하고 처리할 때 유용하게 사용할 수 있는 정보를 담고 있음.

기타 문서 구성

⭐ & nbsp 태그 : 공백을 의미하는 태그
설명문 : < !-- 설명문을 작성하는 태그 -- >

✅ 단락과 텍스트 꾸미기

🏷️ 단락의 제목과 줄

✔️ 제목 : <h1> ~ <h6> 요소
--> 갈수록 글씨 크기가 줄어든다. 보통 h1~h3 많이 사용

✔️ 단락 : <p> 요소
--> HTML 문서에서 가장 기본적인 구성, 줄 간격을 띄움
--> 한 단락이 끝나면 다음 단락과 시각적으로 구분되도록 줄이 바뀌고 추가적인 여백이 들어갑니다.

✔️ 줄 바꿈 : <br> 요소
--> 단락 내에서 줄만 바꾸고자 할 때, 단독 태그 형태
--> p 태그와 달리 줄 사이에 여백이 없음

🏷️ 단락 꾸미기

✔️ 가로줄 : <hr> 요소
--> 문단 간 혹은 내용 사이에 세로줄을 넣어 구분을 하고자 할때

✔️ 작성된 형식 유지 : <pre> 요소
--> 화면에 입력한 상태 그대로 보이고자 할때,
--> 공백문자 : 빈칸, 탭, 줄바꿈이 그대로 들어감

✔️ 단락 인용 : <blockquote> 요소
--> 다른 글의 내용을 단락 단위로 인용하여 포함시킬 때
--> 들여쓰기로 구분해서 표시

🏷️ 다양한 텍스트 표현

= 텍스트 일부의 성격이나 의미를 지정하고자 하는 경우
✔️ 텍스트 강조 : <em> 요소
--> 기울여 표시
✔️ 강한 강조 : <strong> 요소
--> 진하게 표시
✔️ 작은 글자 : <small> 요소
--> 약간 작은 글씨로 표시
✔️ 하이라이트 효과 : <mark> 요소
--> 텍스트를 눈에 띄도록 마킹, 형광펜 표시
✔️ 첨자 : <sub>,<sup>

✅ 목록 및 표 작성하기

🏷️ 목록 나열하기

✔️ 순서 없는 목록 : <ul> 요소
--> 나열된 항목에는 하위 요소인 <li> 태그를 사용

ex) <ul type = "circle"> : 글머리 기호를 동그랗게 바꿔줌

✔️ 순서 있는 목록 : <ol> 요소
--> 각 항목 앞에는 순서를 나타내는 숫자 혹은 기호를 나타냄

--> 순서 타입을 변경할 수 있음!!
ex) <ol type = "A"> : 순서타입을 A,B,C,,로 변경

<h1>내 버켓리스트</h1>
    <ol type="A">
        <li>해외여행</li>
        <li>집사기</li>
        <li>100억 벌기</li>
    </ol>

🖥️ 예제 : 목록 나열하기

🏷️ 표의 기본 구성

✔️ 표의 구성
: 행 => 열 만큼 셀

✔️ 표의 구성 요소 : <table>, <tr>, <th>, <td>

<tr> 태그 : 하나의 행
<td> 태그 : 각 셀의 데이터
<th> 태그 : 제목, 중앙에 굵은 글씨
* table>tr2>td*3 을 하면 행2개 열3개의 테이블 표가 구성됨

🖥️ 예제 : 기본적인 표의 표현

표의 모양은 스타일시트(CSS) 이용 --> 테두리, 굵기, 색상 등
<table border = "1"> : 표 테두리가 생김

🏷️ 표의 구조적 표현

✔️ 셀 합치기 : rowspan, colspan
--> <td> 요소에서 rowspan, colspan 속성 사용

rowspan 속성 : 행을 병합, 위아래 줄을 합침
ex) <td rowspan = "3"> </td> --> 3개의 행을 합침
colspan 속성 : 열을 병함, 양옆칸 줄을 합침
<td colspan = "3"> </td>--> 3개의 열을 합침

✅ 문서 구조화하기(⭐⭐)

🏷️ 문서 구조화 요소

= 머리말, 꼬리말, 탐색 메뉴, 본문, 본문의 섹션, 옆줄 등 웹문서의 의미적인 구조
ex) <header>, <footer>, <nav>, <article>, <section>, <aside>

✔️ 머리말 : <header> 요소
--> 웹 문서에서 머리말 영역, 제목이나 소개 등

✔️ 탐색 메뉴 : <nav> 요소
--> 다른 웹문서나 문서 내의 다른 부분으로 이동하는 링크

✔️ 독립된 본문 : <article> 요소
--> 웹문서에서 주요 내용을 가진 독립된 본문을 나타냄

--> 여러 개의 <article> 요소 가능
--> 별도의 제목, header, footer 여러 개 section 요소 포함

✔️ 문서내 섹션 그룹 : <section> 요소
--> 문서 내에서 절 단위 구분, 의미가 비슷한 그룹

✔️ 부수 정보 : <aside> 요소
--> 본문의 내용과 구별되는 별개의 정보를 표현

✔️ 꼬리말 : <footer> 요소
--> 웹 문서의 꼬리말에 해당하는 저자 정보, 저작권 정보, 이용조건, 관련 링크 등