html 텍스트 태그
html 태그의 주요 범위
<!DOCTYPE html>
HTML5로 작성되고 있음을 명시하므로 상단에 적어줄 것
<html lang = "ko">
검색 엔진이 웹 페이지를 탐색할 때 해당 웹 페이지가 어떤 언어로 만들어져 있는지 인식
<HEAD></HEAD>
태그의 기본적인 정보를 표시함
<BODY></BODY>
HTML 문서의 구조를 설정
html 메타데이터
메타데이터
문서 작성자나 문서 요약과 같이 문서를 설명하는 데이터
<title>
브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목을 설정
<link/>
외부 리소스의 연결 및 현재 문서와의 관계를 명시. (HTML, CSS, ICON 등 가져오기)
<meta/>
기타 메타데이터 요소로 나타낼 수 없는 메타데이터를 나타내기 위해 설정
(검색엔진이나 브라우저에 정보 제공)
<style>
스타일 정보(CSS)를 설정
html 텍스트 태그
<h1></h1> ~ <h6></h6>
html의 가장 기본적인 태그
글 제목을 표현함
<h1> 태그의 글 제목 크기가 가장 크고, <h6> 태그의 글 제목 크기가 가장 작음
*h1부터 h6까지의 태그는 html이므로 구조를 나타내는 용도로만 사용. 대주제부터 소주제까지의 목차의 순서를 나타내기 위한 것이지 글자의 크기를 나타내기 위함이 아님
<br>
줄바꿈 하는데 사용
<hr>
대부분 수평선으로 표시됨
문단의 분리(주제에 의한)를 위해 설정
<div></div>
구조의 틀을 만들어주는 태그
가장 큰 틀을 묶어 주는 태그
<p></p>
단락을 만드는데 사용
가장 작은 단위의 묶음
각 단락 다음에는 빈 줄이 자동으로 생성됨
*<div>태그와 <p>태그의 차이
·<p>: 문장의 단락을 표시, 다음의 단락과 구분하기 위해 한 줄을 강제로 비움, <p>태그 안에 다시 <p>태그를 사용할 수 없음
·<div>: 경계를 분할함, 영역을 나눔, 어떤 영역을 블록 단위로 정의, <div>태그 안에 또 <div>태그 사용 가능
<span></span>
내용 중 일부를 감싸는 태그
<b></b>
문체가 다른 글자의 범위를 설정
기본적으로 글자가 두껍게 사용됨
<strong></strong>
중대하거나 긴급한 콘텐츠를 표시
보통 브라우저는 굵은 글씨로 표시함
정보통신보조기기 등에서 구두 강조로 발음됨
*<b>태그와 <strong>태그의 차이
화면에 나타나는 표시는 동일함
·<strong>: 매우 심각하거나 긴급한 것(예: 경고)을 포함하여 '매우 중요'한 콘텐츠를 위한 것
·<b>: 키워드, 리뷰의 제품명 등 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분
<i></i>
텍스트에서 어떤 이유로 주위와 구분해야 하는 부분
기울임꼴로 표시
<em></em>
단순한 의미 강조를 표시
기본적으로 이탤릭체로 표시됨
정보통신보조기기 등에서 구두 강조로 발음됨
<strong>보다 약한 강조
*<i>태그와 <em>태그의 차이
화면에 나타나는 표시는 동일함
·<em>: 콘텐츠를 강조
·<i>: 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용
<ul><ol><li>
<ol>과 <ul>은 자식으로 <li>만 포함 가능
<li>는 단독으로 사용할 수 없으며 <ol>이나 <ul>에 자식으로 포함되어야 함
정렬된 목록 <ol>의 항목 순서는 중요도를 의미할 수 있음
·<ul></ul>
순서가 필요 없는 항목
·<ol></ol>
정렬된 목록을 나타냄
보통 숫자 목록으로 표현
<dl><dt><dd>
정의형 목록 태그라고 함
용어(<dt>)와 정의(<dd>) 쌍들의 영역(<dl>)을 설정
<dl>은 <dd>,<dt>만을 포함해야 함