1. <a> 태그 - 링크 만들기

 

텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 됩니다.

 

<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>

<a href="링크할 주소" [속성="속성 값"]><img src="이미지 파일 경로"> </a>


<a> 태그 안에서 사용할 수 있는 주요 속성은 다음과 같습니다.


 속성

설명 

href

링크한 문서나 사이트의 주소를 입력한다. 

target

링크한 내용이 표시될 위치(현재 탭 또는 새 탭)를 지정한다.

download

링크한 문서를 다운로드한다.

rel

현재 문서와 링크한 문서의 관계를 알려준다.

hreflang

링크한 문서의 언어를 지정한다.

type

링크한 문서의 파일 유형을 알려준다.


<a> 태그의 주요 속성 중 target 속성을 사용하면 현재 화면 뿐만 아니라 새로운 화면에서도 링크를 열 수 있는데 target 속성에서 사용할 수 있는 값은 다음과 같습니다.


 속성 값

설명 

_blank 

링크 내용이 새 탭에서 열린다. 

_self

target 속성의 기본 값으로 현재 탭에서 열린다. 

_parent 

프레임을 사용 했을 때 링크 내용을 부모 프레임에 표시한다. 

_top 

프레임을 사용 했을 때 프레임에서 벗어나 링크 내용을 전체 화면에 표시한다. 



2. 앵커 기능


웹 문섯가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 '앵커(anchor)'라고 합니다.


<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>

<a href="#앵커 이름"> 텍스트 또는 이미지 </a>


앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 사용해 앵커를 만들고 각각 다른 이름을 지정합니다. 그리고 <a> 태그의 href 속성을 사용해 링크합니다. 단, 앵커 이름 앞에 #을 붙여 앵커를 표시합니다.


<ul id="menu">
        <li><a href="#content1">메뉴1</a></li>
        <li><a href="#content2">메뉴2</a></li>
        <li><a href="#content3">메뉴3</a></li>
    </ul>
    <h2 id="content1">내용1</h2>
    <p>웹 문서가 너무 길 경우 … 합니다. </p>
    <p><a href="#menu">[메뉴로]</a></p>
    <h2 id="content2">내용2</h2>
    <p>웹 문서가 너무 길 경우 … 합니다. </p>
    <p><a href="#menu">[메뉴로]</a></p>
    <h2 id="content3">내용3</h2>
    <p>웹 문서가 너무 길 경우 … 합니다. </p>
    <p><a href="#menu">[메뉴로]</a></p>



3. <map> 태그, <area> 태그, usemap 속성 - 이미지 맵 지정


하나의 이미지에 여러 개의 링크를 만드는 것을 '이미지 맵'이라고 합니다.


<map name="맵 이름">

     <area>

     <area>

     … …

</map>


<img src="이미지 파일" usemap="#맵 이름">


이미지 맵으로 사용할 이미지에 영역을 표시할 때는 <area> 태그를 사용하는 데 <area> 태그에서 사용할 수 있는 속성은 다음과 같습니다.


속성 

설명 

alt 

대체 텍스트를 지정한다. 

coords 

링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정한다. 

download 

링크 문서를 다운로드한다. 

href 

링크 문서나 사이트의 경로를 지정한다.

media 

링크 문서나 사이트를 어떤 미디어에 최적화시킬지 정한다. 

rel 

현재 문서와 링크 문서 사이의 관계를 지정한다.

속성 값

lternate, bookmark, helf, license, next, nofollow, noreferer, prefetch, prev, search, tag

shape

링크로 사용할 영역의 형태를 지정한다. 

 default, rect, circle, poly

target

링크를 표시할 대상을 지정한다. 

_blank, _parent, _self, _top, 프레임 이름 

type 

링크 문서의 미디어 유형을 지정한다. 





<출처> Do it! HTML5+CSS3 웹 표준의 정석


저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] <input> 태그  (0) 2017.03.24
[HTML 입문] 폼을 만드는 기본적인 태그  (0) 2017.03.23
[HTML 입문] 이미지 관련 태그  (0) 2017.03.22
[HTML 입문] 텍스트 관련 태그 ②  (0) 2017.03.21
[HTML 입문] 텍스트 관련 태그 ①  (0) 2017.03.20


1. <img> 태그 - 이미지 삽입


<img src="경로" [속성="값"]>


ⓛ src 속성 - 이미지 파일 경로


- 하위 폴더를 나타낼 때는 '/' 기호를 사용합니다.

- 상위 폴더를 나타낼 때는 '..' 기호를 사용합니다.


② alt 속성 - 이미지를 설명해 주는 대체 텍스트


<img src="home.jpg" alt="홈으로 가기">


alt 속성의 텍스트를 화면 낭독기가 시각장애인에게 읽어 줄 수 있고 이미지를 제대로 표시할 수 없는 상황에서 이미지 자리에 alt 속성에 쓴 내용이 표시되어 어떤 이미지가 사용되었는 지 짐작할 수 있습니다.


③ width, height 속성 - 이미지 크기 조절


<h1>사려니 숲길</h1>
    <img src="images/road.jpg" alt="사려니 숲길">
    <img src="images/road.jpg" width="250" height="90" alt="사려니 숲길">


width 속성과 height 속성을 사용하지 않으면 원본 이미지 크기 그대로 브라우저 화면에 표시됩니다. 웹 서버에서 다운로드하는 이미지 파일의 용량은 그대로 두면서 이미지의 크기를 조절할 수 있습니다.



2. <figure>, <figcaption> 태그 - 이미지에 캡션 달기


<figure>
        <img src="images/oreum-1.jpg" alt="용눈이 오름">
        <figcaption>완만하고 부드러운 용눈이 오름</figcaption>
    </figure>

<figure> 태그로 캡션을 달 대상을 묶고 캡션은 <figcaption> 태그로 묶습니다.





<출처> Do it! HTML5+CSS3 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 폼을 만드는 기본적인 태그  (0) 2017.03.23
[HTML 입문] 링크 관련 태그  (0) 2017.03.22
[HTML 입문] 텍스트 관련 태그 ②  (0) 2017.03.21
[HTML 입문] 텍스트 관련 태그 ①  (0) 2017.03.20
[HTML 입문] 웹 문서에서 특수 기호 사용하기  (0) 2017.03.20

목록과 관련된 태그



1. <ul> 태그, <li> 태그 - 순서 없는 목록


<ul>

    <li> 텍스트 </li>

    <li> 텍스트 </li>

    …

</ul>


각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet>이 붙습니다. CSS의 list-style-type 속성을 이용해 불릿을 수정 할 수 있습니다.



2. <ol> 태그, <li> 태그 - 순서 있는 목록


<ol>

    <li> 텍스트 </li>

    <li> 텍스트 </li>

    …

</ol>


<ol> 태그에는 순서와 관련된 몇 가지 속성이 있습니다.

- type 속성 : 숫자의 종류를 다양하게 조절할 수 있다. 

속성 값 

설명 

1 

숫자(기본값> 

A 

영문 대문자 

a 

영문 소문자 

i 

로마숫자 소문자 

I 

로마숫자 대문자 

- start 속성 : 중간 번호부터 시작할 수 있다.

- reserved 속성 - 역순으로 표시한다.


- 여러 항목이 나열될 때 </li> 태그를 생략해도 됩니다.



3. <dl>, <dt>, <dd> 태그 - 설명 목록


<dl>

     <dt> 제목 </dt>

     <dd> 설명 </dd>

      …

</dl>



표와 관련된 태그







1. <table> 태그 - 표 전체 윤곽

기본적으로 표는 테두리 없이 표시되고 셀 구분을 쉽게 하려면 <table> 태그 안에 border 속성을 사용해 테두리를 표시



2. <tr> 태그 - 행



3. <td> 태그 - 각 행마다 들어갈 셀



4. <th> 태그 - 제목 셀

해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시합니다.



5. colspan 속성 - 열 합치기


<td colspan="합칠 열의 개수"> 텍스트 </td>

<th colspan="합칠 열의 개수"> 텍스트 </th>



6. rowspan 속성 - 행 합치기


<td rowspan="합칠 열의 개수"> 텍스트 </td>

<th rowspan="합칠 열의 개수"> 텍스트 </th>



7. <caption> 태그, <figcaption> 태그 - 표 제목


<caption> 표 제목 </caption>


<caption> 태그는 <table> 태그 바로 다음에 사용하고 표 제목은 표의 위 쪽 중앙에 표시됩니다. <caption> 안에는 다른 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수도 있습니다.



<figcaption> 태그는 figure와 caption의 합성어로 <figure> 태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력합니다. <caption> 태그와 달리 중앙에 표시되지 않으며, <table> 태그보다 앞에 사용하면 표 위에 제목이 표시되고 </table> 태그 다음에 사용하면 표 아래에 제목이 표시됩니다.



8. aria-describedby 속성 - 표에 대한 설명


<p id="summary">다음 표는 HTMl5를 지원하는 모던(Modern Browser)를 정리한 것입니다. 최신 버전일수록 HTML5를 좀더 많이 지원하기 때문에 최신 버전을 다운로드하는 것이 좋습니다. </p>
    <table border="1" aria-describedby="summary">


화면 낭독기에서 표를 읽어줄 때 표 설명을 별도의 문장으로 작성한 후 <table> 태그 안에 aria-describedby 속을 추가해 연결하면 표를 이해하는 데 도움이 됩니다.



9. <thead>, <tbody>, <tfoot> 태그 - 표 구조 정의


<thead>

     <tr> … </tr>

</thead>

<tbody>

     <tr> … </tr>

</tbody>

<tfoot>

     <tr> … </tr>

</tfoot>


table의 t와 제목 부분(head), 본문(body), 요약 부분(foot)이란 말이 합쳐진 태그들입니다. 표의 구조를 정의하면 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있습니다. 그리고 표의 본문이 길어 한 화면을 넘어갈 경우, 자바스크립트를 이용해 <thead> 부분과 <tfoot> 부분은 표의 위아래에 고정하고 <tbody> 부분만 스크롤되도록 만들 수 있습니다.


- HTML5에서는 <tfoot> 태그를 <tbody> 태그 앞이나 뒤 어디든 써도 상관없다.



9. <col>, <colgroup> 태그 - 여러 열에 스타일 지정


<col>


<col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용할 때 사용합니다. 닫는 태그는 없습니다.


<colgroup>

     <col>

     …

</colgroup>


<colgroup> 태그는 여러 열을 묶어 스타일을 적용할 수 있는 데 <colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣어야 합니다. 


- <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다.

- <colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 한다.



기타 텍스트 관련 태그



1. <abbr> 태그 - 약자 표시


<p><b><abbr title="Internet of Things">IoT</abbr></b>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다.</p>


2. <cite> 태그 - 웹문서나 포스트에서 참고 내용 표시


<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다-영화, <cite>'비포선셋' </cite> 중</p>



3. <code> 태그 - 컴퓨터 인식을 위한 소스 코드


<pre><code> function savetheLocal(){.....}</code></pre>



4. <kbd> 태그 - 키보드 입력이나 음성 명령 같은 사용자 입력 내용


<p>웹 화면을 다시 불러오려면 <kbd>F5</kbd>키를 누릅니다</p>



5. <small> 태그 - 텍스트를 작게 표시


<p>가격 : 13,000원 <small>(부가세 별도)</small></p>



6. <sub> 태그 - 아래 첨자


<p>무르이 화학식은 <b>H<sub>2</sub>0</b>다</p>



7. <sup> 태그 - 위 첨자


<p>E = mc<sup>2</sup> </p>



8. <s> 태그 - 취소선


<p><s>34,000원</s><strong>19,000원</strong></p>



9. <u> 태그 -  밑줄


<p>링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u> u태그</u></p> 




<출처> Do It! HTML5+CSS33 웹 표준의 정석

저작자표시 비영리 변경금지

'IT > HTML' 카테고리의 다른 글

[HTML 입문] 링크 관련 태그  (0) 2017.03.22
[HTML 입문] 이미지 관련 태그  (0) 2017.03.22
[HTML 입문] 텍스트 관련 태그 ①  (0) 2017.03.20
[HTML 입문] 웹 문서에서 특수 기호 사용하기  (0) 2017.03.20
[HTML 입문] HTML 문서 기본 구조  (0) 2017.03.18

+ Recent posts

티스토리툴바