-
접근성과 Semantic HTML
접근성이란 장애에 관계없이 모든 사람이 동등하게 웹을 사용할 수 있어야 한다는 원칙이다. 웹 기술에는 접근성을 위한 많은 기능이 내장되어 있으며 웹 개발자는 사용자를 배제하지 않도록 이를 알아야 한다.
위에서 말한것 처럼 HTML에는 접근성을 위한 대단히 많은 기능이 내장되어 있다. 어지간한 규모의 회사가(그 회사도 잘 모르겠다)아니라면 웹 개발시에 접근성을 크게 신경쓰진 않을것이다. 아마 콘텐츠 소비자가 콘텐츠 기획, 디자인, 개발을 한 사람과 동등한 위치라고 생각하기 때문일 것이다.
이 글에서는 접근성 기능에 대해 아주 깊이있게 다루진 않고 쉽게 지킬수 있는 몇가지 내용에 대해 다루고자 한다. JSX와, ESLint를 사용할 수 있는 프로젝트를 진행한다면 몇몇 플러그인을 통해 해결할 수도 있는 내용도 포함 되어있다.
간단하게 사용가능한 몇가지 접근성 관련 HTML
1. 레이블을 모든 폼 컨트롤과 연결
대부분의 경우 모든 독자가 필요한 입력을 이해하는 데 도움이 되도록 레이블이 필요함
<label for="username">사용자 이름</label>
<input type="text" id="username" name="username" />
2. 모든 이미지에 대체 텍스트 포함
모든 정보 및 기능 역할을 하는 이미지에 대체 텍스트 (alt)가 포함되어있는지 확인. 장식용 이미지의 경우 빈 텍스트라도 입력한다. 그러면 스크린 리더가 해당 이미지는 장식용 이미지라고 판단한다.
또한 단순 장식용 이미지라면 CSS의 background 속성을 사용해도 무방하다.
<img src="clear_sky.png" alt="맑게 개인 하늘입니다." />
3. 페이지에 언어 속성값 추가
검색 엔진과 브라우저를 지원하기 위해서 이며, 검색 엔진과 브라우저는 해당 lang 값에 맞게 여러가지 지원을 해준다.
<html lang="ko-KR"></html>
4. Semantic HTML로 적절한 마크업
올바름에 가깝게 작성된 Semantic(의미론적) HTML일수록 스크린 리더가 구문 분석을 더 잘 할수 있으며, SEO 측면에서도 많은 도움이 된다. 별도 포스트에서 자세히 다뤄보겠다.
<html>
<head>
<title>Semantic HTML 문서</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article heading</h1>
<section>
<h2>Content heading</h2>
<p>article content</p>
</section>
</article>
</main>
<section>
<h1>Section heading</h1>
<p>Section content</p>
</section>
<aside>Auxiliary content</aside>
<footer>
<figure>
<img src="logo.png" alt="" />
<figcaption>Slogan</figcaption>
</figure>
</footer>
</body>
</html>
5. 사용자가 실수를 방지하고 수정할 수 있도록 지원
사용자가 사이트에서 양식을 작성할 때, 명확한 지침 및 오류 메시지 그리고 알림을 제공한다.
사용자가 양식을 입력하다 오류가 발생하는 경우에 다음과 같은 지원을 할 수 있다.
사용자가 문제의 위치를 찾을 수 있도록 지원
구체적이고 이해하기 쉬운 설명 제공
어떻게 수정하면 되는지 제안 표시
<label for="phone">휴대폰 번호</label>
<input
id="phone"
name="phone"
type="tel"
pattern="^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$"
aria-describedby="phone-desc"
/>
<p id="phone-desc">예) 010-1234-1234</p>
6. 코드내의 엘리먼트 순서가 논리적으로 전개되는지 확인
제공하려고 하는 정보가 코드내의 엘리먼트 순서와 일치하는지 확인, 좋은 방법은 CSS를 제거하고 비교해보는 것이다.
7. 사용자의 상황에 맞게 바뀌는 레이아웃 작성
사용자의 여러 장치나 상황에 맞게 레이아웃이 적절히 변경되도록 작성. 폭 넓게 보면 반응형 레이아웃을 작성하는 것이다.
8. 비표준 대화형 엘리먼트에 대한 의미 제공
WAI-ARIA를 사용하여 아코디언과 같은 커스텀 버튼과 같은 커스텀 위젯의 기능 및 상태에 대한 정보를 제공한다.
아래는 아코디언과 같은 버튼을 구현할때의 예시이다. HTML 코드가 온전히 작성하려면 추가적인 JavaScript나 CSS코드가 필요하다. (아코디언이 접히거나 펴질때때, 키보드 이벤트에 반응할때 등)
<nav aria-label="Main Navigation" role="navigation">
<ul>
<li><a href="...">Home</a></li>
<li><a href="...">Shop</a></li>
<li class="has-submenu">
<a aria-expanded="false" aria-haspopup="true" href="...">SpaceBears</a>
<ul>
<li><a href="...">SpaceBear 6</a></li>
<li><a href="...">SpaceBear 6 Plus</a></li>
</ul>
</li>
<li><a href="...">MarsCars</a></li>
<li><a href="...">Contact</a></li>
</ul>
</nav>
9. 모든 대화형 엘리먼트가 키보드로 접근 가능한지 확인
키보드 액세스는 메뉴, 마우스 오버 정보, 접혔다 펴지는 아코디언 또는 미디어 플레이어와 같은 대화형 요소를 개발할 때 꼭 고려해야 한다. tabindex=0을 사용하여 일반적으로 포커스를 받지 않는 엘리먼트 (일반적으로 <div>나 <span>)을 상호작용에 사용할 때 포커스를 받도록 순서에 추가한다. 온전하게 동작하게 하기 위해서는 JavaScript 코드가 필요하다.
10. <button> 과 <a>
현재 페이지에서 상호작용 작업을 하는 모든 곳에 <button>을 사용한다.
다른 페이지로 이동하는 상호작용을 하는 곳에 <a>를 사용한다.
<a>의 경우 별 문제가 없지만 <button>의 경우 하고자 하는 것에 대해 구현하기가 힘든 경우가 있다. <button>은 기본적으로 인라인 엘리먼트 이므로 태그 안에 <p> <div> 등의 블록 수준 엘리먼트를 사용할 수가 없다. 가령 버튼 내부에 텍스트, 이미지, 또 다른 버튼등이 중첩되어 있는 엘리먼트를 만들기 위해선 어떻게 해야할까? 구현하고자 하는데 적절한 시멘틱 태그가 없다면?
두 경우 모두 커스텀 컨트롤을 작성해야 한다. 중요한 접근성 원칙은 커스텀 컨트롤에 역할과 이름이 필요하다는 것이다.
HTML는 글로벌 속성중 name이라는 속성이 있다. 이 name은 컴퓨터가 읽기 위한 값이며 보통 데이터가 제출될 때 키값으로 사용된다. 이 이름은 사용자에게 도움이 되지 않는다. 즉, 접근성 기술이 아닌 것이다.
접근 가능한 이름을 지정하려면 aria-label속성을 사용해야 한다. 위에서 얘기한 아코디언 버튼을 하나 만든다고 가정하면 아래처럼 작성할 수 있다.
<div role="button" aria-label="Open Arcodian">아코디언 버튼!</div>
role="button"을 통해 div에 구조와 의미를 부여하고 aria-label="Open Arcodian"으로 접근 가능한 이름을 부여했다. 아코디언은 처음에 접혀있으므로 다음 속성을 통해 접힘 상태에 접근 가능하게 할 수 있다.
<div role="button" aria-label="Open Arcodian" aria-expanded="false">
아코디언 버튼!
</div>
아래처럼 아이콘이 이미지가 아닌 폰트인 경우
<i class="navbarIcon" role="img" aria-hidden="true"></i>
이미지 역할을 하지만 접근성 API에는 노출되지 않도록 aria-hiddn="true"를 사용했다. 이런 경우 아이콘 밑에 텍스트 캡션이 있어야 함을 잊지 말자.
이외에도 aria- 속성은 굉장히 많으니 접근성에 대해 깊이 공부중이라면 아래 URL로 들어가 참조해보자.
MDN - ARIA states and properties
11. 색상이 유일한 시각적 지표가 되어서는 안됨
색맹, 색약 등의 시각적 장애가 있는 사용자에게는 의도한 색상대로 보이지 않을 것이므로 색상이 유일한 시각적 지표가 되선 안된다.
12. outline을 제거하지 말것
무엇을 하든 outline을 제거하지 말것. 아래의 CSS 한줄은 수많은 접근성을 해치고 있다.
outline: 0;
대부분의 브라우저는 outline 속성을 사용하여 대화형 요소의 시각적 포커스를 표시한다. 두 가지 선택지가 있다. 그대로 두거나 브라우저의 기본 스타일이 싫다면 커스텀 하자. 제거하는 것은 옵션이 아니다.
13. autocomplete 속성
몇몇 폼 컨트롤 엘리먼트에는 autocomplete 속성을 사용할 수 있는데 이것은 모든 사람에게 편리하다. 이것은 운동 장애나 인지 장애가 있는 사용자에게 매우 유용하다. 이들이 양식을 작성하는 것은 어려울 수 있으며 autocomplete 속성은 종종 도움의 손길을 제공한다. 요새의 브라우저는 매우똑똑하게 양식을 자동으로 채워주므로 사용하지 않을 이유가 거의 없다.
그 외 추가적으로 읽어보면 좋은 내용
접근성 랜드마크
-
Semantic HTML
Semantic(의미론적) HTML 이란?
시맨틱(의미론적) HTML은 HTML 마크업을 사용하여 웹 페이지의 모양이 아닌 콘텐츠의 의미를 전달하는 것을 말한다. 브라우저와 개발자 모두에게 그 의미를 명확하게 설명한다.
이 접근 방식에는 몇 가지 이점이 있다.
첫째, 검색 엔진 및 기타 기술이 사이트 콘텐츠의 구조와 목적을 이해하는 데 도움이 된다.
둘째, 이전 접근성 포스트에서도 말했듯이 보조 기술을 사용하여 웹을 탐색하는 사람들이 콘텐츠에 더 쉽게 액세스할 수 있도록 한다.
셋째, 각 요소의 목적이 명확하기 때문에 코드를 더 쉽게 읽고 유지 관리할 수 있다.
이런 이점을 획득하기 위해서 시맨틱 HTML은 필수라고 할 수 있다. 가장 일반적인 시맨틱 HTML 태그와 이를 효과적으로 사용하는 방법을 알아보자.
시맨틱한 요소의 예: <form> <table> <article>등…
시맨틱하지 않은 요소의 예: <div> <span>등…
시맨틱 HTML 태그와 용도
<header>
<header>는 웹 페이지의 상단 섹션을 마크업하는 데 사용되며, 일반적으로 기본 제목이나 로고, 내비게이션 및 사이트의 모든 페이지에 공통적인 기타 요소를 포함한다. <header>태그를 사용하면 페이지의 헤더와 기본 콘텐츠를 명확하게 구분하여 사용자가 웹사이트를 더 쉽게 이해하고 탐색할 수 있다.
<body>의 자식인 경우 웹 페이지의 전체 헤더를 정의하지만 <article> 또는 <section>의 자식인 경우 해당 섹션에 대한 특정 헤더를 정의한다.
주 컨텐츠
하나의상의 제목요소 (h1 ~ h6)
로고 또는 아이콘
저자 정보
여러개의 <header>를 하나의 문서내에 가질수있다. 하지만 <header>는 <footer>, <address>또는 다른 <header>에 중첩되면 안된다.
<article>
<header>
<h1>점심을 뭐먹을지는 항상 고민된다.</h1>
<p>직장인들의 점심메뉴 고민은 늘 크리티컬한 이슈이다.</p>
</header>
<p>콘텐츠...</p>
</article>
<nav>
<nav>태그는 탐색 링크가 포함된 웹 페이지의 섹션을 마크업하는 데 사용된다. 태그를 사용하면 웹사이트의 이 섹션이 탐색을 위해 특별히 설계되었음을 사용자와 검색 엔진 모두에 나타낼 수 있다.
모든 링크가 <nav>안에 있어야 하는건 아니다. 주요한 탐색링크 집합의 컨테이너로 사용된다.
<nav>
<a href="/html">HTML</a>
<a href="/css">CSS</a>
<a href="/javascript">JavaScript</a>
<a href="/react">React</a>
</nav>
<main>
<main> 태그는 웹 페이지의 기본 콘텐츠 영역을 마크업하는 데 사용된다. 태그를 사용하면 페이지의 어느 부분에 주요 콘텐츠가 포함되어 있는지 사용자와 검색 엔진 모두에게 명확하게 알릴 수 있다.
<main>태그는 이상적으로 페이지에 한번만 사용해야 한다.
<article>
<article> 태그는 블로그 게시물, 뉴스 기사 또는 제품 리뷰와 같은 독립형 콘텐츠를 나타내는 데 사용된다. 태그 내의 콘텐츠는 독립적이고 의미 있어야 하며 제목, 단락, 이미지 및 기타 유형의 콘텐츠를 포함할 수 있다. 독립적이라는 콘텐츠가 그 자체로 의미가 있어야 함을 말한다. 웹 사이트의 나머지 부분과 독립적이다.
<article class="all-browsers">
<h1>가장 유명한 브라우저</h1>
<article class="browser">
<h2>구글 크롬</h2>
<p>
구글 크롬은 2008년에 등장한 브라우저로서 현재 세계에서 가장 점유율이 높은
브라우저 입니다!
</p>
</article>
<article class="browser">
<h2>모질라 파이어폭스</h2>
<p>파이어폭스는 모질라 재단에서 개발한 오픈소스 브라우저 입니다.</p>
</article>
<article class="browser">
<h2>마이크로소프트 엣지</h2>
<p>
마이크로소프트 엣지는 2015년에 등장하여 기존 브라우저인 인터넷
익스플로러를 대체합니다.
</p>
</article>
</article>
<aside>
<aside>태그는 웹 페이지의 기본 콘텐츠와 관련이 있지만 필수적인 부분이 아닌 콘텐츠를 마크업하는 데 사용된다. 여기에는 보충 정보, 광고 또는 관련 기사와 같은 것이 포함될 수 있다. 주로 사이드바 처럼 배치되며 주변 콘텐츠와 간접적으로 연관된다.
<p>
저는 지난주에 강원도 속초를 다녀왔습니다. 일출이 아름다웠고 장칼국수가
맛있었습니다.
</p>
<aside>
<h4>강원도 속초</h4>
<p>
속초시는 대한민국 강원특별자치도 동해안 북부에 위치한 시이다. 시의 서쪽으로
설악산 국립공원이 있고, 시의 중심부에는 석호인 영랑호와 청초호가 있다.
동해에는 한류와 난류가 교류하여 어족이 풍부하기 때문에 동명항과 대포항을
중심으로 수산업과 관광업이 발달하였다.
</p>
</aside>
<section>
<section>태그는 주제별로 그룹화된 웹 페이지의 섹션을 마크업하는 데 사용된다. 여기에는 긴 기사의 하나의 장을 담당하는것을 주로 한다. W3C의 HTML 문서에 따르면 “섹션은 일반적으로 제목이 있는 내용의 주제별 그룹이다.”라고 표현한다.
각 섹션을 제목으로 시작하는 것이 가장 좋다. 또한 컨텍스트에 따라 섹션을 다른 섹션이나 아티클로 분할할 수 있다.
<section>
<h1>WWF</h1>
<p>
세계자연기금(WWF)은 국제기구입니다. 보존, 연구, 복원에 관한 문제를 연구하고
있습니다. 이전에는 세계야생생물기금(World Wildlife Fund)으로 명명되었습니다.
WWF는 1961년에 설립되었습니다.
</p>
</section>
<footer>
<footer>태그는 저작권 정보, 연락처 세부 정보 또는 소셜 미디어 프로필 링크와 같은 항목을 포함할 수 있는 웹 페이지의 하단 섹션을 표시하는 데 사용된다. 문서 또는 섹션의 바닥글을 정의하는데 주료 사용되며 하나의 문서에 여러개가 있을수 있다.
<footer>
<p>저작자: arqhive</p>
<p>
<a href="mailto:hgystation@gmail.com">hgystation@gmail.com</a>
</p>
</footer>
<figure>, <figcaption>
<figure> <figcaption>태그는 웹 페이지의 기본 콘텐츠에서 참조되는 독립적인 콘텐츠를 마크업하는 데 사용된다. 태그는 콘텐츠 자체를 마크업하는 데 사용되며 태그는 콘텐츠에 대한 캡션 또는 설명을 마크업하는 데 사용된다.
참고: 접근성의 관점에서, 캡션과 alt 텍스트는 다른 역할을 한다. 캡션은 이미지를 볼 수 있는 사람들에게도 도움이 되지만, alt 텍스트는 이미지가 없을 때와 같은 기능을 제공한다. 따라서, 캡션과 alt 텍스트는 같아서는 안된다. 왜냐하면 이미지가 없을 때 둘 다 나타나기 때문이다.
<figure>는 이미지일 필요가 없다. <figure>는 다음과 같은 독립적인 컨텐츠 단위이다.
여러 이미지, 코드 스니펫, 오디오, 비디오, 방정식, 표 등등…
<figure>
<img src="image.jpg" alt="Image description" />
<figcaption>이미지 캡션</figcaption>
</figure>
<detail>, <summary>
<detail>및 <summary>태그는 콘텐츠의 축소 가능한 섹션을 표시하는 데 사용된다. <detail>태그는 섹션의 제목을 마크업하는 데 사용되며 <summary>태그는 콘텐츠 자체를 마크업하는 데 사용된다. 아코디언을 구현할때 적절한 태그이다.
<details>
<summary>클릭하면 펼쳐집니다.</summary>
<p>펼쳐질때 보이는 콘텐츠 입니다.</p>
</details>
<mark>
<mark>태그는 어떤 이유로 강조 표시된 텍스트를 마크업하는 데 사용된다. 여기에는 검색 결과 또는 사용자가 강조 표시한 텍스트와 같은 항목이 포함될 수 있다.
<p>여기에 <mark>하이라이트</mark> 텍스트가 있습니다.</p>
<time>
<time>은 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용한다. 예를 들어, 일정의 경우 사용자 에이전트가 자동으로 달력에 일정을 추가할 수 있도록 정확한 일시를 나타낼 수 있다. 한가지 주의할점은 datetime속성은 정해진 포맷으로만 입력해야 하는 것이다.
<p>
다음 이벤트가 일어날 날짜:
<time datetime="2024-02-25">2024년 2월 25일</time>.
</p>
<progress>
<progress>태그는 진행률 표시줄을 표시하는 데 사용된다. 태그를 사용하면 사용자가 작업 진행 상황을 더 쉽게 이해할 수 있다.
<progress value="50" max="100"></progress>
Italic, Bold, Underline
위에서 이야기했던 요소들은 관련된 의미들을 명확히 구분한다. 그러나 <b>, <i>, <u>의 상황들은 좀 어지럽다. 이 요소들은 CSS가 형편없이 지원되거나 완전히 지원되지 않는 경우에 이탤릭체 또는 밑줄 등을 표현할 수 있도록 고안되었다. 의미론적이 아닌 표현에만 영향을 주는 이와 같은 요소들은 현재적 요소로 알려져 있으며, 더 이상 사용되어서는 안된다. 앞에서 살펴본 바와 같이 의미론은 접근성, SEO 등에 매우 중요하기 때문이다.
HTML5 에서는 <b>, <i>, <u> 를 조금 혼란스럽긴 하지만 새로운 의미론적 역할로 재정립 하였다.
<i> 요소는 과거로부터 줄곧 기울임꼴로 전달되는 의미를 전달하기 위해 사용된다. 외래어, 분류학 명칭, 전문 용어, 생각…
<b> 요소는 과거로부터 줄곧 굵은 글씨로 전달되는 의미를 전달할 때 사용한다. 주요 단어, 제품 이름, 주요 문장…
<u> 요소는 과거로부터 줄곧 밑줄을 치는 것으로 전달되는 의미를 전달할 떄 사용한다. 적절한 이름, 잘못된 철자…
의미가 정립되어 있긴 하지만 어디까지나 과거로부터 현재까지 전달되는 의미이지 진정한 의미론적 요소라고 보기는 힘들다. 위에서 말했듯이 <b>, <i>, <u> 요소는 사용하지말고 필요하다면 CSS를 이용해 구현하자.
위의 3요소는 스크린리더가 아무런 처리도 하지 않는다.
비의미론적 요소
때로는(이라고 쓰고 굉장히 자주) 일부 항목을 함께 그룹화하거나 일부 콘텐츠를 래핑하는 이상적인 의미 체계 요소를 찾을 수 없는 상황에 직면하게 된다. 때로는 요소 집합을 함께 그룹화하여 일부 CSS 또는 JavaScript를 사용하여 단일 엔터티로 모두 영향을 줄 수 있다. 이와 같은 경우 HTML은 <div> 및 <span> 요소를 제공한다. 가급적이면 적절한 클래스 속성과 함께 사용하여 쉽게 타겟팅 할 수 있도록 일종의 레이블을 제공해야 한다(WAI-ARIA 이용).
<span>은 인라인 비의미론적 요소로, 콘텐츠를 래핑할 더 나은 의미론적 텍스트 요소를 생각할 수 없거나 특정 의미를 추가하고 싶지 않은 경우에만 사용해야 힌다.
<div>는 블록 수준의 비의미론적 요소로, 사용할 더 나은 의미론적 블록 요소를 생각할 수 없거나 특정 의미를 추가하고 싶지 않은 경우에만 사용해야 한다. 예를 들어, 이커머스 사이트에서 시간을 보내는 동안 언제든지 불러올 수 있는 장바구니 위젯이 있다.
경고: div는 사용하기 너무 편리해서 많이 사용하기 쉽다. 의미론적 가치가 없기 때문에 HTML 코드를 복잡하게 만들 뿐이다. 더 나은 의미 체계 솔루션이 없을 때만 사용하고 사용량을 최소한으로 줄이지 않으면 문서를 업데이트하고 유지 관리하는 데 어려움을 겪을 것이다.
-
HTML 미세팁 모음
HTML 미세팁 모음
짚고 넘어가야할 HTML 내용이나, 미세팁 등을 정리해 본다.
(내가 알아낼수록 내용 더욱더 추가됨 😎)
엘리먼트 관련
<img> 엘리먼트에는 src뿐 아니라 alt도 필수 속성이다!
<h1> 과 같은 제목 엘리먼트를 이용해 텍스트를 크거나 굵게 만들면 안된다! 제목에만 사용하자.
<picture> 엘리먼트는 장치별 적합한 이미지를 사용해 적절한 대역폭을 사용하고 싶은 경우, 여러 확장자를 추가해 여러 브라우저에 대응하려는 경우 사용한다.
많은 <meta> 기능들이 더이상 사용되지 않는다. 대표적으로 <meta name="keywords" content="fill, in, your, keywords, here"> 같은 다른 검색 용어에 대해 해당 페이지의 관련성을 부여하기 위해 검색 엔진에 키워드를 제공하는 기능이였는데, 스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워버리는 악용 사례가 생겨 버렸기 때문에 이것들은 검색 엔진들이 아예 무시를 해버리게 되었다.
속도를 향상하기 위해 메인 콘텐츠가 완전히 로딩된 이후에 JavaScript로 <iframe>의 src 속성을 설정하는 편이 좋다. 웹 페이지를 더 빠르게 이용할 수 있고 SEO 측정 시 중요한 지표인 웹 페이지 로딩 시간을 단축할 수 있다.
페이지 관련
Favicon은 작은 이미지이므로 대비가 높은 단순한 이미지여야 한다.
URL을 링크 텍스트의 일부로 반복하지 않는다. URL이 보기 흉하며, 화면을 보는 사람들이 글자로 URL을 볼 때 이상하게 보인다. 링크 텍스트에 “링크”나 “링크로 이동”이라고 쓰지 않는다. 링크는 일반적으로 다른 색상으로 스타일링되고 밑줄이 그어져 있기 때문에 시각적으로 브라우저를 보는 사용자들도 링크가 있다는 것을 경험적으로 안다. (사용자들이 익숙하기 때문에 일반적으로 이 규칙을 어기면 안 된다.)
링크 텍스트를 가능한 짧게 작성한다. 화면 판독기는 전체 링크 텍스트를 해석해야 하므로 유용하다.
동일한 텍스트의 여러 복사본이 서로 다른 장소에 연결되는 경우를 최소화 한다. “여기 클릭”, “여기 클릭”, “여기 클릭”이라는 라벨이 붙어 있는 링크 목록이 있는 경우, 화면 판독기 사용자에게 문제가 발생할 수 있다
검색 엔진은 이미지 파일 이름을 읽고 SEO에 포함한다. 따라서 그 내용을 설명하는 파일 이름을 사용하자. img835.png 보다는 flower.jpg가 낫다.
Block Level Element vs Inline Element
Block Level Element (블록 수준 엘리먼트)
블록 수준 엘리먼트는 항상 새 줄에서 시작하며, 브라우저는 엘리먼트 앞뒤에 약간의 공백을 자동으로 추가한다.
블록 수준 엘리먼트는 항상 사용 가능한 전체 너비를 차지한다. (가능한 왼쪽과 오른쪽으로 뻗는다.)
대표적인 블록 수준 엘리먼트
address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1-h6, header, hr, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video
Inline Level Element (인라인 수준 엘리먼트)
인라인 엘리먼트는 새 줄에서 시작하지 않는다. 인라인 엘리먼트는 필요한 만큼만 너비를 차지한다.
대표적인 인라인 수준 엘리먼트
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var
인라인 엘리먼트는 블록 수준 엘리먼트를 포함할 수 없다!!!!
<button>
<div>잘못된 엘리먼트 포함</div>
<p>이렇게 하면 안돼요~</p>
</button>
HTML 작성가이드
1. 문서 맨 첫줄에 항상 DOCTYPE 선언
<!DOCTYPE html>
2. 소문자 엘리먼트 이름 사용
HTML은 엘리먼트의 대소문자를 구분하지 않지만 소문자를 사용하는 것이 좋다.
대문자와 소문자를 섞는 것은 좋지 않다.
개발자는 일반적으로 소문자 이름을 사용한다.
소문자가 더 깔끔해 보인다.
소문자는 쓰기가 더 쉽다.
<p>이건 좋지 않다.</p>
<p>이건 좋다.</p>
3. 모든 HTML 엘리먼트 닫기
<br />
<br />
<p>위의 경우는 자유지만 XHTML의 경우 닫아야 한다.</p>
4. 속성은 소문자로 작성하기
HTML에서는 속성 이름에 대문자와 소문자를 혼합할 수 있다.
그러나 2번과 같은 이유로 소문자로 작성하는 것이 좋다.
<img src="이건 별로다." />
<img src="이것도 별로다." />
<img src="이건 좋다." />
5. 속성값은 따옴표로 감싸자
HTML에서는 따옴표 없이 속성 값을 사용할 수 있다.
그러나 다음과 같은 이유로 속성 값을 따옴표로 감싸는 것이 좋습니다.
개발자는 일반적으로 속성 값을 따옴표로 감싼다.
따옴표로 묶인 값은 읽기가 더 쉽다.
값에 공백이 포함된 경우 반드시 따옴표를 사용해 한다.
<!-- 좋다. -->
<table class="striped"></table>
<!-- 별로다. -->
<table class=striped"></table>
6. <img> 에는 항상 alt, width, height 속성을 지정하자.
<img> 에 항상 alt, width, height 속성을 지정한다.
이미지가 어떤한 이유로든 표시되지 않을때 alt 속성의 값을 표시 할 수 있다. (이미지가 단순히 페이지를 꾸미는 용도라면 빈 문자열을 넣어도 무방)
width, height를 지정하면 브라우저가 해당 값만큼 공간을 예약할 수 있기 때문에 페이지 로드시의 깜박임이 줄어든다.
7. 등호 주변에 공백을 사용하지 말자
등호 주변에 공백을 허용하지만 사용하지 않는것이 좋다.
<!-- 좋다. -->
<link rel="stylesheet" href="styles.css" />
<!-- 별로다. -->
<link rel="stylesheet" href="styles.css" />
8. 한 페이지에 너무 많은 HTML 코드를 사용하지 작성하지 않기
가로로 스크롤 되지 않도록 주의하자. (보통 Linter나 Prettier의 도움을 받아 해결한다.)
9. 빈 줄과 들여쓰기
이유 없이 빈 줄, 공백 또는 들여쓰기를 추가하지 않는다.
가독성을 높이려면 빈 줄을 추가하여 큰 코드 블록이나 논리 코드 블록을 구분한다.
가독성을 위해 들여쓰기로 공백 두 개를 추가한다. 탭 키를 사용하지 않는다.
10. <title>은 중요하다!
페이지 제목의 내용은 검색 엔진 최적화에 매우 중요하다(SEO)! 페이지 제목은 검색 엔진 알고리즘에서 검색 결과 에 페이지를 나열할 순서를 결정하는 데 사용된다.
브라우저 도구 모음에서 제목을 정의한다.
페이지가 즐겨찾기에 추가될 때 페이지의 제목을 제공한다.
검색 엔진 결과에 페이지의 제목을 표시한다.
따라서 제목을 가능한 한 정확하고 의미 있게 작성해야 한다!
11. <html> 및 <body> 생략하지 않기
생략하면 오래된 브라우저에서 오류가 발생할 수 있다.
생략하면 DOM 및 XML 소프트웨어와 충돌 할 수도 있다.
12. <head>를 생략해도 될까?
페이지에 <head>가 생략된 경우 브라우저는 알아서 <head>를 추가하지만 명시적으로 작성해 주는것이 좋다.
13. 항상 lang 속성 추가
항상 lang속성을 <html>엘리먼트 내에 포함하자. 이는 검색 엔진과 브라우저를 지원하기 위한 것이다.
<html lang="ko"></html>
14. 메타데이터
문서의 적절한 해석과 올바른 검색 엔진 인덱싱을 보장하기 위해 문자 인코딩은 HTML 문서 내에 가능한 한 빨리 정의해야 한다.
<html>
<head>
<!-- 최신에는 UTF-8 외에는 아무것도 신경쓸 필요 없다. -->
<meta charset="UTF-8" />
</head>
</html>
15. 뷰포트 설정
모든 웹페이지에 다음 요소를 포함해야 한다. (반응형 웹사이트를 만들기 위해서도 필수)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
width: device-width: 페이지의 너비를 장치의 너비로 설정
initial-sacle: 1.0: 페이지 초기 확대/축소 수준 (1.0은 확대/축소가 없다는 의미)
모바일이나 태블릿에서 아래 2개를 비교해보면 바로 이해가 된다.
뷰포트 설정 없음
뷰포트 설정 있음
관례
가급적이면 페이지당 하나의 <h1>만 사용한다.
<h2> ~ <h6> 은 계층적으로 나타나야 한다.
꼭 필요한게 아니라면 <h1> ~ <h6>을 한 페이지에 3개 이상 사용하지 않는다. 많은 목차 레벨을 가진 문서(예를 들어 너무 깊은 heading 계층)는 다루기 힘들고 탐색하기 어렵다.
밑줄에 대한 위험성 - 사람들은 밑줄을 하이퍼링크와 강하게 연관시킨다. 따라서 웹에서는 링크에만 밑줄을 긋는 것이 가장 좋다. 의미론적으로 적합한 경우 <u> 요소를 사용하되, CSS를 사용하여 기본 밑줄을 웹에서 더 적합하게 변경할 수 있는지 고려한다.
진짜 맨날쓰는 HTML Entity
일부 기호는 HTML 예약되어 있으므로 Entity Number를 사용하여 문자를 표시해야 한다.
매우 자주쓰는건 아래와 같고 나머지는 필요할때 찾아 쓰면 된다.
공백 (두칸 이상의 공백이 필요한경우) -
< - <
> - >
& - &
" - "
' - '
-
-
인터넷의 작동 방식
개발자라면 인터넷이라는 단어를 자주 입에서 꺼내게 된다. 그러나 인터넷이 정확히 무엇인지 어떻게 동작하는지는 잘 모른다. 추상적인 덩어리로 머릿속에 있을뿐이다. 별로 알필요가 없어서일까? 반은 맞고 반은 틀린거 같다. 인터넷의 동작 원리나 정확한 개념을 몰라도 개발하는데는 별로 지장이 없다. 실제로 알아도 당신이 사용하는 프로그래밍 언어 스킬이 상승하지도 않는다.
그러나! 알고 있으면 좋겠다 라는 생각은 누구나 할것이라고 생각한다. 나 또한 추상적인 덩어리로 이해하고 있다. 글 맨 아래 Reference 링크에서 필수적이라고 생각되는 내용만 번역해서 써놓았다. 글을 읽고 궁금한 점은 각자 더 찾아보면 좋을 것이다.
앞서..
인터넷이 무엇인지 알기전에 네트워크가 무엇인지 알아야한다. 네트워크는 서로 연결된 컴퓨터 또는 기타 장치의 그룹이다. 예를 들어, 집에 컴퓨터나 디바이스가 있을 수 있고, 친구 집에도 비슷한 디바이스가 그리고 옆집에도 유사한 디바이스가 있을 수 있다. 이러한 모든 네트워크는 함께 연결될 떄 인터넷을 형성한다.
인터넷은 네트워크의 네트워크이다.
개요
인터넷은 일련의 표준화된 프로토콜을 사용하여 디바이스들과 컴퓨터 시스템을 함께 연결하여 작동한다. 이러한 프로토콜들은 디바이스 간에 정보가 교환되는 방식을 정의하고 데이터가 안정적이고 안전하게 전송되도록한다.
인터넷의 핵심은 서로 다른 장치와 시스템 간의 트래픽 전달을 담당하는 상호 연결된 라우터의 글로벌 네트워크란 점이다. 인터넷을 통해 데이터를 보내면 장치에서 라우터로 전송되는 작은 패킷으로 나누어 지는데, 라우터는 패킷을 검사하고 목적지로 향하는 경로의 다음 라우터로 전달한다. 이 프로세스는 패킷이 최종 목적지에 도달할 떄까지 계속된다.
여기서 패킷이 올바르게 송수신되도록 하기 위해 인터넷은 IP(Internet Protocol), TCP(Transmission Control Protocol)을 비롯한 다양한 프로토콜을 사용한다. IP는 패킷을 올바른 대상으로 라우팅하는 역할을 하는 반면 TCP는 패킷이 안정적이고 올바른 순서로 전송되도록 한다.
IP, TCP와 같은 핵심 프로토콜 외에도 DNS(Domain Name System), HTTP(HyperText Transfer Protocol) 및 SSL/TLS(Secure Sockets Layer/Transport Layer Security) 프로토콜을 포함하여 인터넷을 통한 통신 및 데이터 교환을 가능하게 하는 데 사용되는 다양한 기술 및 프로토콜이 있다.
기본 개념 및 용어
다음은 알아야 할 몇 가지 주요 용어와 개념이다.
패킷: 인터넷을 통해 전송되는 작은 데이터 단위.
라우터: 서로 다른 네트워크 간에 데이터 패킷을 전달하는 장치.
IP 주소: 네트워크의 각 장치에 할당된 고유 식별자로, 데이터를 올바른 대상으로 라우팅하는 데 사용된다.
도메인 이름: 웹 사이트를 식별하는 데 사용되는 사람이 읽을 수 있는 이름 (예: google.com).
DNS: 도메인 이름을 IP 주소로 변환하는 역할을 하는 시스템.
HTTP: 클라이언트(예: 웹 브라우저)와 서버(예: 웹 사이트)간에 데이터를 전송하는데 사용되는 프로토콜.
HTTPS: 클라이언트와 서버 간의 보안 통신을 제공하는데 사용되는 HTTP의 암호화된 버전.
SSL/TLS: 인터넷을 통한 보안 통신을 제공하는 프로토콜.
프로토콜의 역할
프로토콜은 인터넷을 통한 통신 및 데이터 교환을 가능하게 하는 데 중요한 역할을 한다. 프로토콜은 장치와 시스템 간에 정보가 교환되는 방식을 정의하는 일련의 규칙 및 표준이다.
앞서 말했듯이, 인터넷 통신에는 IP, TCP, UDP, DNS 등 다양한 프로토콜이 사용된다.
IP는 데이터 패킷을 올바른 대상으로 라우팅하는 역할을 하는 반면 TCP 및 UDP는 패킷이 안정적이고 효율적으로 전송되도록 한다. DNS는 도메인 이름을 IP 주소로 변환하는 데 사용되며 HTTP는 클라이언트와 서번 간에 데이터를 전송하는 데 사용된다.
표준화된 프로토콜을 사용하는 이유중 하나는 서로 다른 제조업체 및 공급업체의 장치 및 시스템이 서로 원활하게 통신할 수 있다는 점이다. 예를 들어, 한 회사에서 개발한 웹 브라우저는 둘 다 HTTP 프로토콜을 준수하는 한 다른 회사에서 개발한 웹 서버와 통신할 수 있다.
IP 주소 및 도메인 이름
IP 주소와 도메인 이름은 모두 중요한 개념이다.
IP 주소는 네트워크의 각 장치에 할당된 고유 식별자이다. 데이터를 올바른 대상으로 라우팅하여 정보가 의도한 수신자에게 전송되도록 하는 데 사용된다. IP 주소는 일반적으로 “192.168.1.1”과 같이 마침표로 구분된 일련의 4자리 숫자로 표시된다.
반면에 도메인 이름은 웹사이트 및 기타 인터넷 리소스를 식별하는 데 사용되는 사람이 읽을 수 있는 이름이다. 일반적으로 마침표로 구분된 두 개 이상의 부분으로 구성된다. 예를 들어 “google.com”은 도메인 이름이다. 도메인 이름은 DNS를 사용하여 IP 주소로 변환된다.
DNS는 도메인 이름을 IP 주소로 변환하는 인터넷 인프라의 중요한 부분이다. 웹 브라우저에 도메인 이름을 입력하면 컴퓨터가 DNS 쿼리를 DNS 서버로 보내고, DNS 서버는 해당 IP 주소를 반환한다. 그런 다음 컴퓨터는 해당 IP 주소를 사용하여 요청한 웹 사이트 또는 기타 리소스에 연결한다.
HTTP 및 HTTPS 소개
HTTP(Hypertext Transfer Protocol) 및 HTTPS(HTTP Secure)는 인터넷 기반 애플리케이션 및 서비스에서 가장 일반적으로 사용되는 두 가지 프토콜이다.
HTTP는 클라이언트(예: 웹 브라우저)와 서버(예: 웹 사이트) 간에 데이터를 전송하는 데 사용되는 프로토콜이다. 웹 사이트를 방문하면 웹 브라우저는 서버에 HTTP 요청을 보내 요청한 웹 페이지 또는 기타 리소스를 요청한다. 그런 다음 서버는 요청된 데이터가 포함된 HTTP 응답을 클라이언트로 다시 보낸다.
HTTPS는 SSL/TLS(Secure Sockets Layer/Transport Layer Security) 암호화를 사용하여 클라이언트와 서버 간에 전송되는 데이터를 암호화하는 보다 안전한 버전의 HTTP이다. 이는 로그인 자격 증명, 결제 정보 및 기타 개인 데이터와 같은 민감한 정보를 보호하는 데 도움이 되는 추가 보안 계층을 제공한다.
HTTPS를 사용하는 웹 사이트를 방문하면 웹 브라우저의 주소 표시줄에 자물쇠 아이콘이 표시되어 연결이 안전함을 나타낸다. 웹 사이트 주소의 시작 부분에 “http”가 아닌 “https”라는 문자가 표시될 수도 있다.
TCP/IP를 사용하여 응용 프로그램 빌드
TCP/IP(Transmission Control Protocol/Internet Protocol)는 대부분의 인터넷 기반 응용 프로그램 및 서비스에서 사용하는 기본 통신 프로토콜이다. 서로 다른 장치에서 실행되는 응용 프로그램 간에 신뢰할 수 있고 순서가 지정되며 오류 검사된 데이터 전달을 제공한다.
TCP/IP를 사용하여 애플리케이션을 빌드할 때 이해해야 할 몇 가지 주요 개념이 있다.
포트: 포트는 장치에서 실행 중인 응용 프로그램 또는 서비스를 식별하는 데 사용된다. 각 응용 프로그램 또는 서비스에는 고유한 포트 번호가 할당되어 데이터를 올바른 대상으로 보낼 수 있다.
소켓: 소켓은 IP 주소와 포트 번호의 조합으로, 통신을 위한 특정 끝점을 나타낸다. 소켓은 장치 간의 연결을 설정하고 응용 프로그램 간에 데이터를 전송하는 데 사용된다.
연결: 두 장치가 서로 통신하려고 할 때 두 소켓 간에 연결이 설정된다. 연결 설정 프로세스 중에 장치는 최대 세그먼트 크기 및 창 크기와 같은 다양한 매개 변수를 협상하여 연결을 통해 데이터를 전송하는 방법을 결정한다.
데이터 전송: 연결이 설정되면 각 장치에서 실행되는 애플리케이션 간에 데이터를 전송할 수 있다. 데이터는 일반적으로 세그먼트로 전송되며, 각 세그먼트에는 안정적인 전달을 보장하기 위해 시퀀스 번호와 기타 메타데이터가 포함된다.
SSL/TLS를 사용한 인터넷 통신 보안
앞서 이야기한 바와 같이 SSL/TLS는 인터넷을 통해 전송되는 데이터를 암호화하는 데 사용되는 프토콜이다. 일반적으로 웹 브라우저, 이메일 클라이언트 및 파일 전송 프로그램과 같은 응용 프로그램에 대한 보안 연결을 제공하는 데 사용된다.
SSL/TLS를 사용하여 인터넷 통신을 보호할 때 이해해야 할 몇 가지 주요 개념이 있다.
인증서: SSL/TLS 인증서는 클라이언트와 서버 간의 신뢰를 설정하는 데 사용된다. 여기에는 서버 ID에 대한 정보가 포함되어 있으며 신뢰성을 확인하기 위해 신뢰할 수 있는 제3자(인증 기관)가 서명한다.
핸드셰이크: SSL/TLS 핸드쉐이크 프로세스 중에 클라이언트와 서버는 보안 연결을 위한 암호화 알고리즘 및 기타 매개변수를 협상하기 위해 정보를 교환한다.
암호화: 보안 연결이 설정되면 합의된 알고리즘을 사용하여 데이터가 암호화되고 클라이언트와 서버 간에 안전하게 전송될 수 있다.
정리
인터넷은 표준 통신 프로토콜 집합을 사용하여 데이터를 교환하는 상호 연결된 컴퓨터의 글로벌 네트워크다.
인터넷은 IP 및 TCP와 같은 표준화된 프로토콜을 사용하여 장치와 컴퓨터 시스템을 함께 연결하여 작동한다.
인터넷의 핵심은 서로 다른 장치와 시스템 간에 트래픽을 전달하는 상호 연결된 라우터의 글로벌 네트워크다.
익숙해져야 하는 기본 개념 및 용어에는 패킷, 라우터, IP 주소, 도메인 이름, DNS, HTTP, HTTPS 및 SSL/TLS가 포함된다.
프로토콜은 인터넷을 통한 통신 및 데이터 교환을 가능하게 하는 데 중요한 역할을 하며, 다양한 제조업체 및 공급업체의 장치와 시스템이 원활하게 통신할 수 있도록 한다.
마치며
개발이나 혹은 관련된 일을 한지 얼마 되지 않았다면 글을 읽어도 여전히 추상적일 것이다. 실제로 여기서 나온 개념들중 소프트웨어 개발자가 실제로 제어하는것은 많지 않다. 그러니 여전히 추상적이여도 너무 걱정할 필요가 없다. 아래에는 도움이 될만한 영상 URL을 몇개 첨부해 놓았다. 인터넷을 이해하는데 좀 더 도움이 될것이다.
재밌게 볼만한 영상
인터넷의 원리는 무엇일까? 한글자막이 제공된다!
How the Internet Works in 5 Minutes
Reference
MDN - How does the Internet work?
cs.fyi - How does the Internet work?
-
ARQHIVE
