문단 관련 요소는 동일한 태그를 연속으로 사용할 경우 각 태그가 문단을 구성하며 태그와 태그 사이에 문단을 구분하기 위한 여백이 형성됩니다. 이와 다르게 문장 관련 요소는 같은 태그를 연속으로 사용하더라도 문단이 구성되지 않으며 한 문장에 포함됩니다.

#01. 단어나 문장 강조하기

1) 글자의 모양, 색상, 크기

<font [face="글꼴이름"] [color="색상값"] [size="크기"]> ... 내용 ... </font>

글꼴

내 컴퓨터에 설치되어 있는 글꼴이 접속자에게 없다면 운영체제의 기본 글꼴로 표시된다.

색상값

#RRBBGG 형식의 16진수 모음을 사용하거나 rgb(red, green, blue) 형태를 사용한다.

RR, GG, BB : 00~ff의 16진수 숫자값 (00=어두움, ff=밝음)
red,green,blue : 0~255 사이의 숫자값 (0=어두움, 255=밝음)

구글에서 color picker 검색 후 나타나는 도구 사용 가능

2) 단어, 문장 강조하기

형광팬 강조 효과

<mark> ... 내용 ... </mark>

내용을 굵게 표시하기

<strong>내용</strong>

혹은

<b>내용</b>

밑줄 표시

<u>내용</u>

기울임꼴 표시하기

<i>내용</i>

굵게 + 밑줄

<strong><i>내용</i></strong>
<b><i>내용</i></b>
<i><strong>내용</strong></i>
<i><b>내용</b></i>

밑줄 + 기울임

<u>><i>내용</i></u>
<i><u>내용</u></i>

그 밖의 다양한 조합으로 사용 가능함.

CSS를 적용하기 위한 영역 지정

<span> ... 내용 ... </span>

이 태그는 HTML 코드 자체만으로는 아무런 기능이 없다.

추후 공부할 CSS(디자인코드)가 적용되기 위한 영역을 구성하기 위해 사용한다.

#02. 페이지 이동처리 (링크)

1) 링크 기본

<a href="파일이름 혹은 사이트 주소" [target="_blank"]> ... 내용 ... </a>

target 속성을 적용할 경우 새창(새탭)으로 표시됨.

같은 사이트 내의 파일을 지정할 경우는 상대경로, 절대경로 사용 가능.

웹에서의 절대경로는 http://부터 시작되는 온라인 상의 주소를 의미

다른 사이트 주소를 명시할 경우 절대경로 형식만 가능함.

2) 스크롤 이동하기

href 속성에 #을 지정한 경우 현제 페이지의 맨 위로 스크롤 이동

href 속성에 #id값을 지정한 경우 해당 id값을 갖고 있는 HTML태그의 위치로 스크롤 이동

3) 데이터 링크

이메일 보내기

<a href="mailto:이메일주소"> ... 내용 ... </a>

전화걸기(스마트폰 전용)

<a href="tel:전화번호"> ... 내용 ... </a>

#03. 주소, 연락처, 카피라이트 표시

<address> ... 내용 ... </address>

이 태그 안에는 지금까지 학습한 모든 종류의 HTML 태그를 포함시킬 수 있다.

#04. 주의사항

문단 안에 단어나 문장이 포함되어야 한다.
반대의 경우는 성립할 수 없다.
<font>, <a>, <strong>, <b>, <u>, <i>, <span>은
<div>, <p>, <ul>, <ol>, <li>, <h1>~<h6>, <table>계열을 포함할 수 없다.

호쌤코딩클럽

[HTML] 문장 관련 요소