꿈소년의 개발 이야기

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 03 HTML 기본 문서 만들기 본문

Do it 스터디!

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 03 HTML 기본 문서 만들기

꿈소년 2026. 1. 10. 21:31
반응형

DAY 3

🔖 오늘 읽은 범위 :

🔥01/07(수) 진도표 알림
👉🏻공부 내용: 03 HTML 기본 문서 만들기
👉🏻쪽수: 53~79쪽

HTML

  • Hyper Text Markup Language.
  • tag ⇒ 꼬리표.
  • 웹 브라우저에 보여줄 내용에 마크업 하고 문서끼리 링크하는 것.

HTML 구조

  • HTML 문서 구조

      <!DOCTYPE html> <!-- 현재 문서가 HTML 로 작성한 웹 문서라는 뜻 -->
  <html lang="ko"> <!-- 웹 문서의 시작과 끝 -->
    <head> <!-- 웹 문서 해석 정보 -->
      <meta charset="UTF-8">
      <title>웹 개발 입문</title>
    </head>
    <body> <!-- 실제 웹브라우저에 나타나는 내용 -->
      <h1>웹 개발 기초</h1>
      <p>HTML</p>
      <p>CSS</p>
      <p>자바스크립트</p>
    </body>
  </html>

  • html 태그에서 lang="ko" 로 할 경우, “한국어로 된 문서”로 검색 결과 범위를 제한함.

    • 화면 낭독기에서 맞춤 언어로 진행 할 때도 영향을 줌.

  • <head> 태그

    • 웹 브라우저가 알아야 할 문서 정보들 모음.

    • 사용할 스타일 시트 파일도 여기서 연결함.

    • <meta> 태그의 역할

      • 화면에 어떤 글자를 표시할 때 어떤 인코딩을 사용할지 지정.

      • 웹 사이트 키워드 지정. 간단한 설명 및 제작자 정보 지정.

      • 검색 엔진에서 사이트 검색 시 참고. 검색 엔진에 따라 참고 정보가 다름.

        <meta name="keywords" content="html의 구조"> // 웹 문서의 키워드
<meta name="description" content="html의 구조를 알아봅시다."> // 웹 문서 설명
<meta name="author" content="Fog"> // 웹 문서의 소유자나 제작자

    • 문서 제목 지정 <title>: 웹 브라우저 제목 표시줄에 표시 됨. 즐겨찾기 할 때 추가 되는 제목.

  • <body> 태그

    • 실제 웹 브라우저에 표시되는 내용.

HTML 파일 만들기

  • VS Code 에서 html 확장자로 파일 생성.
  • 편집기에서 ! 를 입력한 후 엔터 치면 기본 태그가 자동 입력 됨.

라이브 서버 설치 및 수정 결과 바로 확인하기

태그 작성 시 기억할 점

  • 태그는 소문자로 씁니다.
  • 여는 태그와 닫는 태그를 명확히 입력합니다.
  • 적당하게 들여쓰기를 합니다.
  • 일부 태그는 속성과 함께 사용합니다.
    • <img src="images/salad.jpg" alt="Lemon" width="100">
    • 태그 속성 순서는 상관없음.
    • 태그와 속성을 함께 알아야 함.

웹 문서 구조 시맨틱 태그

  • 시맨틱 = 의미론적인, 의미가 통하는
  • 필요한 이유
    • 코드만 보고도 용도 파악이 쉽기 때문에 사이트 구조 이해를 제대로 하게 됨.
    • 문서 구조가 정확해져 문서 표현하기 쉽기 때문.
    • 검색엔진이 검색 할 때 필요한 내용을 찾기 쉽다.
  • 주요 시맨틱 태그
    • <header> : 헤더 영역. 맨 위쪽 이나 왼쪽, 검색 창이나 사이트 메뉴 삽입.
    • <nav> : 내비게이션 영역. 웹 문서 위치에 영향을 받지 않음. 헤더, 푸터, 사이드 바 안에 포함 가능하고 독립 사용 가능.
    • <main> : 메인 콘텐츠 영역. 웹 문서 핵심 내용 넣기.웹 문서마다 다르게 보여주는 내용으로 구성. 웹 문서에서 한번만 사용 가능.
    • <article> : 독립적인 콘텐츠 영역. 웹에서 실제로 보여주고 싶은 내용을 넣음. 웹 콘텐츠 항목. 여러 개 사용 가능하고, 내부에 <section> 태그 넣을 수 있음. 블로그의 포스트 처럼 독립된 콘텐츠로 사용.
    • <section> : 콘텐츠 영역. <article> 태그와 비슷함. 몇 개의 콘텐츠를 묶을 때 사용.
    • <aside> : 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바 영역. 필요한 경우에만 사용함.
    • <footer> : 웹 문서 맨 아래쪽에 있는 푸터 영역. 사이트 제작 정보, 저작권 정보 또는 연락 등등. <header>, <section>, <article> 등을 사용 가능함.
    • <div> : 다른 시멘틱 태그가 나오기 전에 헤더, 내비게이션, 푸터 등을 구별할 때 사용했음. 문서 구조를 정의 할 때, <div> 대신에 시맨틱 태그 사용하는 것이 좋음.
      • id 나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용함. 영역을 구별하거나 스타일로 문서 꾸미는 걸로 사용.

HTML 주석 달기

<!-- 주석 내용 -->

풀이

  • 풀이

      <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <header>
      <h1>My Blog</h1>
    </header>
    <main>
      <article>
        <h2>Blog Post Title</h2>
        <p>This is a blog post.</p>
      </article>
    </main>
    <aside>
      <h3>About Me</h3>
      <p>This is some test about me.</p>
    </aside>
    <footer>
      <p>Copyright 2023</p>
    </footer>
  </body>
  </html>
  • 시맨틱 태그 속성을 좀 더 공부할 것.
  • 라이브 서버는 편리해서 앞으로 많이 사용할 듯 함.

🤟소감 3줄 요약

  • 알아야 할 태그들이 너무 많아…
  • MDN 문서 참고해서 봐야지.
  • 책에서 알려준 중요한 태그 키워드는 알고 가자.
저작자표시 비영리 변경금지 (새창열림)

'Do it 스터디!' 카테고리의 다른 글

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기(2)  (0) 2026.01.10
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기  (0) 2026.01.10
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 02장 웹 개발 시작하기  (0) 2026.01.10
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 01장 웹은 어떻게 움직일까?  (0) 2026.01.10
'Do it 스터디!' Related Articles more