목차
기본태그
hn 태그
제목 표시하기
① 제목 텍스트 크고 진하게 표시됨
② 제목 크기에 따라 <h1>~<h6> 태그까지 사용가능. <h1>이 가장 크게 표시 <h6>이 가장 작게 표시
③ HTML 특성상 space바를 여러 번 입력해도 공백 한 칸으로 인식하므로 특수기호를 사용하여 공백 추가
<p> 태그
단락 만들기
① 텍스트 표시할 때 가장 많이 사용하는 태그
② 텍스트 단락을 만들어 주는 태그, 단락이란 앞 뒤에 줄 바꿈이 있는 텍스트 덩어리를 의미
③ </p> 태그를 만날 때까지 텍스트를 한 줄로 표시하고 브라우저 사이즈에 따라 자동 줄바꿈
<br> 태그
줄 바꾸기
① 텍스트 단락에 엔터(Enter)값을 입력해도 웹브라우저에서는 한 줄로 표시되기 때문에 줄 바꿀 때 <br> 사용
<hr> 태그
수평 줄 넣기
① 텍스트 단락의 주제가 바뀌거나 분위기 전환용으로 사용되며 기본 가로줄 표출
② 표출되는 기본 가로줄은 CSS로 삭제 가능
<blackquote> 태그
인용문 넣기
① 다른 블로그나 사이트의 글을 인용할 경우 사용
② <blackquote> 사용한 단락은 다른 텍스트보다 들여쓰기 되어 다른 단락들과 구별 가능
③ 인용한 사이트의 주소가 명확할 경우 cite 속성을 이용해 주소 표시 가능
<pre> 태그
입력하는 그대로 화면에 표시하기
① <pre> 태그 사용 시 소스에 표시한 공백이 브라우저에 그대로 표시
② <code>, <samp>, <kdb> 태그를 사용해 소스 코드 원본을 표출 할 때 사용
※ <pre> 태그와 웹 접근성 : 웹 문서를 소리로 읽어주는 기계나 점자로 표시해주는 기계는 <pre> 태그를
건너뛰기 때문에 <pre> 태그에 대체 텍스트 추가 권장
텍스트 꾸밈 태그
<strong>, <b> 태그
굵게 표시하기
① 경고나 주의사항처럼 중요한 내용은 <strong> 사용
② 키워드처럼 단순한 강조는 <b> 사용
<em>, <i> 태그
이탤릭체로 표시하기
① 문장 흐름상 특정 부분을 강조할 때 <em> 사용, 즉 중요한 내용을 이탤릭체로 표시할 때 사용
② 마음 속 생각, 꿈, 기술적 용어, 관용구 등 단순 이탤릭체로 표시하고 싶을 때 <i> 사용
<q> 태그
인용 내용 표시하기
① 인용한 내용을 표시하기 위한 태그
② <blackquote> 태그와 차이점 :
· <blackquote> 태그는 블록 레벨의 태그로 다른 단락과 줄 바꿈 및 들여쓰기 발생
· <q> 태그는 인라인 레벨 태그로 줄 바꿈 없이 다른 내용과 함께 한 줄로 표시하고 다른 내용과
구별하기 위해 인용내용에 따옴표를 붙여 표시
<mark> 태그
형광펜 효과 내기
① <mark>~</mark> 태그로 감싼 부분의 배경색이 노란색이 되고 형광펜으로 그어 놓은 듯한 효과
② HTML4에서는 형광펜효과를 CSS나 스타일 시트로 적용했지만 HTML5에서는 <mark> 태그로 표시
<span> 태그
줄바꿈 없이 영역 묶기
① <span> 태그 자체로는 아무 의미가 없지만 단락 안의 텍스트중 일부 영역만 스타일을 적용할 때 사용
<ruby> 태그
동아시아 글자 표시하기
① 주로 동아시아 국가들의 글자들에 주석을 함께 표기하기 위한 용도로 사용
② 주석으로 표시할 내용은 <ruby> 태그 안에 <rt> 태그로 표시
기타 태그
<abbr> : 약자 표시. Title속성을 함께 사용할 수 있음
<cite> : 웹 문서나 포스트에서 참고 내용 표시
<code> : 컴퓨터 인식을 위한 소스 코드
<kdb> : 키보드 입력이나 음성 명령같은 사용자 입력 내용
<small> : 부가 정보처럼 작게 표시해도 되는 텍스트
<sub> : 아래 첨자
<sup> : 위 첨자
<s> : 취소선
<u> : 밑줄