[CSS] 패러그래프

[초코러브]

1.   Text Clip

박스 안에 있는 텍스트가 박스 설정에 따라 어떻게 다른지 아래 예를 보라.

박스의 너비만 설정되었고, 텍스트의 길이는 너비보다 길다.

첫 번째는 박스의 너비만 설정하고 높이는 설정하지 않은 경우이다. 모든 텍스트를 감쌀 수 있는 높이로 확장된다. 그리고, 텍스트의 white-space들은 자동으로 wrap 되어 다음 줄로 넘어간다. 그러나, 한 단어가 너비보다 큰 경우는 박스 범위를 넘어 간다.

두 번째는 overflow: hidden을 설정한 경우이다. white-space는 wrap하고 박스 범위를 넘어가는 텍스트를 숨긴다.

세 번째는 overflow: hidden과 함께 white-space: nowrap을 설정한 경우이다. nowrap에 의해 텍스트가 일렬로 배열된다. 그리고, hidden에 의해 넘어가는 텍스트는 보여주지 않는다.

네 번째는 text-overflow라는 속성을 이용했다. 이 속성은 박스를 넘어가는 텍스트를 어떻게 다룰지 지정한다.

text-overflow:clip은 넘어가는 텍스트를 잘라버리고, text-overflow:ellipsis는 넘어가는 텍스트를 자르면서 마지막 부분을 “…”으로 처리해 준다.

2.   Text Align

텍스트는 text-align 속성으로 수평방향 정렬을 할 수 있다.

text-align: left|right|center|justify;

left, right, center는 단어 뜻 그대로 좌, 우, 중앙 정렬이고 justify는 양쪽 맞춤 정렬이다. Justify는 text-justify로 양쪽 맞춤 방식을 결정할 수도 있다.

수직방향 정렬은 vertical-align로 할 수 있다.

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom;

vertical-align 속성은 text-align과는 다르게 box에는 적용되지 않는다. 예를 들어,

div {      text-align: center; }	div {      vertical-align: middle; }
수평 중앙 정렬됨.	수직 중앙 정렬 안됨.

vertical-align는 텍스트 높이 상에서의 정렬이다. 따라서, div 상에서 텍스트를 수직 정렬하고 싶다면 line-height를 div 높이와 같도록 설정하면 된다.

또는, div의 display 속성을 table-cell로 설정하면 line-height 조절 없이도 수직 정렬할 수 있다. 이는 엘리먼트 자체를 수직 정렬한다. 단, display: table-cell 설정에 의해 inline설정을 할 수 없다. 인라인으로 배열하려면 다른 박스로 감싸 준다.

#div_valign2 {      /* div height와 같은 값 */      line-height: 50px;      vertical-align: middle; }

#div_valign3 {      display: table-cell;      vertical-align: middle; }

3.   Text Decoration

텍스트를 꾸미기 위한 CSS 속성들로 다음과 같은 것들이 있다.

CSS 속성	설명
간격
letter-spacing 문자간 간격.	letter-spacing: normal|length length: px, pt, cm, etc with +/-
word-spacing 단어 간의 간격 조절.	word-spacing: normal|length length: px, pt, cm, etc with +/-
line-height 텍스트 라인의 높이	line-height: normal|number|length number: 양의 정수로 현재 폰트 사이즈에 상대적임. number: px, pt, cm, etc (양의 정수) %: 현재 폰트 사이즈에 상대적.
text-indent 들여쓰기	text-indent: length length: px, pt, cm, em, etc.
정렬과 방향
text-align 수평 정렬	text-align: left|right|center|justify
vertical-align 수직 정렬	vertical-align: baseline|sub|super|top|middle|bottom; length: +/- px, pt, etc.
direction 텍스트 방향	direction: ltr|rtl ltr: left to right rtl: right to left (문자 글자 순서는 바뀌지 않고 오른쪽 정렬과 같이 되나 마침표는 왼쪽에 배치됨. unicode-bidi:bidi-override 속성이 함께 주어지면 글자의 순서까지 바뀜)
unicode-bidi	unicode-bidi: normal|embed|bidi-override direction이 rtl일 때, unicode-bidi의 값이 bidi-override면 문자의 순서도 오른쪽에서 왼쪽으로 변한다.
white-space	white-space: normal|nowrap|pre|pre-line|pre-wrap; normal: 연속된 whitespace를 하나로. 공간에 맞게 줄바꿈 nowrap: 연속된 whitespace를 하나로. 줄바꿈 안함. pre: whitespace 보존. 줄바꿈 안함. <pre> 태그 효과. pre-line: 연속된 whitespace를 하나로. 줄바꿈 <pre> 태그효과 pre-wrap: whitespace 보존. 줄바꿈. <pre> 태그 효과
꾸미기
color 색상지정	color: color value; color value: rgb #value, rgba, color name.
text-decoration 문자선	text-decoration: none|underline|overline|line-through; text-decoration-color: 속성으로 선 색을 변경할 수 있다.
text-transform 대소문자	text-transform: none|capitalize|uppercase|lowercase;    capitalize: 단어 첫 글자만 대문자로 변환    uppercase: 대문자로 변환    lowercase: 소문자로 변환
text-shadow 문자 그림자	text-shadow: h-shadow v-shadow blur color|none;
font-style font-weight	font-style: normal | italic; font-style: normal | bold | number; italic: 이택릭체, bold: 볼드

텍스트를 꾸미기 위한 HTML 태그는 아래 테이블에 나열했다. HTML Computer ..과 HTML Citations.. 은 시맨틱 태그 역할 의미가 크다.

HTML Text Formatting Tags
<b>	볼드
<em>	강조(이탤릭체)
<i>	이탤릭체
<small>	문자를 좀 작게 표시
<big>	문자를 좀 크게 표시
<strong>	볼드
<sub>	아랫첨자
<sup>	윗첨자
<ins>	언더라인 추가
<del>	미들라인 추가
<mark>	문자바탕을 노란색으로 마크
HTML "Computer Output" Tags (태그에 의한 의미부여)
<code>	컴퓨터 코드를 의미 (텍스트 줄바꿈, 스페이스 문자가 유지됨)
<kbd>	키보드 텍스트를 의미
<samp>	샘플 컴퓨터 코드를 의미
<var>	변수를 의미
<pre>	preformatted 텍스트를 의미함. 텍스트 줄바꿈. 스페이스가 문자가 유지되며 고정 문자 폰트(usually Courier)로 표시됨.
HTML Citations, Quotations, and Definition Tags (태그에 의한 의미부여)
<abbr>	약자를 의미. 예를 들어, <abbr title="World Health Organization">WHO</abbr>는 WHO에 마우스를 갖다 대면 title 속성의 텍스트를 풍선말로 보여줌.
<address>	주소를 의미함. 화면상엔 이탤릭체로 표시됨.
<bdo>	텍스트 방향 설정. 속성 dir을 이용해 방향을 바꿈. dir=”rtl” | “ltr”. CSS의 direction과는 다르게 rtl는 바로 문자의 순서까지 right to left로 바뀜
<blockquote>	인용문구를 의미함. 인용 소스는 cite 속성에 기입하며, cite 속성 자체는 화면에 표시되지 않는다. 화면에는 들여쓰기된 형태로 보여준다.
<q>	따옴표를 붙여줌.
<cite>	작품의 타이틀을 의미함. 화면상에 이탤릭체로 표시됨.
<dfn>	정의항을 의미함. 화면상엔 이탤릭체로 표시됨.

4.   Paragraph Decoration

HTML Paragraph

HTML 태그 중 패러그래프를 의미하는 태그는 <p>이다. <p> 태그로 감싸진 영역의 자신의 마진을 가지고 있다. 문단 내의 텍스트에서 줄바꿈하려면 <br> 태그를 이용한다. <br> 태그는 / 태그로 닫지 않는다.

문단의 첫 문자 꾸미기

패러그래프 시작 문자를 크게 표시하는 경우가 많다. CSS의 :first-letter 섹렉터를 이용해 패러그래프의 첫 번째 글자를 쉽게 참조할 수 있고, 이를 이용해 문자를 꾸밀 수 있다.

패러그래프를 <p> 태그로 구분하고 각 패러그래프의 첫 문자의 크기를 2배로 하고 색을 바꾸고자 한다면, 다음과 같이 CSS를 작성한다.

p::first-letter

{

font-size: 200%;

color: #8A2BE2;

}

…

<p>First Paragraph…. </p>

<p>Second Paragraph… </p>

그런데, 이런 식으로만 꾸미면 라인 높이가 높아지면서 구성이 보기 안 좋게 된다. float 속성을 이용해 이를 해결할 수 있다.

문단의 첫 라인

문단의 첫 라인은 :first-line 셀렉터를 이용해 참조하고 꾸밀 수 있다.

문단 꾸미기 Example1: First-Letter

-       결과화면

-       소스코드

<!doctype html>

<html>

<head>

<title>First-Letter test</title>

<link rel="stylesheet" media="all" href="css/reset.css" />

<style type='text/css'>

* {

     margin: 0px;

     padding: 0px;

     font: 16px Lucida Sans, sans-serif;

}

/* 페이지 스타일 */

.box_insh

{

     display: block;

     width: 25em;

     margin: 1em auto;

     padding: 2em;

     position: relative;

     overflow: hidden;

     background-color: #fff;

    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

     box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

/* 첫 번째 패러그래프(p:first-child)의 첫 문자(first-letter) 스타일 */

div#page p:first-child:first-letter {

     color: #555;

     float: left;

     font-size: 3.5em;   /* almost 3 line */

     font-weight: bold;

     margin-right: 0.3em;

     line-height: 1em;

     font-family: "Times New Roman", Times, serif;

}

/* 연속된 패러그래프의 첫 글자 들여쓰기.*/

/*

p + p {

     text-indent: 1.5em;

}

*/

/* 연속된 패러그래프의 첫 글자를 §로 */

p + p:before{

     content: "§ ";

}

p {

     text-align: justify;     /* 양쪽 정렬 */

     font-size: 1em;

     line-height: 1.5em;      /* increase line height */

     margin-top: 1em;              /* paragraph space */

     margin-bottom: 1em;

}

</style>

</head>

<body>

<div id="page" class="box_insh">

     <p>Lorem Ipsum ... unchanged. </p>

     <p>Lorem Ipsum ... unchanged. </p>

</div>

</body>

</html>

다단 구성

CSS로 다단을 구성하는데는 column-으로 시작하는 속성을 이용한다.

일단, 주요 속성은 column-count와 column-width이다. 이 두 속성은 columns 속성으로 한 번에 지정할 수 있다. 이 두 속성을 위한 설정 케이스는

1. column-width를 지정, column-count는 자동으로 설정해 박스 너비에 맞춰 컬럼 수가 자동으로 결정됨.

     /* coulumns: 10em auto; */

column-count: auto; /* default is auto */

     column-width: 10em;

2. column-count를 지정해 박스 너비에 맞춰 column-width가 결정됨.

           /* coulumns: 1em 2; */

column-count: 2;

column-count와 column-width를 둘 다 지정한 경우, 박스에 맞추기 적합한 것으로 자동 결정된다. 예를 들어 columns: 1em 2;로 설정한 경우에, 1em은 너무 작고 2 컬럼 값이 박스 너비에 맞추기 적합할 것이다. 이와 다르게 columns: 5em 100;로 설정한 경우에, 박스 너비가 100 컬럼을 감당하기 어려운 경우 컬럼 너비 5em이 적합할 것이다.

컬럼 사이의 간격은 column-gap 속성을 이용하고 컬럼 사이를 구분하는 선에 대한 설정은 column-rule 속성을 이용한다. column-rule과 관련된 속성은 column-rule-size, column-rule-style, column-rule-color가 있는데 column-rule 속성에서 이 설정들을 한 번에 할 수 있다.

.multi_col1 {

     column-count: 2;

     column-gap: 2em;

     column-rule: 1px solid black;

}

텍스트를 컬럼들에 걸쳐 표시할 필요가 있다면, column-span을 이용한다. 1 또는 all을 설정할 수 있다.  위 CSS를 적용한 결과는 다음과 같다.

섹션 넘버링

자동으로 섹션을 넘버링 하고자 한다면, counter- 속성을 이용한다.

-       counter-rese: counter_name 은 counter_name 카운터를 생성하거나 리셋함.

-       counter-increments: counter_name은 counter_name 카운터 값을 증가시킴.

-       counter(counter_name)은 counter_name 카운터의 값을 가져옴.

헤더 <h1>과 <h2> 태그 별로 카운팅을 하고, 이를 섹션 넘버링에 이용하는 예를 들면 다음과 같다.

Example2: Numbering the sections

소스코드

<!DOCTYPE html>

<html>

<head>

<style>

body {counter-reset:section;}

h1 {counter-reset:subsection;}

h1:before

{

     counter-increment:section;

     content:"Section " counter(section) ". ";

}

h2:before

{

     counter-increment:subsection;

     content:counter(section) "." counter(subsection) " ";

}

</style>

</head>

<body>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

<h1>HTML tutorials</h1>

<h2>HTML Tutorial</h2>

<h2>XHTML Tutorial</h2>

<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>

<h2>JavaScript</h2>

<h2>VBScript‎</h2>

<h1>XML tutorials</h1>

<h2>XML</h2>

<h2>XSL</h2>

</body>

</html>

결과

Note: IE8 supports these properties only if a !DOCTYPE is specified.

Section 1. HTML tutorials

1.1 HTML Tutorial

1.2 XHTML Tutorial

1.3 CSS Tutorial

Section 2. Scripting tutorials

2.1 JavaScript

2.2 VBScript‎

Section 3. XML tutorials

3.1 XML

3.2 XSL

숫자 말고도 헤더를 꾸미는 방법에 대해서, 다음 웹페이지를 참고해 보라.

http://tympanus.net/codrops/2012/11/02/heading-set-styling-with-css/

5.   Constructing a document

참조:

http://24ways.org/2006/compose-to-a-vertical-rhythm/

http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/

페이지 디자인 시에 960grid를 활용한다. 너비 960px에 10px 좌우 패딩해 실제 사용하는 영역은 940px이다. 960 grid는 12 column grid 모델과 16 column grid 모델이 있다. 이 모델에 대한 figure는 http://960.gs/demo.html 를 참고하라. 두 모델 모두 컬럼 간격은 20px이고, 컬럼 너비는 12 column grid는 60px column grid는 40px이다. 이러한 사이즈 설정은 화면 요소 배치할 때, 배치 간격을 계산하기가 쉽다. 바디에 마우스 호버시 그리드 라인이 보이도록 하고 싶다면, 다음과 같이 해본다.

body:hover {

  background: url(…/img/grid.png) center -6px repeat-y #fff;

}

크기를 구하기 전에 리셋하는 과정을 수행한다.

body, div, dl, dt, dd, ul, ol, li,

h1, h2, h3, h4, h5, h6,

pre, form, fieldset, input, textarea,

p, blockquote, th, td {

     margin: 0;

     padding: 0;

}

폰트 크기와 라인크기를 구한다. 우선, 기본 크기를 결정한다. em을 이용한다. 1em의 기본값은 16px이다. 

body {

         font-size: 1em;          /* 16px */

         line-height: 1.5em; /* 24px */

         padding-top: 4.5em; /* 3 lines (24px*3=72px)*/

}

위 설정에서 font-size를 0.75em으로 설정했다면, line-height의 em 값이 같더라도 px 값은 변경된다.

body {

           font-size:  0.75em;       /* 12px = 16px * 0.75 */

           line-height: 1.5em; /* 1.5*12px = 18px  */

           padding-top: 4.5em; /* 3 lines

}

font-size: 0.75em은 이전 폰트 사이즈의 75% 크기로 폰트 사이즈를 설정하였다. 이제, body 태그 이하에서 1em은 12px이고 line-height: 1.5em은 18px이다. 실제 설정은 첫 번째 것으로 하도록 한다.

패러그래프 <p>의 사이즈를 다음과 같이 설정한다.

p {

     font-size: 1em;

     margin-top: 1.5em;

     margin-bottom: 1.5em;

}

<p>의 폰트사이즈는 1em으로 <p>의 부모태그 폰트 사이즈를 그대로 유지한다. margin-top, bottom은 line-height와 동일하게 1.5em으로 설정했다.

그리고, 헤더 태그 h1 ~ h5, h6의 크기를 결정한다. 폰트 사이즈는 단순히 감소하되 라인 높이는 동일하게 유지한다.

<h5>의 폰트크기와 라인높이를 1em(16px), 1.5em으로 하고 <h1>은 크기를 결정했으면 <h2> ~ <h4> 크기를 그 사이에 균일하게 분배한다.< h1>을 라인 높이와 동일하게 24px로 하면, (24px-16px)/4 = 2px로 2px씩 감소시킨다 라인 높이는 초기 설정과 픽셀 단위로 동일하게 만들기 위해 약간의 계산이 필요하다. 항상 24px이 되도록 24/(new font size in px) = result in em 과 같이 계산할 수 있다.

h1, h2, h3, h4, h5, h6 {

     font-weight: bold;

}

h1 {

     font-size: 1.5em; /* 24px: 24/16 = 1.5em */

     line-height: 1em; /* 24px: 24/24 = 1em */

     margin-top: 1em;

     margin-bottom: 1em;

}

h2 {

     font-size: 1.375em;      /* 22px: 22/16 = 1.375em */

     line-height: 1.0909em;    /* 24px: 24/22 = 1.090909em */

     margin-top: 1.0909em;

     margin-bottom: 1.0909em;

}

h3 {

     font-size: 1.25em; /* 20px: 20/16 = 1.25em */

     line-height: 1.2em; /* 24px: 24/20 = 1.2em */

     margin-top: 1.2em;

     margin-bottom: 1.2em;

}

h4 {

     font-size: 1.125em; /* 18px:  18/16 = 1.125em */

     line-height: 1.333em;     /* 24px: 24/18 = 1.3333333em */

     margin-top: 1.333em;

     margin-bottom: 1.333em;

}

h5, h6 {

     font-size: 1em;          /* 16px: 16/16 = 1em */

     line-height: 1.5em; /* 24px: 24/16 = 1.5em */

     margin-top: 1.5em;

     margin-bottom: 1.5em;

}

마진은 라인 높이와 동일하게 설정한다.

6.   ETC

캐릭터 셋 (HTML Character Set)

HTML 페이지를 브라우져가 올바르게 표시하려면 페이지를 인코딩한 캐릭터 셋을 알아야 한다. HTML 페이지에서 캐릭터 셋을 <meta> 태그로 지정할 수 있다.

HTML4 방식

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

HTML5 방식

<meta charset="UTF-8">

요즘에는 UTF-8 캐릭터 셋을 많이 사용하므로 섹션 마지막에 UTF-8 캐릭터 셋 링크 리스트를 나열한다. UTF-8 캐릭터셋과 다른 캐릭터 셋과 비교하면 다음과 같다.

-       UTF-8과 ASCII는 0 ~ 127 범위에서 동일하다

-       UTF-8은 128 ~ 159를 사용하지 않는다.

-       UTF-8과 ANSI, 8859-1은 160 ~ 255 범위에서 동일하다.

HTML5 UTF-8 문자셋의 구성과 문자 코드 범위는 다음과 같다.

Latin: x000-x024F

C0 Controls and Basic Latin (ASCII)

C1 Controls and Latin1 Supplement

Latin Extended A

Latin Extended B

Diactrical Marks: x0300-x036F

Greek And Copic: x0370-x03FF

Cyrillic: x0400-x04FF

Cyrillic Supplement: x0500-x052F

Other : x2000 - x27BF

HTML Entity & Special Character

HTML 페이지에 문자를 입력하는데, HTML 엔티티를 이용해 HTML 페이지에 넣을 수 있다. 엔티티 이름이 없다는 숫자를 이용한다. HTML 엔티티는 &로 시작해 ;로 끝난다. 그 사이에는 문자의 이름이나 번호를 넣는다. 번호는 #으로 시작하면 16진수면 #x를 쓴다. CSS에서 이용하려면 & 대신 \를 이용하며, 숫자는 16진수를 써야 한다. 

예를 들어, quotation 마크는

<p>Quotation Mark: &quot;</p>

<p>Quotation Mark: &#34;</p>

<p>Quotation Mark: &#x0022;</p>

물론, 키보드로 입력할 수 있는 문자도 HTML 엔티티를 이용해 표시할 수 있다. 하지만, 굳이 그럴 필요는 없고 키보드로 입력할 수 있는 특수문자를 입력하는데 유용하게 이용할 수 있다. (여기서, 특수문자가 새로운 캐릭터 셋을 의미하지 않는다. 단지, 캐릭터 셋 문자들 중 키보드로 입력할 수 없거나 HTML 페이지에서 다른 의미로 쓰이는 것(ex: < or >)을 의미한다. )

이름이 있는 HTML Entity의 참조 리스트는 아래 링크에서 확인할 수 있다.

HTML4: http://www.w3schools.com/charsets/ref_html_entities_4.asp

HTML5: http://dev.w3.org/html5/html-author/charref

몇 가지 간단한 문자 리스트

문자	코드	엔티티 이름	설명
충돌방지를 위한 문자들
<	&#60;	&lt;	LESS-THAN SIGN
>	&#62;	&gt;	GREATER-THAN SIGN
&	&#38;	&amp;	ampersand
"	&#34;	&quot;	QUOTATION MARK
'	&#39;		APOSTROPHE (single quotation mark)
	&#160;	&nbsp;	no-break space = non-breaking space
패러그래프 심볼
‘	&#8216;	&lsquo;	LEFT SINGLE QUOTATION MARK
’	&#8217;	&rsquo;	RIGHT SINGLE QUOTATION MARK
“	&#8220;	&ldquo;	LEFT DOUBLE QUOTATION MARK
”	&#8221;	&rdquo;	RIGHT DOUBLE QUOTATION MARK
…	&#8230;	&hellip;	HORIZONTAL ELLIPSIS
–	&#8211;	&ndash;	EN DASH
—	&#8212;	&mdash;	EM DASH
§	&#167;	&sect;	SECTION SIGN(section sign)
¶	&#182;	&para;	PILCROW SIGN(paragraph sign)
※	&#8251;		REFERENCE MARK
†	&#8224;	&dagger;	DAGGER
‡	&#8225;	&Dagger;	DOUBLE DAGGER
⁃	&#8259;		HYPHEN BULLET
•	&#8226;	&bull;	BULLET
◦	#9702;		WHITE BULLET
‣	&#8227;		TRIANGULAR BULLET
◊	&#9674;	&loz;	LOZENGE
♢	&#9826;		WHITE DIAMOND SUIT
♦	&#9830;	&diams;	BLACK DIAMOND SUIT
비교
<	&#60;	&lt;	LESS-THAN SIGN
>	&#62;	&gt;	GREATER-THAN SIGN
≤	&#8804;	&le;	less-than or equal to
≥	&#8805;	&ge;	greater-than or equal to
±	&#177;	&plusmn;	PLUS-MINUS SIGN
≠	&#8800;	&ne;	not equal to
그외 심볼
©	&#169;	&copy;	COPYRIGHT SIGN
?	&#174;	&reg;	REGISTERED SIGN
@	&#64;		COMMERCIAL AT
?	&#8364;	&euro;	EURO SIGN
₩	&#8361;		WON SIGN
™	&#8482;	&trade;	trademark
←	&#8592;	&larr;	LEFTWARDS ARROW
↑	&#8593;	&uarr;	UPWARDS ARROW
→	&#8594;	&rarr;	RIGHTWARDS ARROW
↓	&#8595;	&darr;	DOWNWARDS ARROW
♠	&#9824;	&spades;	BLACK SPADE SUIT
♣	&#9827;	&clubs;	BLACK CLUB SUIT
♥	&#9829;	&hearts;	BLACK HEART SUIT
♦	&#9830;	&diams;	BLACK DIAMOND SUIT
▲	&#9650		BLACK UP-POINTING TRIANGLE
▶	&#9658		BLACK RIGHT-POINTING POINTER
▼	&#9660		BLACK DOWN-POINTING TRIANGLE
◀	&#9668		BLACK LEFT-POINTING POINTER

책갈피 or 문서 내 참조

문서에서 책갈피 또는 문서 내 참조 기능을 제공하기 위한 방법으로 <a> 태그 링크를 이용할 수 있다.

<a href=”#참조할 태그의 id”> </a>

문서 내에서 조금은 인터액티브한 참조를 위해 이미지 영역을 링크 영역으로 만들 수 있다. 이는 <map> 태그를 이용해 한다.

Example:

<p align="center">

   <img src="pages.gif" width="384" height="245"

      alt="site map" usemap="#sitemap" border="0">

   <map name="sitemap">

      <area shape="circle" coords="186,44,45"

         href="Overview.html" alt="Getting Started">

      <area shape="circle" coords="42,171,45"

         href="Style.html" alt="A Touch of Style">

      <area shape="circle" coords="186,171,45"

         alt="Web Page Design">

      <area shape="circle" coords="318,173,45"

         href="Advanced.html" alt="Advanced HTML">

   </map>

</p>

shape와 coords

•rect: left-x, top-y, right-x, bottom-y

•circle: center-x, center-y, radius

•poly: x1,y1, x2,y2, ... xn,yn

nohref

링크 막기

<area shape="circle" coords="186,44,50" nohref>

<area shape="circle" coords="186,44,100"

         href="Overview.html" alt="Getting Started">