[웹 개발 기초 HTML] 3장 - HTML 기본

3.1 HTML 코드 작성

3.2 HTML 파일 실행

  - HTML 파일 직접 실행

  - Copy Path 이용

    - 파일 절대 경로 이용

  - Live Server

3.3 HTML 기본 예제

  - HTML Heading

  - HTML Paragraphs

  - HTML Links

    - 동일한 페이지 내의 특정 위치 지정 (프래그먼트)

    - 웹페이지 링크

    - 자바스크립트로 구현된 함수 연결

  - HTML Images

3.4 HTML 요소 (Element)

  - 시작 태그와 종료 태그 사이에 콘텐츠 정의

3.5 HTML 속성 (Attributes)

  - href 속성

  - src 속성

    - 이미지 파일의 물리적인 위치

    - JS 파일의 물리적인 위치

  - width와 height 속성

  - alt 속성

    - img 태그에서 사용되는 속성, src 속성으로 삽입된 이미지에 대한 설명 정의

    - 검색엔진에서 이미지 검색 및 분류시 사용됨

    - 시각 장애인분들을 위한 스크린 리더기가 웹 페이지 해석 시 사용됨

  - style 속성

    - 요소마다 사용할 수 있는 style 속성

    - 요소마다 공통적으로 사용되는 style 속성

    - 특정 요소에서만 사용 가능한 style 속성

  - lang 속성

    - 웹 페이지의 언어가 어떤 언어인지 정의

    - 글로벌 서비스 대상으로 하는 웹 페이지에서는 로그인 한 사용자의 언어에 따라 웹 페이지에 나오는 내용을

       해당 언어로 제공해야 하기 때문에 lang 속성에 언어를 따로 지정하지 않고 사용하는 경우도 많음

  - title 속성

    - 요소에 대한 추가적인 설명, 정의를 위해 사용

    - ex. title에 정의한 내용이 사용자가 버튼에 마우스 hover 시 보여짐

3.6 HTML 스타일 (Styles)

  - style 속성

    - 하나 이상의 property와 value의 쌍을 정의해서 사용

  - Background Color (배경색)

    - 콘텐츠를 담을 수 있는 모든 태그에서 사용 가능

  - Text Color (글자색)

  - Fonts (폰트)

    - font-family property

  - Text Size (폰트 크기)

    - font-size property

  - Text Alignment (문자 정렬)

    - text-align property

3.7 텍스트 포맷팅 관련 요소

  - <b>와 <strong> 요소

    - <b>: 볼드체

    - <strong>: 볼드체, 텍스트 강조, 검색 엔진/웹 해석기가 텍스트 강조하는 의미로 해석함

  - <i>와 <em> 요소

    - <i>: 이탤릭체

    - <em>: 이탤릭체, 텍스트 강조, 검색 엔진/웹 해석기가 텍스트 강조하는 의미로 해석함

  - <small> 요소

    - 태그 안에 작성된 텍스트의 크기 작게 나타냄

  - <mark> 요소

    - 형광펜/하이라이트 효과

  - <del> 요소

    - 취소선

  - <ins> 요소

    - 밀줄

  - <sub> 요소

    - 아래 첨자

  - <sup> 요소

    - 위 첨자

3.8 참조, 인용 관련 요소

  - <blockquote> 요소

    - 인용된 외부 내용 다룰 때 사용

    - ex. 외부 뉴스, 외부 저널에 나온 내용 인용

    - cite attribute(속성)을 활용하여 어떤 웹 사이트에서 인용한 것인지에 대한 URL 정보 정의

    - 들여쓰기 적용되서 표현됨

  - <q> 요소

    - 인용되는 내용이 짧을 경우 사용

    - 쌍따옴표 적용되서 표현됨

  - <abbr> 요소

    - 약어 나타낼 때 사용

    - title 속성 사용하여 약어의 full 명칭 정의 가능

  - <address> 요소

    - 주소 나타낼 때 사용

  - <cite> 요소

    - 책, 소설, 노래, 영화, 미술품, 조각 등 작품에 대한 타이틀(제목) 나타내는 용도로 사용

    - 이탤릭체 적용되서 표현됨

  - <bdo> 요소

    - dir 속성에 정의된 텍스트 방향에 맞게 <bdo> 태그 안에 작성된 텍스트 표현

    - ex. dir 속성의 rtl 속성 값은 right to left 의미

3.9 주석 처리

  - 주석: 구현된 프로그래밍 코드에 대한 설명/사용법 다는 행위

    - 때로는 프로그램 특정 코드 실행 잠시 막는 용도로 사용

  - 코드에 대한 설명

    - 협업 시 내가 구현한 코드를 누가 봐도 충분히 이해할 수 있도록 주석 다는 행위 습관화

    - 나중에 내가 구현한 코드를 내가 다시 볼 때도 쉽게 이해하는데 도움됨

  - 프로그램 실행 막기

  - 주석 처리 방법

3.10 하이퍼링크

  - 웹 페이지 이동

    - target 속성

      - _self: default, 같은 브라우저 창/탭에서 열림

      - _blank: 브라우저 새 창/탭으로 열리게 됨

      - _parent: 부모 프레임에서 열림

      - _top: 최상위 프레임, 즉 현재 보고 있는 브라우저 윈도우에서 열리게 됨

  - 북마크 (페이지 내의 특정 위치로 이동)

    - href 속성에 이동할 위치에 있는 HTML 요소의 id 값 지정

    - #요소 id 형태로 속성 값 지정해야 함

  - 자바스크립트 함수 호출

3.11 표(table)

  - 표 삽입

    - <table>

      - <tr>: 행

      - <th>, <td>: 열을 구성하는 각각의 셀 (cell)

        - <th>: 표에서 각 열의 타이틀 (볼드체로 표현됨)

        - <td>: 각 열의 실제 값

  - 표 디자인

    - border-collapse: collapse

      - 중첩된 선 하나로 통합

  - 셀 병합

    - rowspan 속성: 행의 셀 병합

    - colspan 속성: 열의 셀 병합

  - <thead>, <tbody>, <tfoot>

    - <thead>: 열의 제목, 표의 헤더로 묶어줌

    - <tbody>: 데이터 들어가는 행들 묶어줌

    - <tfoot>: 표에서 집계 같은 요약 정보 들어가는 행들 묶어줌

3.12 목록

  - 순서 없는 목록

    - <ul>

      - <li>

  - 순서 목록

    - <ol>

      - <li>

  - 설명 목록

    - 용어에 대한 설명을 나타내는 용도로 사용

    - <dl>: description list 태그

    - <dt>: description list의 term 태그

    - <dd>: description list의 description 태그

3.13 Block & Inline

  - Block 요소

    - 항상 새로운 줄에서 시작

    - 화면 넓이 만큼 공간 차지

    - 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비 차지

    - ex. <div>, <p>, 

  - Inline 요소

    - 새로운 줄에서 시작하지 않고, 줄의 어느 곳에서나 시작 가능

    - ex. <span>

---

[Reference]

Source Code - HTML ch 03

개발자의 품격 (유튜브) - HTML