HTML Element   HTML 구성 요소

(2019-08-29)

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

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

    요약목록
Copyrightⓒ written by 차재복 (Cha Jae Bok)        「 소액후원 」