July 20, 2022

모던 웹을 위한 HTML5+CSS3 바이블(1)

🍎 들어가기에 앞서

이 글은 모던 웹을 위한 HTML5+CSS3 바이블을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏

📖 1. HTML5 개요

웹의 역사

월드 와이드 웹(World Wide Web)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 정보 공간을 의미합니다. 인터넷은 전 세계를 연결하는 국제 정보 통신망이고 웹은 그 위에서 작동하는 서비스로 서로 구분되는 개념입니다.

플러그인

웹 브라우저의 경쟁으로 웹은 엄청난 속도로 발전했습니다. 웹 표준을 지정하는 W3C가 그 속도를 따라가지 못했을 정도였습니다. 이에 불만을 느낀 기업들이 플러그인을 만듭니다. 플러그인은 웹 브라우저와 연동되는 특정 프로그램을 사용자 PC에 추가로 설치해 웹 브라우저의 기능을 확장하는 방법입니다.

웹 2.0의 시대

인터넷은 점점 사용자끼리 뭉쳐 새로운 콘텐츠를 개발할 수 있는 공간으로 발전합니다. 이렇듯 다른 사용자와 함께 새로운 콘텐츠를 창조할 수 있게 된 시대를 웹 2.0 시대라고 부릅니다. 모든 웹 사이트에 플러그인이 들어가면서 웹 사이트는 점점 무거워지게 됩니다.

HTML5를 공부해야하는 이유

디바이스의 운영체제에 따라 각각의 운영체제에 맞는 프로그램을 개발해야합니다. 하지만 운영체제에 종속되지 않고 웹에서 동작하는 프로그램이라면 모든 디바이스에서 사용할 수 있습니다.

일렉트론(electron)

깃헙에서 아톰(atom) 에디터를 만들기 위해 아톰 쉘이라는 HTML5 기반의 데스크톱 애플리케이션 개발 엔진을 개발합니다. 이 엔진이 이후 일렉트론이 됩니다. 이 엔진을 통해 스카이프, 비주얼 스튜디오 코드(오왕), 슬랙 등이 개발되면서 유명해졌습니다.

리액트 네이티브(React-Native)

페이스북에서 개발한 엔진으로 모바일 애플리케이션을 만드는 것에 특화되어있습니다. 페이스북, 인스타그램, 핀터레스트, 스카이프, 우버 등이 모두 리액트 네이티브로 개발되었습니다. 다시 말해, HTML5를 알면 운영체제의 영향없이 모바일 애플리케이션을 만들 수 있습니다! 🥇

📖 2. HTML5 태그 기본

HTML5 페이지 구조

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Jayden</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html>태그는 웹 브라우저가 현재 웹 페이지가 HTML5 문서임을 인식하게 만들어줍니다.
<html>태그는 모든 HTML 페이지의 루트 요소로 lang 속성을 입력할 수 있습니다. 이 때, lang 속성은 실제 웹 브라우저가 동작하는데 영향을 주지 않고 단지 검색 엔진이 웹 페이지를 탐색할 때 어떠한 언어로 만들어져 있는지 쉽게 인식하게 만들어줍니다.
<head>태그는 body 태그에 필요한 스타일시트와 자바스크립트를 제공하는데 사용됩니다.
- head 태그에 들어가는 태그 : meta, title, script, link, style, base (이 외의 태그는 브라우저가 자동으로 해당 태그를 body 태그 내부로 옮깁니다.)
<body>태그는 사용자에게 보이는 실제 부분입니다.

글자 태그

앵커 태그

<a href="#">Jayden</a>
<a href="#smite">Move to smite</a>
<div id="smite">Smite</div>

빈 링크 : a 태그는 본래 가지고 있는 하이퍼링크 기능을 제거하고 사용하는 경우가 있습니다. 이 때, 웹 표준 상 href 속성을 반드시 입력해야하기 때문에 #을 입력합니다.
페이지 내부 이동 : 위와 같이 a태그의 href 속성에 이동하고 싶은 태그의 id를 #과 함께 입력하면 해당 장소로 이동할 수 있습니다.

입력 양식 태그

<form method="get">
  <!-- 또는 'post' -->
  <input type="text" />
  <input type="submit" />
</form>

<form>의 method
- GET : 주소에 데이터를 입력해서 전달(? 뒤에 오는 쿼리형태)합니다. 그렇기에 크기가 한정되어있습니다.
- POST : 별도로 택배를 붙여 데이터를 전송하는 방식으로 데이터 용량에 제한이 없습니다.(주소에 데이터가 입력되지 않습니다.)
<input>태그는 사용자에게 정보를 입력받는 기능을 수행하는 태그입니다.(클라이언트에게 입력받은 데이터를 서버로 전송)

⭐ 공간 분할 태그

<div> 태그는 block 형식으로 공간을 분할하고 태그는 inline 형식으로 공간을 분할합니다.

block 형식 : 블록을 쌓듯 공간이 배치되는 형태입니다. 해당하는 태그는 div, h1~h6, p, 목록 태그, 테이블 태그, form 태그가 있습니다.
inline 형식 : 한줄로 쭈우우욱 배치되는 형태입니다. 해당하는 태그는 span, a, input, 글자 형식 태그가 있습니다.

🌟 HTML5의 시멘틱 구조 태그

시멘틱(semantic)은 의미론적이라는 의미로 말 그대로 기존에는 div로만 나타내는 태그들에 각각의 의미(역할)를 부여하는 것을 말합니다.

header : 헤더
nav : 내비게이션
aside : 사이드 공간
section : 여러 중심 내용을 감싸는 공간
article : 글자가 많이 들어가는 부분
footer : 푸터

이외에도 굉장히 많은 시멘틱 태그가 있습니다. 위의 태그들은 본질적으론 div와 같은 역할을 수행합니다. 다만, 검색 엔진이나 그 이외의 기계적인 동작들이 더 쉽게 웹 페이지를 이해할 수 있게 해줍니다.

시멘틱 태그 전

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Basic</title>
  </head>
  <body>
    <div>
      <h1>HTML5 Header</h1>
    </div>
    <div>
      <ul>
        <li><a href="#">Menu - 1</a></li>
        <li><a href="#">Menu - 2</a></li>
        <li><a href="#">Menu - 3</a></li>
      </ul>
    </div>
    <div>
      <div>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>안녕하세요, 제이든입니다.</p>
      </div>
      <div>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>만나서 반갑습니다.</p>
      </div>
    </div>
    <div>
      <span>서울특별시</span>
    </div>
  </body>
</html>

시멘틱 태그 후

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Basic</title>
  </head>
  <body>
    <div>
      <h1>HTML5 Header</h1>
    </div>
    <div>
      <ul>
        <li><a href="#">Menu - 1</a></li>
        <li><a href="#">Menu - 2</a></li>
        <li><a href="#">Menu - 3</a></li>
      </ul>
    </div>
    <div>
      <div>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>안녕하세요, 제이든입니다.</p>
      </div>
      <div>
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>만나서 반갑습니다.</p>
      </div>
    </div>
    <div>
      <span>서울특별시</span>
    </div>
  </body>
</html>

undefined