HTML Element   HTML 구성 요소

(2019-08-29)

html 요소 종류, html 요소 식별자, HTML 태그, html 태그

Top > [기술공통]
[기초과학]
[진동/파동]
[방송/멀티미디어/정보이론]
[전기전자공학]
[통신/네트워킹]
[정보기술(IT)]
[공업일반(기계,재료등)]
[표준/계측/품질]
[기술경영]
통신/네트워킹 >   1. 통신 이란?
  2. 신뢰적 통신
[통신이론]
[선로/전송]
[통신망 일반]
[회선교환(PSTN)]
[무선/이동통신]
[광통신]
[인터넷/데이터통신]
인터넷/데이터통신 >   1. 데이터통신망
  2. 인터넷
  3. 데이터 네트워크 설계
[데이터 단위]
[프로토콜/계층]
[데이터 링크]
[TCP/IP]
[라우팅]
[인터넷 QoS]
[인터넷 관리]
[인터넷 응용]
[인터넷 기타]
[패킷교환(PSN)]
[인터넷 관련 기관]
인터넷 응용 > [NetBIOS]
[DNS]
[가상단말]
[FTP]
[전자메일]
[VoIP]
[웹기술]
[VPN]
[무선인터넷]
[전자상거래]
[개인 컨텐츠]
[인터넷 기타 응용]
웹기술 >   1. 웹 이란?
  2. 하이퍼텍스트
[웹 구성]
[HTTP]
[웹 페이지]
[웹 식별]
[웹 서비스]
[차세대 웹]
[웹기술 기타일반]
웹 페이지 > [마크업 언어]
[DOM,BOM]
[기능 요소]
[웹 디자인]
마크업 언어 >   1. 마크업 언어
  2. SGML
  3. DTD
[HTML]
[XML]
HTML >   1. HTML
  2. HTML 용어
  3. DHTML
  4. HTML5
[HTML 요소]
HTML 요소   1. HTML 구성 요소/종류
  2. 기본 구조 요소 (html,head,title,body 등)
  3. a 요소
  4. form 요소
  5. img 요소
  6. html 속성
  7. 기타 요소
  8. 시맨틱 웹
  9. 시맨틱 요소

1. HTML 구성 요소

  ㅇ 요소 (Element) : HTML 문서를 이루는 구성 요소
     - 사실상, HTML 문서의 모든 것으로써, 콘텐츠 및 기타 성분들을 담는 틀
        . 제목(title),하이퍼링크(link),표(table),리스트(list) 등

     * 100개 이상의 요소가 있음  ☞ w3schools.com (HTML Element Reference)속성 (Attribute) : 각 요소의 성격 표현
     - 각 요소는 구체적인 표현 정보를 나타내는 1 이상의 속성을 갖음
        . `속성이름(attribute) : 속성값(value)`을 한 쌍으로하여 지정

     * 150개 이상의 속성이 있음  ☞ w3schools.com (HTML Attribute Reference)태그 (Tag) : 각 요소의 식별자
     - HTML 문서에서 HTML 요소의 의미를 확정하기위해 붙이는 식별자(태그 요소)
        . 각 요소 마다 시작태그 및 종료태그로 그 범위를 확정시킴
        . 일부 요소(img 요소,br 요소,hr 요소 등)들은 종료태그 없이도 사용 가능
        . 속성은 시작태그에 만 사용
        . 하나의 시작태그에 여러 속성 지정 가능하나, 그들 사이에는 공백으로 구분

      


2. HTML 구성 요소들의 종류/구분

  ㅇ `HTML 기본 문서 구조`를 위한 요소들
     - 기본 구조 정보 : html, head, body
        . html 요소  : 문서 형태 선언
        . head 요소  : 문서 정보들을 나타내는 곳
        . body 요소  : 문서 본문을 나타냄
     - 부가 정보 제공 : base, link, meta, noscript, script, style, title
        . (head 요소 내 사용 가능 요소들)
           .. meta 요소, title 요소, link 요소, base 요소, style 요소, script 요소 등

  ㅇ 표제 (Heading)
     - h1 ~ h6 (6 단계 구분), hgroup

  ㅇ 영역(섹션) 구획 요소들
     - (웹페이지 논리 구획) : 웹페이지 전체 또는 일정 영역을 논리적인 구획으로 분할할 때 유용
        .  header, nav, section, article, aside, footer
           
     - 영역(섹션) 구획 세부사항
        . details (세부 설명)
        . summary (요약)
        . output (출력 결과)

  ㅇ 컨텐츠 가독성 제고 (내용 묶기/구분) 요소들
     - 줄바꿈 : br
     - 단락 : p (유사한 주제를 갖는 문자열의 묶음)
     - 수평선 또는 주제 분리 : hr (horizontal rule)
     - 인용문 : blockquote
     - 일반적이고, 가독성 있는 구조 제공 : div
     - 띄어쓰기 인식 가능 : pre
        . html 문서는 띄어쓰기(스페이스바,,엔터 등)를 무시하나,
        . pre 요소는 이를 그대로 출력시킴
     - 기타 : figure, figcaption

  ㅇ 목록 요소 
     - ol (ordered list), ul (unordered list), li (description list)
     - dt (정의 목록), dd (정의 글자), dl (정의 설명)

  ㅇ 테이블 요소 (table 요소)
     - table, tbody, td, tfoot, th, thead, tr
     - col (표 열), caption (표 제목), colgroup (표 열 그룹)

  ㅇ 논리적 스타일 요소
     - abbr (축약형 약어 표시)
     - address (우편물 주소 표시)
     - cite (인용 작품 제목)
     - code (컴퓨터 코드)
     - dfn (용어 정의)
     - kbd (키보드 입력임을 표시)
     - q (짧은 인용구 표시), 
     - samp (프로그램 샘플 코드)
     - var (변수 표시)
     - 강조 (중요 내용 표시) : em (EMphasis, 약한 강조), strong (강한 강조)

  ㅇ 글자 스타일 요소                                   ☞ CSS 텍스트 참조
     - b (강조)
     - i (이탤릭체/기울어진 글자)
     - s 또는 del (수평 취소선)
     - small (작은 글자)
     - sub (아래 첨자)
     - sup (위첨자)
     - u 또는 ins (밑줄)

  ㅇ 멀티미디어 요소
     - 플러그인 없이 웹브라우저가 직접/전용 지원
        . 비디오 : video
        . 오디오 : audio
     - 한편, 기존 플래시 처럼 플러그인을 통해 랜더링시키는 마크업/태그 : embed, object

  ㅇ 이미지 요소 : img

  ㅇ 링크 요소 : a 요소 (Anchor)

  ㅇ 폼 요소 (form 요소)
     - fieldset, form, input, button, select, label,legend, textarea
     - 폼 레이블 컨트롤 : label
     - 폼 컨트롤 그룹핑 : fieldset (그룹핑 기능), legend (그룹핑에 대한 주석)

  ㅇ 블록 요소(태그) 및 인라인 요소(태그) 구분
     - 블록 요소   : p, h1~h6, div, ol, ul 등
     - 인라인 요소 : a, span, img 등

  ㅇ 스크립트 요소 : script 요소
     - 기본적으로 script 태그 내 내용을 자바스크립트 코드로 해석함

  ㅇ 기타 요소들
     - area
     - bdi, bdo
     - canvas, command
     - datalist
     - iframe
     - keygen
     - map, mark, menu, meter
     - option
     - param, progress
     - rp, rt, ruby
     - span
     - time, track
     - wbr


[HTML 요소] 1. HTML 구성 요소/종류 2. 기본 구조 요소 (html,head,title,body 등) 3. a 요소 4. form 요소 5. img 요소 6. html 속성 7. 기타 요소 8. 시맨틱 웹 9. 시맨틱 요소
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   인터넷 응용
        1.   NetBIOS
        2.   DNS
        3.   가상단말
        4.   FTP
        5.   전자메일
        6.   VoIP
        7.   웹기술
              1. 웹 이란?
              2. 하이퍼텍스트
          1.   웹 구성
          2.   HTTP
          3.   웹 페이지
            1.   마크업 언어
                  1. 마크업 언어
                  2. SGML
                  3. DTD
              1.   HTML
                    1. HTML
                    2. HTML 용어
                    3. DHTML
                    4. HTML5
                1.   HTML 요소
                  1.   1. HTML 구성 요소/종류
                      2. 기본 구조 요소 (html,head,title,body 등)
                      3. a 요소
                      4. form 요소
                      5. img 요소
                      6. html 속성
                      7. 기타 요소
                      8. 시맨틱 웹
                      9. 시맨틱 요소
              2.   XML
            2.   DOM,BOM
            3.   기능 요소
            4.   웹 디자인
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌