# HTML 한눈에 보기 ## 0. HTML이란? HTML(HyperText Markup Language)은 **웹페이지의 구조를 정의**하는 언어에요.\ HTML 구조가 잘 짜여있다면, 검색엔진이 웹페이지를 올바르게 추천해줘요. ## 1. HTML 구조 ```html 페이지 제목 ``` * **``**\ 이 파일이 HTML 문서임을 선언해요.\ 선언하지 않으면 CSS와 JavaScript가 제대로 동작하지 않을 수 있어요. * **``**\ 웹페이지의 기본 정보를 담는 영역이에요.\ 문자 인코딩, 뷰포트 설정, 페이지 제목, CSS 파일 연결 등을 넣어요. * **``**\ 화면에 실제로 보이는 내용을 담는 영역이에요.\ 각종 태그들을 여기에 넣고, 맨 아래에 JavaScript 파일을 연결해요. ## 2. 태그 HTML은 태그들로 이루어져있어요. 태그는 두 종류로 나뉘어요. * Paired 태그: 닫힘태그 있음\ 예: \\ * Self-Closing 태그: 닫힘태그 없음\ 예: \
태그 안에는 속성(attribute)이 들어가요. 형식: 속성이름="속성내용" *** ### 2.1. 글 * **`

`**\ 제목(heading) 태그에요.\ `
`까지 있고 숫자가 커질수록 글씨가 작아져요. * **`

`**\ 하나의 문단을 나타내는 단락(paragraph) 태그에요. * **``**\ 특별한 의미는 없고, 글의 일부에 스타일이나 처리를 할 때 쓰는 태그에요. * **``**\ 중요한 부분을 강하게 강조하는 태그에요.\ 읽어줄 때도 강조돼요. * **``**\ 의미상 중요한 부분을 강조하는 태그에요.\ 기본으로 기울임 스타일이 적용돼요. * **`
`**\ 줄을 바꾸는 태그에요.\ 엔터처럼 문장을 나눠요. *** ### 2.2. 링크와 이미지 * **``**\ 다른 페이지나 주소로 이동하는 링크 태그에요.\ `href` 속성에 이동할 주소를 써요. * **``**\ 이미지를 보여주는 태그에요.\ `src` 속성에 이미지 주소를 써요. *** ### 2.3. 리스트 * **``**\ 순서가 없는 리스트(unordered list)에요. * **`
    `**\ 순서가 있는 리스트(ordered list)에요. * **`
  1. `**\ 리스트 안에 들어가는 개별 항목(list item)이에요. *** ### 2.4. 테이블 테이블안에 줄(table row)을 넣고, 칸(table data)을 넣어요. ```html ← 표 시작 ← 1번째 줄 ← 2번째 줄
    칸1 칸2
    칸3 칸4
    ``` *** ### 2.5. 입력란 * **`
    `**\ 입력한 내용을 자바스크립트로 제출하기 위해 전체를 감싸는 태그에요. * **``**\ 입력칸 이름을 붙이는 태그에요.\ `for` 속성에는 연결할 `input`의 `id`를 써요. * **``**\ 기본 입력 태그에요.\ `type`은 `"text"`, `"email"`, `"password"`, `"checkbox"`, `"date"`가 있어요.\ 각각 한줄, 이메일, 비밀번호, 체크, 날짜 입력을 뜻해요.\ `placeholder`는 비어 있을 때 보여줄 글이에요. * **``**\ 여러 줄의 글을 입력하는 태그에요. * **``**\ 여러 항목 중 하나를 고르는 드롭다운 태그에요. * **``**\ 제출이나 동작 실행을 위한 버튼 태그에요.\ `type`은 `"submit"`, `"reset"`, `"button"`이 있어요.\ `onClick`에는 버튼을 눌렀을 때 실행할 함수를 써요.\ 함수 이름 뒤에 괄호도 같이 써요. (html은 문자열 자체를 저장하고 실행해요) * **`
    `**\ 입력 폼에서 관련된 항목들을 하나의 그룹으로 묶는 태그에요. *** ### 2.6. 시맨틱 태그 시맨틱 태그는 태그의 이름만 봐도 역할과 위치를 알 수 있도록 만든 태그에요.

    https://yozm.wishket.com/magazine/detail/2495/

    * **`
    `**\ 페이지나 영역의 머리부분이에요. 제목, 로고, 메뉴가 들어가요. * **`