[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 4일차 - 웹 표준과 HTML5

강경서·2023년 6월 13일

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프

목록 보기

6/50

💻 웹 표준

우리가 인터넷을 이용할 때 같은 웹 사이트라면 어떤 브라우저를 사용하는지 여부와는 상관없이 해당 웹사이트는 똑같이 보이고 정상적으로 작동해야 합니다. 이를 위해 W3C 권고안에 따라 웹 사이트를 구성하는 HTML,CSS,JavaScript등의 언어들이 표준화된 방식으로 작성되어야 하는 것을 웹 표준입니다.

W3C(World Wide Web Consortium) : 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직

웹 표준의 장점

브라우저 호완성
웹 표준을 준수함으로 사용자가 사용하는 모든 브라우저에서 일관적으로 표시되는 호완성에 도움이 됩니다.
손 쉬운 유지 보수 및 비용 절감
웹 페이지를 구성하는 컨텐츠를 논리적이고 효율적으로 구조함에 따라 관리가 유리하고 소스코드의 경량화로 비용 절감에 도움이 됩니다.
검색 엔진 최적화(SEO)
구조화된 웹 페이지는 검색 로봇 수집을 통해 검색엔진에 효율적으로 노출 되어 SEO에 유리합니다.
웹 접근성 향상
보조 기기를 사용하여 웹 페이지를 이용하는 모든 사용자에게도 정확한 정보를 얻을 수 있도록 도움을 주어 웹 접근성 향상에 도움이 됩니다.

웹 표준을 준수하는 방법

DOCTYPE을 선언합니다.
웹 페이지 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML, XHTML을 사용하는지 명시합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML !DOCTYPE declaration</title>
</head>
<body>
    <p>이 문서는 HTML 문서입니다.</p>
</body>
</html>

시맨틱 태그를 사용합니다.
시맨틱 태그는 의미를 부여한 태그라는 뜻으로 웹 페이지의 구조를 명확하게 만들어 줍니다.

<header>
	<h1>시맨틱 태그</h1>
    <nav>
    	<ul>
        	<li>매뉴1</li>
            <li>매뉴2</li>
        </ul>
    </nav>
</header>
<main>
	<section>
    	<h2>섹션</h2>
        <p>내용</p>
    </section>
</main>
<footer>
	<small>하단</small>
</footer>

웹 접근성을 고려합니다.
웹 페이지를 사용하는 모든 사용자가 쉽게 접근할 수 있도록 웹 접근성을 고려해야합니다.
img태그의 alt 속성을 사용하여 이미지에 대한 설명을 제공하거나, 키보드만으로 모든 기능을 사용할 수 있도록 tabindex 속성을 사용하는 등의 작업이 필요합니다.

<img src="#" alt="이미지"/>
<input type="text" name="name" tabindex="1"/>

🎈 HTML5

HTML

HTML을 사용하여 텍스트, 이미지, 비디오 등과 같은 콘텐츠를 구성하고 구조화 할 수 있으며, 이를 통해 웹 페이지를 디자인하고 브라우저에 표시할 수 있습니다.

HTML(Hyper Text Markup Language): 웹 페이지를 만드는 데 사용되는 마크업 언어

HTML5의 기본 요소

태그(tag) : "<"와">"로 둘러싸인 문자열, 시작태그 "<>"와 종료태그 "</>"로 구성
내용(content) : 태그로 둘러싸인 문자열
엘리먼트(element) : 태그와 내용을 포함한 전체 문자열, HTML문서의 기본 단위
속성(attribute) : 엘리먼트의 상세한 표현 설정 사항을 지시, 시작 태그 안에 사용
속성값(value) : 속성을 표현하는 값 '' 또는 ""로 감싸야 한다.

HTML5의 기본 구조

< !DOCTYPE html > : 웹 문서의 유형 지정, 본 문서가 HTML5라는 것을 명시
< html > : HTML파일임을 정의하고, 웹문서의 시작과 끝에 위치
< head > : 메타 데이터의 집합으로 웹문서에 직접적으로 보이지는 않지만 웹은 정보를 담당, title, meta, link, style, script태그로 구성
< meta > : 홈페이지 설명, 대표 이미지, 대표 키워드 등을 입력하는 태그, 홈페이지 주소를 어딘가에 공유할 때 나오는 설명 글과 이미지에 해당
< title > : 홈페이지의 제목
< body > : 홈페이지에서 실제로 보여지는 공간, 본문의 내용을 담는 공간

HTML5 - < head >

< title > : 웹 페이지의 제목을 정의
< meta > : 다양한 종류의 메타데이터를 지정, 주로 문자 인코딩, 뷰포트 설정, 키워드 등을 포함, SEO 최적화를 위한 메타 데이터 태그, Open Graph 메타 태그등을 추가할 수 있다.
< link > : 외부 스타일시트(css파일)이나 웹 사이트의 아이콘을 문서와 연결
< script > :자바스크립트 코드를 문서에 포함하거나 외부 자바스크립트 파일을 연결

HTML5 - 시맨틱 태그(SEMENTIC TAG)

사람들이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그입니다.
시맨틱 태그가 나오기 이전에는 < div >태그로 일일히 위치와 범위를 정하고 각 태그들에 class 이름으로 구분을 지었습니다.

시맨틱 태크의 종류

header : 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성
nav : 페이지의 내비게이션 영역, (사이트 내,외부로 이동), 메뉴, 목차, 색인 등등
main : 메인 컨텐츠 영역, 문서 내에서는 반드시 한번만 사용, 다른 header, footer, nav, article, section, aside의 하위로 작성할 수 없습니다.
section : 본문의 여러 내용(article)을 포함하는 부분을 의미
article : 본문의 주 내용이 들어가는 부분을 의미
aslide : 간접 컨텐츠, 보조 컨텐츠를 의미하며, 대체적으로 옆에 위치하는 내용의 부분을 의미
footer : 하단 바닥글을 의미, 주로 들어가는 정보는 회사정보, 저작권, 연락처 등등이 있습니다.

시맨틱 태그의 사용하는 이유

시맨틱 태그의 사용하는 이유는 태그들을 올바르게 사용하여 웹 표준을 준수하기 위해서 입니다.
태그들의 규칙을 잘 지킨다면 웹 페이지의 구조와 의미를 명확하게 구축할 수 있어, 가독성이 향상됩니다. 이러한 가독성이 높은 코드는 유지보수가 용이하면, 코드 수정이나 업데이트 작업시에도 문제가 발생할 확율이 적어집니다. 또한 웹페이지에 일반적인 방법으로 접근할 수 없는 사람들(시각장애인)들도 원할한 소통이 가능하도록 도와 웹 접근성을 높일 수 있습니다. 그리고 크로스 브라우징 이슈를 최소화 할 수 있습니다. 시맨틱 태그를 올바르게 사용하면 CSS를 입히지 않는 상태에서도 내용을 잘 알아볼 수 있습니다.

크로스 브라우징 이슈 : 각 브라우저에서 웹 페이지를 다르게 보이는 문제

🚀 팀 실습

여행지 검색 페이지

Github 링크

login_form.html

  <body>
    <form action="./home.html">
      <label for="name">사용자명</label>
      <input type="text" id="name" required /><br />
      <label for="password">비밀번호</label>
      <input type="password" id="password" required /><br />
      <label for="email">이메일</label>
      <input type="email" id="email" required /><br />
      <label for="phone">전화번호</label>
      <input type="text" id="phone" required /><br />
      <label for="auto">자동로그인</label>
      <input type="checkbox" id="auto" /><br />
      <input type="reset" value="초기화" />
      <input type="submit" value="로그인" />
    </form>
  </body>

input의 type에 따라 다양한 기능을 제공합니다. 또한 label 태그의 for 속성과 input 태그의 id 속성을 이용하여 label 태그를 클릭시 해당 input에 연결됩니다.

home.html

  <body>
    <h1>가고싶은 여행지를 검색해봐요!</h1>
    <form action="https://www.goodchoice.kr/product/result">
      <div>
        <label for="keyword">여행지:</label>
        <input type="text" name="keyword" id="keyword" />
      </div>
      <input type="submit" value="여행가기" />
    </form>
  </body>

form 태그의 method가 GET방식이라면 input의 name이 url의 parameter가 됩니다.

iframe 태그

Github 링크

iframe.html

  <body>
    <header>
      <h1>마이 페이지</h1>
    </header>
    <nav>
      <or>
        <li><a href="./시맨틱 태그.html" target="iframe">시맨틱 태그</a></li>
        <li><a href="./login_form.html" target="iframe">로그인 폼</a></li>
        <li><a href="./home.html" target="iframe">홈</a></li>
      </or>
    </nav>
    <main>
      <iframe src="./login_form.html" name="iframe"></iframe>
    </main>
  </body>

a 태그의 target속성과 iframe 태그의 name 속성을 활용하면 효율적인 iframe을 사용할 수 있습니다.

📝 후기

웹 표준에 대해서는 늘 중요하다고 생각은 했지만, 왜 웹 표준을 지켜야 하는지 어떤 장점이 있는지 어떻게 준수해야 하는지는 정확히 알아 보지 못했습니다. 이번 기회에 중요도와 방법을 배울 수 있어 앞으로 제작할 웹 페이지의 웹 표준을 준수하도록 노력해야겠다 생각했습니다.

🧾 Reference

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프

강경서

기록하고 배우고 시도하고

이전 포스트

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 1주차 후기

다음 포스트

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 4일차 - 웹 표준과 HTML5