웹사이트 활용법  How to Use a Website

  1. Hyper Text Markup Language
  2. Cascading Style Sheets
  3. JavaScript
  4. and...
  1. 초본문표식달기언어 HTML
    암호 Code
    인간과 컴퓨터가 소통하기 위한 언어
    웹 World Wide Web
    인터넷을 통해 문서나 자원에 접근할 수 있는 정보 체계
    웹 페이지 Web Page
    웹상의 하이퍼텍스트 문서
    웹사이트 Website
    웹페이지의 모음
    초본문표식달기언어 HTML
    웹 페이지를 만드는 언어, 웹 페이지의 확장자
    웹 에디터 Web Editor
    서브라임 텍스트, 비주얼 스튜디오 코드, ...
    웹 브라우저 Web Browser
    사파리, 크롬, 파이어폭스, ...
  2. 구조 Structure
    <p>
    태그 Tag
    HTML 문서를 구성하는 기본 단위
    <p></p>
    여는 태그 Opening Tag, 닫는 태그 Closing Tag
    여는 태그에서 닫는 태그까지를 태그의 적용 범위로 인식. (단일 태그 제외)
    <p class="apple"></p>
      속성 이름 Attribute Name
      여는 태그 안에 쓰여 기능을 추가
      속성 값 Attribute Value
      추가하는 기능을 위한 구체적인 값
    <html> <head></head> <body></body> </html>
    <html>
    문서 시작
    <head>
    문서에 대한 정보(메타데이터) 명시
    <body>
    웹 페이지에 표시할 내용
    <!DOCTYPE html> <html lang="ko"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
    <!DOCTYPE html>
    html 문서 유형 지정
    lang="ko"
    사용 언어 명시
    <title></title>
    웹 페이지 제목 표기
    <meta charset="UTF-8">
    문자 인코딩 지정
    <meta name="viewport">
    뷰포트 지정
    <meta name="keywords">
    키워드 설정
    <meta name="description">
    웹 페이지 설명
    <link>
    현재 문서와 외부 자원의 관계 명시
  3. 구획 Section
    <header>
    제목, 로고, 검색창 등 소개 및 탐색에 도움을 주는 구획
    <nav>
    메뉴, 목차, 색인 등 다른 페이지로의 링크를 보여주는 구획
    <section>
    문서의 독립적인 구획
    <article>
    게시판과 블로그 글, 매거진이나 뉴스 기사 등 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
    <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    구획의 제목
    <aside>
    문서의 주요 내용과 간접적으로 연관된 내용을 담는 구획
    <footer>
    작성자, 저작권 정보, 관련 문서 등을 내용을 담는 구획
    <address>
    사람, 단체, 조직 등에 대한 연락처 정보를 담는 구획
  4. 그룹핑 Grouping
    <p>
    paragraph. 문단
    <ol>
    ordered list. 순서가 있는 목록
    <ul>
    unordered list. 순서가 없는 목록
    <li>
    list item. 목록의 항목
    <dl>, <dt>, <dd>
    description list. 설명 목록
    description term. 설명 용어
    description definition. 설명 정의
    <figure>, <figcaption>
    도판
    <blockquote>
    인용문
    <pre>
    preformatted. 영역 설정
    <div>
    division. 영역 설정
    <hr>
    horizontal rule. 수평선
  5. 글 단계 의미론 Text-level Semantic
    <a>
    anchor. 다른 페이지나 같은 페이지의 특정 위치로 연결할 수 있는 하이퍼링크
    <i>
    italic. 기술 용어, 외국어 구절, 등장인물의 생각 등 주위와 구분해야 하는 글
    <em>
    emphasize. 강세가 필요한 글
    <cite>
    창작물이나 저작물 등의 글
    <strong>
    중요성, 긴급성, 심각성을 알리는 글
    <bold>
    주의를 끌기 위한 글
    <q>
    quote. 인용
    <dfn>
    definition. 정의
    <abbr>
    abbreviation. 약자
    <ruby>
    루비
    <rt>
    ruby annotation. 수평선
    <rp>
    horizontal rule. 수평선
    <small>
    덧붙이는 글이나, 저작권과 법률 표기 등의 작은 글
    <sup>, <sub>
    윗첨자, 아래첨자
    <bdi>
    Bi-Directional Isolation. 줄 바꿈
    <bdo>
    Bi-Directional Override. 줄 바꿈
    <br>
    break. 줄 바꿈
    <wbr>
    Word Break Opportunity. 단어 중간에서 행바꿈될 수 있는(line-break) 위치를 정의
    <span>
    의미를 지니지 않고 스타일을 적용하거나 속성값이 같은 요소를 묶을 때 사용
  6. 임베드 Embed
    이미지를 삽입
    <video>
    영상을 삽입
    <audio>
    소리를 삽입
    <source>
    <iframe>
    inline frame. 현재 페이지에 다른 페이지를 삽입
    <map>, <area>
    이미지에 링크
  7. 표 Table
    투모로우바이투게더
    연준 수빈 범규 태현 휴닝카이
    <thead>, <tbody>, <tfoot>
    table head 열의 머리글인 행들의 집합, table body, table foot
    <tr>, <th>, <td>
    table row, table data
    <caption>
    표의 제목
    <col>
    열을 묶는 그룹을 정의
    <colgroup>
    열을 묶는 그룹을 정의
  8. 폼 Form
    <iframe>
    inline frame. 현재 페이지에 다른 페이지를 삽입
    <video>
    영상을 삽입
    <audio>
    소리를 삽입
    <textarea>
    글자를 입력하는 영역
    <progress>
    진행 상태를 표
    <fieldset>, <legend>, <input>, <label>
    진행 상태를 표
  9. 상호작용 Interactive
    <details>, <summary>
  10. 참고 Reference
    1. HTML Living Standard
    2. HTML Tutorial
    3. Basics of HTML