TIL)01 HTML 기초 문법

들어가기 앞서..

TIL은 Today I Learned로서 배웠던 정보를 간략하게 정리하는 글입니다.
참고로 배운 내용은 https://poiemaweb.com/html5-syntax
poiemaweb홈페이지를 참고 하였습니다.


무엇을 배울까 ?

HTML기본 문법, 주석, 요소 , 빈요소, 어트리뷰트, 속성


HTML 기본 문법

HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다.

다음은 HTML은 기본 코드이다.
  <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>반갑습니다!</p>
  </body>
  </html>  

- HTML5 문서는 반드시 !DOCTYPE html 으로 시작하여 문서 형식을 HTML5로 지정한다.
- 실제적인 HTML document은 2행부터 시작되는데 (html)과 (/html) 사이에 기술한다.
- (head)와 (/head) 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 정보들은 브라우저에 표시되지 않는다.
- 웹브라우저에 출력되는 모든 요소는 (body)와 (/body) 사이에 위치한다.

요소 (Element)

HTML 요소는 시작 태그(start tag)와 종료 태그(end tag) 그리고 태그 사이에 위치한 content로 구성된다.

빈 요소 (Empty Element)

빈 요소는 단일로 행동하며 요소를 닫는 행위를 하지 않는다
대표적인 빈요소는 아래와 같다.

  • br
  • hr
  • img
  • input
  • link
  • meta

    어트리뷰트 (Attribute) 속성

     어트리뷰트는 속성 값이다. 속성값으로 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다. 어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.
    <img src="html.jpg" width="104" height="142">

    위의 요소는 img요소로 파일명과 넓이, 높이의 속성을 가지고 있다.

    글로벌 어트리뷰트 (HTML Global Attribute)

    글로벌 어트리뷰트는 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다.

  • id - 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다.
  • class - 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
  • hidden - css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
  • lang - 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
  • style - 요소에 인라인 스타일을 지정한다.
  • tabindex - 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
  • title - 요소에 관한 제목을 지정한다.

    주석 (Comments)

    주로 개발자에게 코드를 설명하기 위해 사용되며 브라우저 화면에 표시되지 않는다.
    <!--주석은 화면에 표시되지 않는다.-->

  • 좋은 웹페이지 즐겨찾기