Coding HTML [1]

HTML 태그

---

block 속성 태그

• <h1>~<h6>: 제목태그 head line

  제목태그는 제목을 나타내고 구분지을때 사용한다.
  숫자가 높아질수록 글자가 점점 작아진다.
  h1은 html문서 1개당 1번씩만 사용할 수 있다.

• <p></p>: 본문태그(단락태그) paragraph

  본문을 나타내기 위해 단락으로 구분하는 태그로 <p>태그와 </p>태그 사이에 내용을 넣을 수 있다.

• <br />: 줄바꿈 태그

  문장안에서 줄바꿈이 필요할 경우 사용한다.
  줄바꿈 태그는 단독태그로 태그 이름 뒤에 바로 /를 붙여 마무리한다.

---

inline 속성 태그

• <b>, <strong>:글자의 모양을 굵게 지정하는 태그

  <b>태그는 글자를 단순하게 꾸미는 용도로 사용하고, <strong>태그는 시각장애인에게 화면 낭독기를 통해 중요한 내용을 전달하는 태그로 두 태그의 모양은 같지만 사용하는 용도가 다르다.

• <span>: 줄 바꿈없이 글자 영역을 묶어 꾸밀때 사용하는 태그

  <span>으로 묶인 부분을 css를 처리하면 글자를 다양하게 꾸밀 수 있고 햄버거 버튼 등 클릭하면 모양이 바뀌는 아이콘 처리를 할 수도 있고, 작은 배경요소를 코드로 처리할때도 많이 사용된다.

---

<dl>,<dt>,<dd>: 정의 목록 태그

• 정의 목록(=설명 목록)이란 이름과 값으로 구성된 목록을 말한다.

• 특히 dd태그는 여러 개를 출력하여 설명을 나열할 수 있지만
  dt와 dl은 한 번씩만 쓰인다.

  [기본형]
  <dl>
<dt>단어명 또는 설명 또는 지점명</dt>
<dd>설명</dd>
</dl>

  ---

  예시)

  

  ---

  Entity code (숫자),(문자)

• 엔티티코드는 키보드 자판에 없는 다양한 특수기호를 표시하거나 코딩언어 안에서 코드로 처리되는 일부 특수기호들을 일반 문자로 표기할 때 사용하는 코드이다.

• 엔티티 코드를 문자(=유니코드)로 표현할 경우 &로 시작해서 ;로 끝내고, 숫자로 표현할 경우 &#을 붙이고 ;로 끝낸다.

  예시)

   <!-- < -->
    <p>&#60;</p>
    <p>&lt;</p>
    <!-- > -->
    <p>&#62;</p>
    <p>&gt;</p>
    <!-- " -->
    <p>&#34;</p>
    <p>&quot;</p>
    <!--저작권표시-->
    <p>&#169;</p>
    <p>&copy;</p>
    <!--상표등록표시-->
    <p>&#174;</p>
    <p>&reg;</p>
    <!-- 공백 -->
    <p>문자 사이 공백 &nbsp;두칸</p>
    <p>문자 사이 공백 &#160;두칸</p>
    <!-- &(엠퍼선드) -->
    <p>화합 &amp; 협력</p>
    <p>화합 &#38; 협력</p>

  ---

  목록을 만드는 태그

  • 사용사이트를 구성할때 '메뉴'를 나타내는 용도하게 되었다.

  • 순서가 있는가 없는가에 따라 ol태그 또는 ul태그를 사용한다.

  • ol또는 ul태그안에 li태그를 사용해 목록내용을 나타낸다.
    목록 태그들은 block속성을 가지고 있다.

    [기본형]
    순서가 있는 목록 태그
    <ol>
      <li>목록1</li>
      <li>목록2</li>
      <li>목록3</li>
    </ol>
    순서가 없는 목록 태그
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
      <li>메뉴3</li>
    </ul>