HTML TEXT - Headings and paragraphs
- bold, italic, emphasis
- Structural and semantic mark up
- Headings and paragraphs
- bold, italic, emphasis
- Structural and semantic mark up
웹 페이지를 만들때 태크를 추가(mark up을 의미) 하는데, 이 태그는 브라우저 사용자에게 페이지에 적합적인 구조를 만들수 있게 추가적인 의미를 제공한다.
이 장에서는 당신의 웹페이지의 텍스트 와 모양을 웹페이지에 어떻게 마크업을 하는지 알려 준다.
- 구조적인 마크업으로써 제목과 문단의 요소를 설명한다.
- 시멘틱 마크업으로써 문장에서 강조되는 부분 및 인용문 그리고 두문자어의 의미 등을 제공한다.
HEDING
6개의 폰트 크기의 레벨이 있다. <H1> 메인 헤딩. <H2> 서브헤딩.. 각 6가지의 헤드라인을 가지고 있는데, 아래와 같이 작성 할 수 있다.
<html>
<body>
<h1>This is Main heading</h1>
<h2>This is a Level2 heading</h2>
<h3>This is a Level3 heading</h3>
<h4>This is a Level4 heading</h4>
<h5>This is a Level5 heading</h5>
<h6>This is a Level6 heading</h6>
</body>
</html>
결과 그림은 아래와 같다.
 |
| h 태크 결과 |
PARAGRAPHS(문단)
글에서 문단을 나누려면 <p>내용 </p> 으로 나누어야 한다. 웹브라우저에서 기본적으로 p 테크로 나누었을때, 앞 문단과 뒷 문단 사이에 공백이 발생한다.<html>
<body>
<p>
A paragraph consists of one or more sentence that from a self-containened
unit odf discourse. The start of paragraph is indicated by a new line.
</p>
<p>
Text is easier to understand when it is split up into of text. For
example, a book may have chapters. chapters can have subheadings. Under
each heading there will be one or more paragraphs.
</p>
</body>
</html>
결과는 그림과 같다.
볼딕체, 이텔릭체, 윗첨자, 아래첨자
아래와 같이 문장을 강조하기 위한 볼딕체, 이텔릭체를 사용할 수 있으며, 일반 워드처럼 html에 윗첨자와 아래첨자를 사용할 수 있다.- 볼딕체 : 태그 <b> 내용 </b>
<html>
<body>
<p>This is how we make a word appear <b>bole.</b></p>
<p>
Inside a product description you might see some <b>key features</b> in
bold.
</p>
</body>
</html>
 |
| 볼딕체 |
- 이텔릭체 , 태그 <i> 내용 </i>
<html>
<body>
<p>This is how we make a word appear <i> italic</i>.</p>
<p>It's a potato <i>solanum teberosum</i>.</p>
<p>Captain Cook sailed to Australia on the <i>Endeavour</i></p>
</body>
</html>
 |
| 이텔릭체 |
- 윗첨자(superscript) ,태그 <sup> 내용 </sup>
- 아래첨자 (subscript), 태크 <sub> 내용 </sub>
<html>
<body>
<p>
On the 4<sup> th</sup> of September you will learn about E=MC<sup>2</sup>.
</p>
<p>
The amount of CO<sub>2</sub> in the atmosphere grew by 2ppm
2009<sub>1</sub>.
</p>
</body>
</html>
 |
| 윗첨자 및 아래첨자 |
행(줄)바꿈 , 가로줄 넣기
- 행바꿈 (LINE BREAKS)
<html>
<body>
<p>
The Earth <br />
gets on hundred tons heavier every day<br />
du to falling space dust.
</p>
</body>
</html>
 |
| br 태크 |
- 가로줄 넣기 (Horizontal rules)
<html>
<body>
<p>
Venus is the only planet that rotates clockwise.
</p>
<hr />
<p>
Jupiter is bigger than all the other planets combined.
</p>
</body>
</html>
 |
| 가로줄 넣기 |
가로줄 넣기는 문단의 주제가 바뀔 때, 사용한다.
Strong(강조체) , EM (미묘한 변화)
Strong 태그는 해당내는 내용의 심각성이나 긴급성을 표현 하는 것이고 EM 태그는 미묘한 변화를 나타내는 태그이다.
- 강조체(strong) : 태크 <strong> 내용 </strong>
<html>
<body>
<p><strong>Beware: </strong> Pickpockets operate in this area.</p>
<p>
This toy has many small pieces and is
<strong> not suitable for children under five years old</strong>
</p>
</body>
</html>
 |
| 강조체 |
- 미묘한 변화 (EM) : 태그 <em> 내용 </em>
<html>
<body>
<p>I <em> think</em> Iyy was the first. </p>
<p>I think <em> Ivy</em> was the first. </p>
<p>I think Ivy was the <em>first</em>. </p>
</body>
</html>
 |
| EM 태그 |
QUOTATION(부호 인용구)
- 블럭 인용구 태그<blockquote>는 css을 활용해서 사용해서 사용하는 것을 권장
- 부호 인용구 : 태그 <q> 내용 </q>
<html>
<body>
<blockquote cite="http//en.widkipedia.org/wiki/Winnie-the-Pooh">
<p>
Did you ever stop to think, and forget to tart agin?
</p>
</blockquote>
<p>
AS A.A. Milne said,
<q
>Some people talk to animals. Not may listen though. That's the
problem.</q
>
</p>
</body>
</html>
 |
| 부호 인용구 |
Abbreviations & Acronyms (축약어) 자주 쓰고 있지 않는 기능인것 같은 기능 축약어 인데, 실무에서는 은근 요구 하시는 분들이 많다. 제목을 위에 가져가면 하면, 내용까지 볼 수 있는 기능이니, 요구 사항이 많다. 그런데, 개발 하시는 분들은 여간 번거로운 기능이다. 아래의 예제를 보면 내용을 알 수 있다.
<html> <body> <p> <abbr title="Professor"> Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist. </p> <p> <acronym title="National Aeronautics and Space Administration" >NASA</acronym > do some crazy space stuff. </p> </body></html>
축약어
기초 부분은 여기 까지만 하겠다. 더 이상 하게 되면 웹페이지의 로딩 문제가 생길 것 같다.
<html>
<body>
<p>
<abbr title="Professor"> Prof</abbr> Stephen Hawking is a theoretical
physicist and cosmologist.
</p>
<p>
<acronym title="National Aeronautics and Space Administration"
>NASA</acronym
>
do some crazy space stuff.
</p>
</body>
</html>
 |
| 축약어 |
기초 부분은 여기 까지만 하겠다. 더 이상 하게 되면 웹페이지의 로딩 문제가 생길 것 같다.
댓글 없음:
댓글 쓰기