임대일

Do it! HTML+CSS+자바스크립트 웹 표준의 정석: 1. 웹과 HTML 시작하기(feat. 첫째마당) 본문

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

Do it! HTML+CSS+자바스크립트 웹 표준의 정석: 1. 웹과 HTML 시작하기(feat. 첫째마당)

limdae94 2024. 8. 11. 21:01
 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 | 고경희 - 교보문고

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 | ‘웹 표준의 정석’ 시리즈의 최신 개정판과 함께 웹 개발의 3대 기술을 끝낸다!웹 분야 도서 《Do it! HTML+CSS+자바스크립트 웹 표준의 정석》이 전면

product.kyobobook.co.kr

 

개인적으로 공부하면서 모르는 부분 혹은 다시 공부할 때 많은 도움이 될 것이라고 생각되는 부분으로 요약한 정리글입니다. 모든 내용을 정리하지 않다는 점을 참고해주세요!

 

01-3 웹 의 기본 동작 이해하기

 

웹 개발을 공부한다면 서버에 있는 정보가 어떻게 웹 브라우저로 전달되고, 화면에 표시되는지는 알고 있어야한다. 여기에서는 웹의 동작 방법을 이해하려면 반드시 알아야 할 기본 개념에 대해 공부한다.

 

IP 주소(Internet Protocol Address)는 인터넷에 연결되어 있는 여러 사이트를 구분하기 위해 붙이는 주소이다. 택배를 보낼 때 건물의 위치를 우편 주소로 구분하는 것처럼 서버는 IP 주소로 웹 페이지를 구분한다. IP 주소는 크기에 따라 두 가지로 구분된다. 4Byte 크기의 IPv4, 16Byte 크기의 IPv6가 있다.

 

도메인(Domain)은 goole.com 혹은 easydocker.co.kr처럼 사람이 이해하고 기억하기 쉬운 이름으로 복잡한 IP 주소를 대체한 이름이다. 예를 들어 웹 브라우저 주소 창에 'google.com'을 입력하면 그 도메인에 해당하는 IP 주소를 알아내서 원하는 사이트를 찾아가게 된다. 이때 도메인을 IP 주소로 변환하는 역할이 DNS 서버(Doamin Name Server)이다. DNS 서버는 등록된 도메인 정보를 갖고 있다가 사용자가 도메인을 입력할 때마다 빠르게 IP주소로 변환한다.

 

HTTP(Hypertext Transfer Protocol)는 웹에서 데이터를 주고받는 서버-클라이언트 모델의 프로토콜이다. 이때 프로토콜(Protocol)은 컴퓨터 또는 전자기기 간의 원활한 통신을 위해 지키기로 약속한 규약이다. 따라서 HTTP를 쉽게 설명하자면 웹 브라우저가 서버와 통신하는 규칙이다.

 

HTTPS(Hypertext Transfer Protocol Security)는 HTTP에 암호화를 추가하여 보안을 강화한 프로토콜이다. 최신 크롬 브라우저에서는 HTTP 프로토콜을 사용하는 웹 사이트를 기본적으로 차단하기 때문에 HTTPS 프로토콜을 통해 접속할 수 있도록 만들어야 한다.

 

쉽게 정리하자면 서버와 클라이언트 사이에 텍스트 데이터를 전송한다고 가정하자. HTTP는 텍스트 데이터를 전송하고, HTTPS는 암호화된 텍스트 데이터를 전송한다는 차이가 있다.

 

01-4 웹 접근성 알아보기

웹 표준이라고 한다면 HTML, CSS, JS 언어, '웹 접근성'을 합쳐졌을 때 비로소 웹 표준이 완성된다. 웹 접근성이란 무엇인지, 정보를 어떤 곳엣 얻을 수 있는지 살펴보자.

 

웹 접근성(Web Accessibility)는 나이 혹은 장애에 상관없이 모든 사용자가 접근할 수 있어야 한다는 의미를 갖는다. 예를 들어 시각 장애인은 스크린 리더(Screen Reader)로 웹을 이용할 수 있어야 하고, 마우스를 움직일 수 없는 상황에서는 키보드만으로도 웹을 볼 수 있어야 한다. 웹 접근성을 준수한다면 어떠한 환경에서도 웹 사이트를 둘러보는 데 불편함이 없다. 그래서 웹을 개발할 때 웹 접근성을 지키도록 법으로 규정했다. 공공기관 사이트 혹은 사이트가 많은 사이트는 오픈하기 전에 웹 접근성 인증을 받아야 하고 인증 마크도 표시해야 한다.

 

01. 생각하기

  1. 웹에서 웹 표준이 왜 중요할까요?
  2. 서버와 클라이언트 간에 자료를 어떻게 주고받나요?
  3. IP 주소가 무엇인가요?
  4. DNS 서버는 어떤 역할을 하나요?
  5. HTTP, HTTPS는 어떤 차이점이 있나요?
  6. 웹 접근성이 필요한 이유가 무엇인가요?

 

03-1 HTML과 첫 만남

HTML이 무엇인지 간단히 공부하고, HTML 태그를 붙인 텍스트가 웹 브라우저에서 어떻게 표시되는지 공부한다.

 

HTML(HyperText Markup Language)에서 HyperText란 문서를 서로 연결해 주는 링크를 의미한다. 인터넷에서 링크만 클릭하면 다른 페이지 혹은 사이트로 쉽게 연결할 수 있는 것처럼 HTML에는 서로 연결한다는 의미가 포함되어 있다. 그리고 Markup이란 '표시한다' 의미이다. 따라서 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시한다는 의미이다.

 

웹 문서는 내용을 작성하는 프로그램과 그 내용을 확인하는 프로그램이 다르다. 예를 들어 웹 문서에서 표를 만들 때 웹 브라우저에서 바로 표를 삽입할 수 없다.먼저 VSCode 같은 웹 편집기에서 마크업 형식으로 표를 작성해야 한다. 그러면 웹 브라우저는 각각 제목, 텍스트, 표로 인식해서 나타낸다. 이때 웹 브라우저가 제목, 텍스트, 표를 구별할 수 있도록 각각에 꼬리표를 붙여야 한다. 이러한 꼬리표를 태그(Tag)라고 한다.

 

 

HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것이다. 글자를 보기 좋게 꾸미거나 문서의 배치를 다양하게 변경하는 것은 스타일 시트(Style Sheet)의 기능이다.

 

03-2 HTML의 구조 파악하기

HTML 문서는 일반 문서와 다르게 정해진 형식에 맞추어 내용을 작성해야 한다. 웹 문서는 <!DOCTPYE html>으로 시작해 <hmtl>, <head> <body> 태그 세 영역으로 구성된다.

 

  • <!DOCTPYE html>: 웹 문서의 유형을 지정하는 태그
  • <html> ~ </html>: 웹 문서의 시작과 끝을 나타내는 태그
  • <head> ~ </head>: 웹 브라우저에 문서 정보를 알려 주는 태그
  • <body> ~ </body>: 실제로 웹 브라우저 화면에 표시되는 내용을 포함하는 태그

 

<meta> 태그

<meta> 태그는 문자 인코딩, 웹 사이트의 키워드, 설명, 제작자 등의 정보를 지정할 때 사용되는 태그이며 <head> 태그 안에 포함된다.

 

<title> 태그

<title> 태그는 웹 문서의 제목으로 웹 브라우저의 제목 표시줄에 표시되는 태그이며 <head> 태그 안에 포함된다.

 

태그, 이거는 꼭 알아두기

  1. 태그는 소문자로만 작성한다.
  2. 여는 태그와 닫는 태그는 정확히 입력한다.
  3. 들여쓰기를 한다.
  4. 일부 태그는 속성과 함께 사용한다.

 

03-4 웹 문서의 구조를 만드는 시맨틱 태그

HTML에는 웹 문서의 구조를 나타내는 몇 가지 태그가 존재한다. 문서 내용에는 영향을 주지 않으면서 웹 브라우저가 문서 구조를 파악하는 데 주용한 역할을 하는 태그이다. 지금부터 웹 문서의 구조를 만드는 주요 태그를 살펴보자.

 

시멘틱 태그(Semantic Tag)란 HTML의 태그 이름만 봐도 의미를 알 수 있는 태그이다. 예를 들어 텍스트 단락(Paragraph)를 줄인 <p> 태그 혹은 앵커(Anchor)를 줄인 <a> 태그 등 이름만으로도 어떠한 역할을 하는지 쉽게 알 수 있다. 웹 문서의 구조를 나타내는 태그도 시멘틱 태그이다. 웹 접근성 지침에서도 시맨틱 태그를 사용하는 것을 권장하고 있다. 시멘틱은 '의미론적인', '의미가 통하는' 뜻을 갖고 있다.

 

<header> 태그

<header> 태그는 말 그대로 헤더 영역을 의미하는 태그이다. 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있다. 웹 문서의 정보를 담는 <head> 태그와 헷갈리지 않도록 주의하자.

 

<nav> 태그

<nav> 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 생성한다. <nav> 태그는 웹 문서 위치에 영향을 바디 않으므로 헤더나 푸터, 사이드 바 안에 포함될 수 있고 독립해서 사용할 수도 있다. 웹 문서에서 <nav> 태그를 여러 개 사용할 경우 각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있다.

 

<main> 태그

<main> 태그는 웹 문서에서 핵심이 되는 내용을 포함한다. <main> 태그 안에는 메뉴, 사이드바, 로고처럼 페이지마다 똑같은 정보는 포함될 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성한다. <main> 태그는 웹 문서에서 한 번만 사용할 수 있다.

 

<article> 태그

<article> 태그는 아티클(Article)의 사전적 의미인 '신문, 잡지, 기사'처럼 웹에서 실제로 보여주고 싶은 내용을 작성한다. 예를 들어 블로그의 포스트, 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 의미한다. 문서 안에는 <article> 태그를 여러 개 사용할 수 있으며 <section> 태그를 포함할 수도 있다.

 

<section> 태그

<section> 태그는 웹 문서에서 콘텐츠 영역을 의미한다. <section> 태그는 <article> 태그와 비슷하지만 <section> 태그는 몇 개의 콘텐츠를 묶을 때 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 사용한다. 단순히 스타일을 적용하려고 콘텐츠를 묶으려면 <section> 태그 대신 <div> 태그를 사용하면 된다.

 

<aside> 태그

<aside> 태그는 본문 내용 외에 왼쪽, 오른쪽, 아래쪽에서 사이트 바를 생성한다. 보통 웹 사이트에서 사이드 바는 필수 요소는 아니다.

 

<footer> 태그

<footer> 태그는 웹 문서에서 가장 하단에 푸터 영역을 생성한다. 푸터에는 사용자 제작 정보, 저작권 정보, 연락처 등을 포함한다. <footer> 태그 안에는 <header>, <section>, <article> 등 다른 시멘틱 태그를 모두 사용할 수 있다.

 

<div> 태그

<header>, <section> 같은 시멘틱 태그가 등장하기 전에 <div> 태그를 사용했다. <div> 태그에서 div는 division의 줄임말이다. <div> 태그는 id 혹은 class 속성을 사용해서 문서 구조를 생성하거나 스타일을 적용할 때 사용한다. 즉, 영역을 구별하거나 스타일로 문서를 꾸민다.

<header>
    <div id= "logo">
        <a href="#"><h1>Dream Jeji</h1></a> <!-- div 태그 -->
    </div>
    <nav>
        <ul id="topMenu">
            ...
        </ul>
    </nav>
</header>

위의 예제 코드는 헤더에서 로고 위치를 자유롭게 움직일 수 있도록 로고 텍스트와 <h1>, <a> 태그를 <div> 태그로 묶었다. 이렇게 작성하면 스타일 시트를 사용해서 배치할 수 있다.

 

03. 생각하기

  1. 웹 개발에서 HTML의 역할을 이해했나요?
  2. <!DOCTYPE html>의 의미를 이해했나요?
  3. <html>, <head>, <body> 태그의 용도를 이해했나요?
  4. VSCode에서 웹 문서의 구조를 자동으로 생성할 수 있나요?
  5. VSCode에서 확장 기능인 라이브 서버를 설치하고 사용해 봤나요?
  6. HTML 태그의 특징을 이해했나요?
  7. 웹 표준에서 시멘틱 태그를 왜 쓰는지 이해했나요?
  8. 문서 구조를 만드는 주요 시멘틱 태그의 용도에 대해 이해했나요?