사용자 친화 웹 1. 웹 표준

HanSungUk·2022년 7월 8일

TIL

HTM과 CSS

목록 보기

6/8

사용자 친화 웹 1. 웹 표준

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

웹 표준의 개념과 등장 배경을 기억한다.
웹 표준을 지켰을 때의 장점을 이해한다.
Semantic HTML을 작성해야 하는 이유를 이해한다.
Semantic HTML을 작성하는 방법을 이해한다.
자주 틀리는 마크업 규칙과 올바르게 작성하는 방법을 기억한다.
크로스 브라우징의 개념과 방법을 기억한다.

1. 웹 표준의 개념

인터넷은 '전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망'을 의미합니다.
웹은 '문서, 이미지 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간'을 의미합니다.

웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'으로 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있습니다.

웹 표준의 장점

유지 보수의 용이성
웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리함으로서 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼습니다.
웹 호환성 확보
웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있습니다.
검색 효율성 증대
웹 표준에 맞춰 웹 사이트를 작성하는 것만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있습니다.
웹 접근성 향상

2. Semantic HTML

semantic: 의미의, 의미가 있는 이라는 뜻의 영단어
HTML: 화면의 구조를 만드는 마크업 언어

위 두 단어를 합친 semantic HTML은 구조를 만드는 것을 넘어 의미를 갖도록 만들겠다는 의도가 담겨져있습니다.

위 두 가지의 HTML 구조를 비교한다면 semantic HTML의 필요성에 대해서 어렴풋이 알 수 있습니다.
div, span요소로만 화면을 구성했을 때와 비교하면, 각 요소의 이름만 보고도 요소가 어떤 내용을 담게 될지 , 어떤 기능을 하게 될지 확실하게 알 수 있습니다.

이렇게 <header>는 헤더 역할을, <span>은 네비게이션 바 역할을 하는 것처럼 시맨틱 요소를 적정하게 사용하여 구성한 HTML을 시맨틱 HTML이라고 합니다.

2.1 시맨틱 HTML의 필요성

개발자간 소통
<div>과 <span>으로만 HTML를 작성한다고 했을때, 요소가 어떤 기능을 하는지 파악하기 위해 일일히 주석을 달거나 id와 class이름을 표기해야합니다. 이러한 과정들 역시 모두 협의를 통해 이뤄져야하기 때문에 많은 시간이 필요합니다. 하지만 시맨틱 요소를 사용한다면 적어도 각 요소의 기능을 정의하는 시간은 줄일 수 있습니다.
검색 효율성
시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시할 수 있습니다.
웹 접근성
웹 접근성은 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 함을 뜻합니다.
이때, HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있습니다.

2.2 시멘틱 요소의 종류

<header> : 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소입니다.
<nav> : 메뉴, 목차 등에 사용되는 요소입니다.
<aside> : 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다.
<main> : 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다.
<article> : 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다.
<section> : 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<hgroup>)을 포함하는 경우가 많습니다.
<hgroup>: 제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>입니다.
<footer> : 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다.

2.3 예시로 보는 시맨틱 HTML

<header>
- 현재 페이지에서는 페이지 최상단에 위치하고 있습니다.
- 페이지 최상단에 위치하는 경우 사이트 전체에서 사용할 수 있는 내용을 담습니다.
- <article>, <main> 등 다른 요소의 머릿말 역할로도 사용할 수 있습니다.
<nav>
- 네비게이션 바의 역할로, 링크들을 담고 있습니다.
<aside>
- 메인 콘텐츠와 관련이 있긴 하지만, 직접적인 연관은 없는 내용이 들어가는 요소입니다.
<main>
- 페이지의 메인 콘텐츠가 들어가는 요소입니다.
<article>
- 게시글, 뉴스 기사처럼 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다.
- 재사용하는 부분인 만큼, 각각의 <article>을 식별할 수 있는 요소가 필요합니다.
  - <hgroup>요소를 사용하여, 식별하는 경우가 많습니다.
<section>
- 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다.
- 적합한 의미의 요소가 없을 때, 사용하기 때문에, 의미를 부여하기 위한 요소를 포함시키는 것이 좋습니다.
  - <hgroup>을 포함하는 경우가 많습니다.
<hgroup>
- 제목을 표시하기 위해서 사용하는 요소입니다.
- <h1>부터 <h6>까지 있으며, 숫자가 클수록 글자의 크기는 작아집니다. 숫자가 작은 제목이 숫자가 큰 제목을 포함하는 방식으로 사용합니다.
<footer>
- 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다.
- 사이트 제공자, 저작권, 정책, 사이트맵 등의 내용을 포함하고 있습니다.

3. 자주 틀리는 마크업

3.1 인라인 요소 안에 블록 요소 넣기

인라인 요소는 콘텐츠가 차지하는 만큼만, 블록 요소는 가로로 넓게 화면 영역을 차지합니다. 인라인 요소는 항상 블록 요소 안에 들어가야 하며, 반대의 경우는 있어서는 안됩니다.

// div는 블록 요소이고, span은 인라인 요소입니다.
<span><div>나쁜 예시</div></span>

3.2 `<b>`, `<i>` 요소 사용하기

<b>, <i>요소는 각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용하는 요소입니다. 하지만 웹 표준을 준수하기 위해서는 사용하지 않는 것이 좋습니다. 다음과 같은 <string>, <em> 시맨틱 요소로 대체합니다.

<b>글씨를 두껍게</b> --> <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i> --> <em>콘텐츠 강조하기</em>

3.3 `<hgroup>` 마구잡이로 사용하기

<hgroup>요소들은 목차의 역할을 하면서 콘텐츠의 상하 관계를 표시하기 위해 사용합니다.

// 나쁜 예시
<h1>엄청 큰 글씨</h1>
    <h3>적당히 큰 글씨</h3>
  <h2>큰 글씨</h2>
          <h6>엄청 작은 글씨</h6>
      <h4>그냥 글씨</h4>

// 좋은 예시
<h1>제목</h1>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
    <h3>작은 목차</h3>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
      <h4>더 작은 목차</h4>
      <h4>더 작은 목차</h4>

3.4 `<br />` 연속으로 사용하기

<br /> 는 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소입니다. 그런데 이러한 목적이 아니라 요소 사이에 간젹을 만들기 위한 목적으로 남발해서는 안됩니다.

// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.

// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>

// 좋은 예시 2
  //HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>

  //CSS 파일
.margin { margin: 10px }

3.5 인라인 스타일링 사용하기

//HTML 파일
<head>
  <style>
    h1 { color : "red" }
  </style>
</head>

(O) <h1>스타일링 속성은 CSS로 작성해주세요.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>  
 
//CSS 파일
h2 { color : "yellow" }

4. 크로스 브라우징

크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미합니다.

크로스 브라우징 워크 플로우

초기 기획
초기 기획 단계에서 어떤 웹 사이트를 만들 것인지 정확하게 결정해야 합니다. 어떤 콘텐츠와 기능이 있어야 하는지, 디자인은 어떻게 할지 등의 사항을 결정해야 합니다. 그 후에는 이 사이트의 고객이 누구일지 생각해야 합니다.
타겟 고객층이 주로 사용하게 될 브라우저와 기기르 파악했다면, 여기에 맞는 기술을 사용해서 개발할 수 있도록 기획해야 합니다.
개발
코드를 작성할 때 사용하는 코드가 각 브라우저에서의 호환성이 어떤지 파악하고 사용해야 합니다.

테스트/ 발견
각 기능을 구현한 후에는 그 기능에 대한 테스트가 필요합니다.

안정적인 데스크톱 브라우저(크롬, 엣지, 파이어폭스 등)에서 테스트를 진행합니다.
휴대폰 및 태블릿 브라우저(삼성 인터넷, 안드로이드 기기의 크롬 등)에서 테스트를 진행합니다.
그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행합니다.
Window, Linux, Mac 등 다양한 운영 체제에서도 테스트를 진행합니다.

이 밖에도 자동으로 테스트를 진행해주는 도구를 이용하는 것도 방법입니다.
TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴이 있습니다.

수정/ 반복

HanSungUk

이전 포스트

Part 2. CSS 기초 (4)

다음 포스트

사용자 친화 웹 1. 웹 표준

HTM과 CSS

사용자 친화 웹 1. 웹 표준

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

1. 웹 표준의 개념

2. Semantic HTML

2.1 시맨틱 HTML의 필요성

2.2 시멘틱 요소의 종류

2.3 예시로 보는 시맨틱 HTML

3. 자주 틀리는 마크업

3.1 인라인 요소 안에 블록 요소 넣기

3.2 `<b>`, `<i>` 요소 사용하기

3.3 `<hgroup>` 마구잡이로 사용하기

3.4 `<br />` 연속으로 사용하기

3.5 인라인 스타일링 사용하기

4. 크로스 브라우징

크로스 브라우징 워크 플로우

Part 2. CSS 기초 (4)

사용자 친화 웹 2. SEO

0개의 댓글

사용자 친화 웹 1. 웹 표준

HTM과 CSS

사용자 친화 웹 1. 웹 표준

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

1. 웹 표준의 개념

2. Semantic HTML

2.1 시맨틱 HTML의 필요성

2.2 시멘틱 요소의 종류

2.3 예시로 보는 시맨틱 HTML

3. 자주 틀리는 마크업

3.1 인라인 요소 안에 블록 요소 넣기

3.2 <b>, <i> 요소 사용하기

3.3 <hgroup> 마구잡이로 사용하기

3.4 <br /> 연속으로 사용하기

3.5 인라인 스타일링 사용하기

4. 크로스 브라우징

크로스 브라우징 워크 플로우

Part 2. CSS 기초 (4)

사용자 친화 웹 2. SEO

0개의 댓글

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

3.2 `<b>`, `<i>` 요소 사용하기

3.3 `<hgroup>` 마구잡이로 사용하기

3.4 `<br />` 연속으로 사용하기