HTML 기초 TEXT 모음 강조체, 문단, 볼딕 이텔릭체 등...

  HTML TEXT   

• 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) ,태그  ^내용
• 아래첨자 (subscript),  태크 _내용

<html>

  <body>

    <p>

      On the 4^th of September you will learn about E=MC².

    </p>

    <p>

      The amount of CO₂ in the atmosphere grew by 2ppm

      2009₁.

    </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>

축약어

기초 부분은 여기 까지만 하겠다.   더 이상 하게 되면 웹페이지의 로딩 문제가 생길 것 같다.