Skip to content

Html_basic.md

Latest commit

 

History

History
129 lines (101 loc) · 5.23 KB

Html_basic.md

File metadata and controls

129 lines (101 loc) · 5.23 KB

웹 표준

주요 특징

  • HTML, CSS, JS의 명확한 분리: 유지보수와 코드 재사용성 향상
  • 시멘틱 마크업 사용: <header>, <article>, <aside> 등 사용하여 문서의 구조 명확히 정의 및 SEO (검색엔진 최적화)
  • 모바일 친화성: 반응형 웹 디자인을 고려하여 다양한 화면 크기에 최적화
  • 데이터 교환: 표준화된 방식으로 데이터 교환 가능
  • 오픈 스탠다드: 웹 표준을 준수하여 웹 애플리케이션의 호환성 보장

Markup Language

Markup Language는 텍스트에 구조와 의미를 부여하기 위해 특정 기호와 태그를 사용하는 언어입니다. 프로그래밍 언어가 아닌 표시용 언어로 사용됩니다.

  • 예시: XML, HTML

HTML (HyperText Markup Language)

  • 웹페이지에서 주로 사용되는 마크업 언어
  • 인터프리터 언어: 웹 브라우저에 의해 해석됨
  • 소스코드 → DOM 트리: 화면에 보여질 때는 소스코드가 아닌 DOM 트리를 통해 렌더링됨

Tag

Tag는 HTML 문서를 구성하는 요소입니다.

  • Block 요소: 태그를 사용하면 자동으로 줄바꿈이 발생하며, 주로 문서의 구조나 레이아웃을 정의합니다.
  • Inline 요소: 태그를 사용하면 한 줄 안에서 다른 인라인 요소와 함께 표시되며, 주로 텍스트와 관련된 요소에 사용됩니다.

Tag의 Attribute (속성)

  • 태그의 속성은 해당 태그에 대한 추가 정보를 제공합니다.
  • 형식: name="value" (여는 태그에 속성으로 기록)
  • 속성 값은 기본적으로 "" (큰따옴표)를 사용하며, '(작은따옴표)도 가능합니다.

Global 속성

모든 태그에서 사용할 수 있는 속성

  • id: 요소의 고유 식별자를 지정
  • class: 여러 요소에 공통적으로 적용할 클래스를 지정
  • style: 인라인 스타일을 정의
  • data-*: 사용자 정의 데이터 속성을 추가

Emmet

Emmet은 HTML, CSS 코드를 빠르게 작성할 수 있게 해주는 툴입니다.

주요 Emmet 단축어

  • ! + Tab: HTML5 문서의 기본 구조 생성
  • >: 하위 요소 생성
  • +: 동급 요소 생성
  • *: 반복 개수 지정
  • #, .: 각각 id와 class 지정
  • () : 그룹핑
  • [attribute]: 속성 지정
  • {} : 텍스트 입력
  • $: 넘버링

목록형 요소

목록형 요소: 관련된 아이템들을 목록화하기 위한 태그들

  • <ul>: Unordered List (순서 없는 목록)
  • <ol>: Ordered List (순서 있는 목록)
  • <li>: List item (목록 항목)
  • <dl>: Definition List (정의 목록)
  • <dt>: Definition Term (정의 항목)
  • <dd>: Definition Details (정의 설명)

테이블 (Table)

테이블은 행과 열을 이용해 데이터를 구조적으로 저장하는 역할을 합니다.

  • <table>: 테이블 요소
  • <tr>: 테이블의 행 (Table Row)
  • <td>: 테이블의 셀 (데이터, Table Data)
  • <th>: 테이블의 헤더 셀 (Table Header)
  • <caption>: 테이블 제목

셀 병합

  • colspan: 가로로 셀 병합
  • rowspan: 세로로 셀 병합

이미지 (img)

이미지를 표현하는 태그입니다.

  • src: 이미지 파일의 경로
  • alt: 이미지를 설명하는 텍스트
  • title: 이미지 추가 정보 제공
  • loading: 이미지 로딩 방식 설정 (lazy, eager)
  • usemap: 이미지맵을 사용할 때 <map>에서 사용하는 이름 지정

링크 (a)

Anchor는 텍스트나 이미지를 클릭해서 다른 문서나 위치, 사이트로 이동하는 기능을 제공합니다.

  • href: 링크의 목적지 URL을 지정
  • target: 링크를 열 때의 창이나 탭을 지정
  • title: 링크에 대한 추가 정보 제공

페이지 내에서 이동

  • 동일한 페이지 내에서 이동하려면 id 속성으로 대상을 생성하고, href에서 #id 형태로 링크를 설정합니다.

폼 (form)

폼은 사용자로부터 데이터를 입력받아 서버로 전송하는데 사용되는 요소입니다.

  • action: 요청을 처리할 서버의 URL 지정
  • method: 폼 데이터를 전송할 방법 (ex: get, post, dialog)
  • enctype: 폼 데이터 인코딩 방식을 지정
  • target: 폼 제출 후 결과를 열 위치 지정
  • name: 폼의 이름을 지정
  • autocomplete: 폼 입력 자동 완성 여부 설정
  • novalidate: 폼 유효성 검사를 비활성화

폼의 하위 태그들

  • <fieldset>: 관련된 입력 요소를 그룹화하여 시각적으로 구분
  • <legend>: <fieldset>의 제목을 정의
  • <label>: 입력 필드에 대한 설명이나 이름을 제공
  • <input>: 사용자로부터 데이터를 입력받기 위한 필드
    • id: CSS나 JavaScript에서 요소를 지정할 때 사용
    • name: 서버로 전송되는 파라미터의 "이름"으로 사용
  • <textarea>: 여러 줄의 텍스트 입력을 위한 필드
  • <select>: 선택할 수 있는 옵션 목록을 제공하는 드롭다운 메뉴
  • <option>: <select> 안에서 선택할 수 있는 개별 옵션
  • <button>: 폼 제출을 위한 버튼 생성