5. Text-level Elements
텍스트 수준 요소들은 텍스트 즉, 문자 혹은 문자열과 관련하여 사용할 수 있는 요소들을 구분은 것으로 다음과 같은 다양한 요소들을 사용하여 텍스트 관련된 작업을 수행할 수 있습니다.
|
요소 |
기능 |
|
a |
일반적으로 href 속성을 이용하여 다른 웹페이지로 하이퍼링크를 설정하는데 사용 |
|
em |
텍스트를 강조할 때 사용 |
|
strong |
단어나 구(절)를 강조할 때 사용 |
|
code |
컴퓨터가 인식할 수 있는 코드의 일부를 텍스트 형태로 나타낼 때 사용 |
|
samp |
HTML 문서 내의 컴퓨터 프로그램이나 시스템의 결과를 나타낼 때 사용 |
|
kdb |
사용자에 의해서 키보드를 통해 입력되어야 할 텍스트를 정의할 때 사용 |
|
dfn |
용어를 정의할 때 사용 |
|
abbr |
축약을 나타낼 때 사용 |
|
var |
변수를 정의하는데 사용 |
|
cite |
책, 시, 그림, 게임, 오페라 등의 제목을 정의할 때 사용 |
|
q |
짧은 인용구나 인용문을 정의할 때 사용 |
|
sub, sup |
sub(subscript)
요소는 보통 글자보다 아래에 작성하는데 사용하고 |
|
time |
날짜나 시간을 나타낼 때 사용 |
|
s |
텍스트가 더 이상 정확하지 않거나 관련이 없음을 나타낼 때 사용 |
|
small |
한 라인 정도 길이의 짧은 텍스트를 작게 나타낼 때 사용 |
|
i |
텍스트에 이탤릭체를 적용할 때 사용 |
|
b |
텍스트에 굵게 적용할 때 사용 |
|
u |
텍스트에 밑줄을 그어주는데 사용 |
|
mark |
텍스트에 하이라이트 효과를 줄 때 사용하는 요소 |
|
ruby |
우리나라, 중국, 일본 같은 동아시아에서 사용되는 활자들에 대한 하나의 주석을 나타낼 때 사용 |
|
rt |
ruby의 자식 요소로 루비 주석 다음에 오는 루비 주석에 대한 발음 기호와 같은 루비 텍스트를 나타내는 요소 |
|
rp |
루비 주석 텍스트문을 둘러싸는 괄호를 제공 |
|
bdi |
양방향 텍스트 형식을 지원하기 위한 독립된 텍스트 영역을 정의할 때 사용 |
|
bdo |
텍스트가 쓰여지는 방향을 정의하는데 사용 |
|
span |
인라인(inline) 영역을 정의하는데 사용 |
|
br |
한 라인이 끝남을 나타내는 요소로 <br>로 끝 태그 없이 사용하거나 <br/>와 같이 사용 가능 |
|
wbr |
긴 단어나
텍스트 문자열을 공백없이 길게 나타낼 때 사용하는 요소로 |
5.1 a, em, strong 요소(Element)
a 요소는 href 속성을 이용하여 특정 웹페이지로 이동을
위한 하이퍼링크를 설정하는데 사용하는 하거나 이메일 주소를 설정할 때 사용하는 요소입니다. 만일 a 요소를 사용함에 있어서 href 속성이 설정되지 않는다면 단순히
텍스트 형태로 나타납니다.
a 요소를 href 속성과 target 속성을
함께 사용할 경우는 href 속성값에 설정된 특정 웹페이지를 현재의 탭(tab) 또는 윈도우(window)에 나타내거나 새로운 탭이나 윈도우(window)에 나타낼 수도 있습니다. 그래서 일반적으로 a 요소를 사용하는 방법을 나타내면 다음과 같습니다.
<a href=”이동할 페이지”>이동할 페이지에 대한 텍스트</a>
<a href=”mailto:이메일주소”>페이지에 나타날 이름</a>
<a href=”이동할 페이지” target=”_blank | _self | _parent |
_top | framename”>
이동할 페이지에 대한 텍스트</a>
다음으로 em 요소는 텍스트를 강조하는데 사용하는 요소로 강조되는 텍스트는 기울여진 형태로 나타나게 되며 다음과 같은 형식을 이용합니다.
<em>강조할 텍스트</em>
마지막으로 strong 요소는 HTML5에서 새롭게 등장한 요소로 단어(Word)나 구(phrase)와 같은 텍스트를 강조할 때 사용하는 요소로 다음과 같은 형식을 사용합니다. 여기서 구(phrase)는 2개
이상의 단어로 이루어진 문장 성분을 의미합니다.
<strong>강조할 단어<strong>
<strong>강조할 구(절)<strong>
이제 a, em, strong 요소와 관련한 예제를 하나 해볼까요? 이번
예제에서 사용할 웹사이트 주소와 문장은 다음과 같습니다.
웹사이트 주소 : http://www.asp.net
문장 : 공자가 말씀하시길 “배우고 때때로 익히면
또한 기쁘지 아니한가?”
메모장을 열어서 HTML5이 기본적인 코드들을 작성하고
<body> …</body> 블록을 다음과 같이 작성합니다.
<body>
a 요소의 예<br/>
<a
href="http://www.asp.net">ASP.NET 공부에 좋은 사이트</a><br/>
<a>ASP.NET 예제 모음</a><br/><br/>
em 요소의 예<br/>
<em>공자가 말씀하시길 "배우고 때때로 익히면 또한 기쁘지 아니한가?"
</em><br/><br/>
strong 요소의 예<br/>
<strong>공자</strong>가 말씀하시길 <strong>"배우고
때때로 익히면 또한 기쁘지
아니한가?"</strong>
</body>
위와 같이 작성한 후 “a,em,strongEx.html” 로 저장하고 브라우저를 이용하여
보면 다음과 같습니다.
결과에서 보는
것처럼 a 요소는 href 속성을 이용하여 하이퍼링크를 설정할
경우 브라우저에서 해당 링크를 클릭하면 href 속성에 설정된 웹페이지를 보여주게 되지만 href 속성이 사용되지 않은 2 번째의 경우인 “ASP.NET 예제 모음”처럼 단순 텍스트 문자열 형태로 나타내주게
됩니다.
다음으로 em 요소는 강조하는 텍스트를 기울여서 나타내게 됩니다. 그리고 strong 요소는 “공자”처럼 하나의 단어에 진하게 강조하는 형태로 처리할 수도 있고 “배우고
때때로~”처럼 구의 형태에 대해서 강조하고자 할 때 사용하면 편리합니다.
마지막으로 a 요소의 target 속성과 관련된 예제를 하나 해볼까요? “a,em,strongEx.html” 파일을 메모장으로 열고
<body> … </body> 블록을 다음과 같이 수정합니다.
<body>
<a
href="http://www.asp.net" target="_blank">ASP.NET
공부에 좋은 사이트</a><br/>
<a
href="http://www.asp.net" target="_self">ASP.NET
공부에 좋은 사이트</a><br/>
<a
href="http://www.asp.net" target="_parent">ASP.NET
공부에 좋은 사이트</a><br/>
<a
href="http://www.asp.net" target="_top">ASP.NET
공부에 좋은 사이트</a><br/>
</body>
이제 다른 이름으로 저장을 선택하여 “awithtarget.html”로 저장하고 Firefox를 이용하여 다음과 같이 열어봅니다.
target
속성값으로 “_blank”가 설정된 가장 위에 링크를
클릭하면 다음과 같이 새로운 탭에 href 속성값으로 설정된 “http://www.asp.net”
웹페이지를 나타냅니다.
다음으로 target 속성값으로 “_self”로 설정된 두 번째 링크를 클릭하면
다음과 같이 현재의 탭에 href 속성값으로 설정된 “http://www.asp.net”
웹페이지를 나타냅니다.
target
속성값으로 “_parent”가 설정된 세 번째 링크는
부모 프레임(frame)에 href 속성값으로 설정된 웹페이지를
나타내는데 사용되고 “_top”으로 설정된 네 번째 링크는 현재 윈도우(window) 전체에 href 속성값으로 설정된 웹페이지를 나타내는데
사용되므로 그 결과는 target 속성값으로 “_self”로
설정된 두 번째 링크의 결과와 동일하게 나타납니다.
참고로 target 속성값에 대한 처리는 웹 브라우저 별로 처리 결과가 약간 다를 수 있습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 5.3 samp 요소(Element) (0) | 2013.07.31 |
|---|---|
| 5.2 code 요소(Element) (0) | 2013.07.31 |
| 4.6 div요소(Element) (0) | 2013.07.31 |
| 4.5 figure, figcaption요소(Element) (0) | 2013.07.31 |
| 4.4 dl, dt, dd 요소(Element) (0) | 2013.07.31 |
