http://www.yes24.com/Product/Goods/96674934

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - YES24

웹 분야 1위! 그만한 이유가 있다!키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다!웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹

www.yes24.com

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 책을 공부하며 요약・정리한 내용입니다.

HTML(Hyper Markup Language)이란?

: 웹 문서를 만드는 언어

하이퍼텍스트(HyperText)

: 문서를 서로 연결해주는 링크

HTML 문서의 기본 구조

<!DOCTYPE html>     <!-- 1 --> 
<html lang="ko">    <!-- 2 --> 
    <head>          <!-- 3 --> 
        <meta charset="UTF-8"> <!-- 4 --> 
        <title>HTML 기본 문서</title> <!-- 5 --> 
    </head>
    <body>          <!-- 6 --> 
        <h1>프런트엔드 웹 개발</h1>
        <hr>
        <p>HTML</p>
        <p>CSS</p>
        <p>자바스크립트</p>
    </body>
</html>

<!DOCTYPE html> : 문서 유형(document type)을 지정하는 태그, HTML5 언어로 작성한 문서임을 나타냄
<html>~</html> : 웹 문서의 시작과 끝을 나타내는 태그, </html> 태그 뒤에는 아무 내용도 없어야 한다.
<head>~</head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분
<meta> : 웹 문서와 관련된 정보를 지정할때 사용, 여기서는 UTF-8 인코딩 방식을 지정
<title> : 문서 제목을 나타내는 태그
<body>~</body> : 실제 웹 브라우저에 나타내는 내용

3.4. 시맨틱 태그

HTML 태그는 이름만 봐도 의미를 알 수 있어 시맨틱(semantic) 태그 라고 한다.

시맨틱 태그가 필요한 이유

웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 인지 쉽게 알 수 있기 때문
문서의 구조가 정확히 나눠지므로 다양한 기기에서 웹 문서를 표현하기 쉽다.
웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다. 본문 내용을 검색해야 할때 메뉴나 푸터 영역이 아니라 본문 영역 안에서만 검색 가능

주요 시맨틱 태그

<header>

헤더 영역 의미

<nav>

링크를 만듬

e.g.

<header>
  <div id="logo">    <!-- 로고 영역 -->
    <a href="#"><h1>Dream Jeju</h1></a>
  </div>

  <nav>              <!-- 네비게이션 영역 -->
    <ul id="topMenu">
      <li><a href="#">단체 여행</a></li>
      <li><a href="#">맞춤 여행</a></li>
      <li><a href="#">갤러리</a></li>
      <li><a href="#">문의하기</a></li>
   </ul>
  </nav>
</header>

<main>

웹 문서에서 핵심이 되는 내용 메뉴, 사이드 바, 로고 처럼 페이지 마다 똑같이 들어간 정보는 넣지 않고 웹 문서마다 다르게 보여주는 내용으로 구성.

<article>

웹에서 실제로 보여주고 싶은 내용으로 구성

예를 들어 블로그의 포스트, 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목

<section>

콘텐츠 영역을 나타냄

<section>태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고

<article>태그는 독립된 콘텐츠로 쓴다.

단순히 스타일을 적용하려고 콘텐츠를 묶으려면 <div>태그 사용

e.g.

<main class="contents">

  <!-- 두개의 <section>태그로 영역을 나눔 -->
  <section id="headling">
    <h2>몸과 마음이 치유되는 섬</h2>
  </section>
  <section id="activity">
    <h2>다양한 액티비티가 기다리는 섬</h2>
  </section>
</main>

<aside>

사이드 바른 만듬 필수 요소는 아니고 필요한 경우에만 사용

<footer>

e.g.

<footer>
  <div id="bottomMenu">
    <ul>
      <li><a href="#">회사 소개</a></li>
      <li><a href="#">개인정보처리방침</a></li>
      <li><a href="#">여행약관</a></li>
		  <li><a href="#">사이트맵</a></li>
    </ul>
  </div>
</footer>

<div>

여러 소스를 묶는데 사용 <div id=”header”>, <div class=”detail”> 이렇게 id나 class 속성을 사용해 문서 구조를 만들거나 스타일을 적용할 때 사용

e.g.

<header>
  <div id="logo">
    <a href="#"><h1>Dream Jeju</h></a>
  </div>
</header>

https://www.instagram.com/p/CMD2yIrDa3c/?utm_source=ig_web_copy_link

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

저작자표시

'CS > HTML CSS' 카테고리의 다른 글

4. Margin, Padding (0)	2022.05.07
3. Box Model 기초 (0)	2022.05.07
2. 클래스, 아이디, 주석 (0)	2022.05.06
1. html/css 기본 태그 (0)	2022.05.06
텍스트 관련 태그 (0)	2022.04.05

HTML 기본 문서 만들기

HTML(Hyper Markup Language)이란?

하이퍼텍스트(HyperText)

HTML 문서의 기본 구조

시맨틱 태그가 필요한 이유

주요 시맨틱 태그

<header>

<nav>

<main>

<article>

<section>

<aside>

<footer>

<div>

'CS > HTML CSS' 카테고리의 다른 글

티스토리툴바