HTML

  • 웹 문서를 만드는 언어
  • Hyper Text Markup Language
    • HyperText = 문서를 연결해 주는 링크
    • Markup = 표시한다
  • 태그 : 웹 브라우저가 어느 부분이 제목, 텍스트, 또는 표인지 구별할 수 있도록 꼬리표를 붙인 것

HTML의 기본 구조

  • <!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻
    • 문서 유형을 지정하는 태그
  • <html>~</html> : 웹 문서의 시작과 끝을 나타내는 태그
    • 웹 브라우저가 <html>을 만나면 </html>까지 소스를 읽어 화면에 표시한다.
    • </html> 뒤에는 아무 내용도 없어야 한다
  • <head>~</head> : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분
    • 보통 웹 브라우저의 화면에는 보이지 않는다.
    • 문서에서 사용할 스타일 시트 파일을 연결하기도 함
    1. <meta> 문자 세트와 문서 정보가 들어있는 태그
      • 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용
        • 작성자, 날짜, 키워드(본문에 나타나지 않는 일반 정보)
      • 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정
        • 웹 서버는 영어가 기본이므로 한글을 표시할때 UTF-8이라는 문자 세트를 사용한다고 웹 브라우저에게 알려줘야함
          • <meta charset=”UTF-8”>
      <meta name="keywords" content="html의 구조"> //웹 문서의 키워드
<meta name="description" content="html의 기본 구조"> //웹 문서의 설명
<meta name="author" content="Garden Hong"> //웹 문서의 소유자나 제작자
    2. <title> 문서 제목을 나타냄
      • <title>과 </title>사이에는 웹 문서의 제목을 입력한다.
        • <title>HTML 기본 문서</title>
      • 입력받은 제목은 웹브라우저의 제목 표시줄에 표시된다.
  • <body>~</body> : 실제로 웹 브라우저 화면에 나타나는 내용
💡 ! + tab + enter로 기본 서식을 바로 입력할 수 있다.

시맨틱 태그

웹 문서의 구조

  1. 헤더 영역
    • 네비게이션 영역
  2. 본문 영역
  3. 사이드 바
  4. 푸터 영역

시맨틱 태그의 필요 이유

  1. 시맨틱 태그를 사용하면 웹 브라우저가 HTML의 소스 코드만 봐도 어느 부분이 제목이고, 본문 내용인지 쉽게 알 수 있기 때문에 웹 사이트 사용자에게 더 정확한 내용을 전달할 수 있다.
  2. 문서 구조가 나누어져서 다양한 화면에서 웹 문서를 표현하기 쉬워진다.
  3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.

주요 시맨틱 태그

  • <header> 헤더 영역
  • <nav> 네비게이션 영역
    • 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.
    • 웹 문서의 위치에 영향을 받지 않으므로, 헤더나 푸터, 사이드 바 안에 포함될 수도, 독립되어 사용될 수도 있다.
    • <nav> 태그를 여러개 사용할 경우 각각 id 속성을 지정하여 내비게이션 마다 다른 스타일을 적용할 수 있다.
  • <main> 핵심 콘텐츠
    • 메뉴, 사이드바, 로고처럼 페이지마다 똑같이 들어가는 정보가 아닌 웹 문서마다 다르게 보여주는 내용으로 구성된다.
    • 웹 문서에서 한번만 사용할 수 있다.
  • <article> 독립적인 콘텐츠
    • 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 말함
    • 문서 안에는 <article>을 여러 개 사용할 수 있고, 이 안에는 <section>태그를 넣을 수도 있다
  • <section> 콘텐츠 영역
    • 몇 개의 콘텐츠를 묶는 용도로 사용
  • <aside> 사이트 바 영역
  • <footer> 푸터 영역
    • 사이트 제작 정보나 저작권 정보, 연락처들을 넣는다.
    • 푸터 영역에는 다른 시맨틱 태그를 모두 사용할 수 있다.
  • <div> 여러 소스를 묶음
    • 시멘틱 태그가 나오기 전에는 해더나, 내비게애션, 푸터를 구별할 때 <div>태그를 사용했다
    • <div id = “header”>나 <div class = “detail”>처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다.
    • ⇒ 영역을 구별하거나 스타일로 문서를 꾸밀 때 사용

'프론트엔드 > HTML' 카테고리의 다른 글

웹 문서 입력 양식 지정하기  (0) 2022.09.16
웹 문서 입력 방법  (0) 2022.09.16

티스토리툴바