HTML - 1

06 Jan 2021

* HTML 이란?

Entity

맨아래

1. HTML 은 Hyper Text Markup Language 의 줄임말 이다.
=> Hyper Text 를 만드는 언어, 프로그래밍 언어X , 마크업 언어 O
- Hyper : 속도가 빠르다(빨리연결되어 넘어간다)
=> Hyper Text :하이퍼링크를 포함해서 순차적으로 구성되지 않고 링크연결 중심으로 구성된 문서, 하이퍼링크를 통해 독자가 한문서에서 다른문서로 즉시 접근할 수 있는 텍스트이다.인터넷과 결합되어있다. 링크에 따라 차례가 바뀌는 임의적이면서 나열형인 구조를 가진다.
- Markup : 표시 => Markup Language : 표시 - 콘텐츠 영역을 표시,표시하는 언어

2. HTML 은 웹페이지의 구조를 표현한다.
3. HTML은 Element로 구성 => Element는 콘텐츠 여역을 표시하는 도구(표식) : Element 표식은 브라우저에게 콘텐츠 종류를 알려주는 역할 : "이것은 ~ 콘텐츠 이다"

* HTML 요소(Element)

 : 시작 태크와 종료태그로 그루핑하는 구성 <tag이름>컨텐츠입력</tag이름> * 종료태크는 꼭 넣어야 한다.

★ 일부 HTML 요소에는 콘텐츠가 없다. => 빈 요소(Empty Element) : 콘텐츠가 없는 요소 => 빈요소에는 종료태그가 없다.
=> 1. 줄바꿈 - br tag <br>
   2. 이미지 콘텐츠 표시<img src ="이미지 경로/파일이름">

HTML은 항상 소문자 태그 이름을 사용한다.

* HTML 기본구조

1. <!DOCTYPE> 선언 : <! DOCTYPE html> Document Type - 문서 유형(종류) * 대문자로 선언*, html 문서의 유형을 정의 - html5 유형으로 선언
2. <html>  : html 문서의시작
   <head> : html 문서의 메타 정보들이 포함됨 (메타정보 : 현재 html 문서를 설명)    
   </head>
   <body> : html 문서의 실제 콘텐츠들이 포함됨
   </body>
   </html> : html 문서의 끝

  ★ Nested/포함관계/중첩관계
   - 시작태그-종료태그 사이에 여러 태그나 콘텐츠가 포함 될 수 있음
   - 요소를 중첩시켜서 입력할때 : 줄바꿈 - 여러줄
   - 가독성 고려해서 들여쓰기를 활용해야함 - 사용 키 : tab 키를 사용 / 내어쓰기 : shift + tab

* HTML Attribute(속성)

HTML 요소에 대한 추가 정보를 제공한다.
작성 : 항상 시작태그에 작성
문법(형식 : Syntax) : name = "value"
  - href : 링크로 이동페이지의URL을 지정 => <a태그 href="http://www.naver.com">
  - src : 파일의 경로를 표시하는 속성 지 => <이미지태그 src = "경로">

  웹페이지에서 표현할 수 있는 콘텐츠의종류(물리적의미)

텍스트
이미지
동영상
사운드
어플리케이션

* 텍스트 콘텐츠 관련 요소(Element)

  1. HTML 제목(heading)
  : 태그 : h
   - 수준(Level) : 1 to 6
   - h1 - h6 : h1(큰제목),h6(작은제목) - 숫자가 커질수록 작은 수준의 제목

  2. 단락
    - 단락 태그 : p => Paragraph
    - 구분선(텍스트 내용을 구분) 표시 태그 : hr => Horizontal Rules,Empty Element
    - 단락, 문장 표시 방식 : Enter 줄바꿈,space 공백은 개수에 상관없이 공백 1칸으로만 인식
    - 줄바꿈 태그 : br => break (Empty Element)
    - 공백 1칸 : &nbsp;
    - 입력된 모양 그대로 출력 : <pre>

  3. 링크
  : 태그 : a => Anchor
    * href : Hypertext Reference - 링크 연결되는 목적지의 주소
    * url : Uniform Resource Locator - 자원의 위치를 표현하는 규약(방식)
    * target"_blank" : 연결된 링크 목적지를 새탭/새창으로 열게 해주는 속성
    * 책갈피(Bookmark) 기능 : 같은 페이지 안에서 원하는 위치로 이동할 때
          => 목적지를 id Attribute를 사용해서 표시
          ex) 링크 : <a href="#target"></a>
              목적지 : <h3 id="target"></h3>
              # : hash - 이동
  4. 목록
    - Ordered list : 순서있는 목록 => 번호를 사용해서 순서를 표현
    <ol>
      <li></li> : List Item => 각 항목
    </ol>
  - Unordered list : 순서없는 목록 => 기호를 사용해서 순서와 상관없게 표현
    <ul>
      <li></li>
    </ul>
  - Description list : 설명 목록 => 주제에 대해서 부연설명이 있는 형태
    <dl>
      <dt>주제어</dt> : Description Title
      <dd>주제어에 대한 설명글</dd> : Description Data
    </dl>

  5. 테이블 (table generator - https://www.tablesgenerator.com)
    - table
    - tr : table row : 행
    - th : table heading : 열 제목
    - td : table data : 셀

  6. Entity
    - HTML 예약어 : HTML 요소 기능을 가진 예약 문자
      => 공백 : &nbsp; . <(작다-less than) : &lt; ,>(크다-greater than) : &gt;