웹표준이란?
2000년대 초에는 인터넷 익스플로러에서는 작동이 되어도 사파리나 파이어폭스 같은 다른 브라우저에서는 작동이 되지 않는 등 브라우저간 호환이 되지 않아서 댓글을 못 다는 정도가 아니라 화면이 아예 정상적으로 나오지 않는 일도 있었습니다. 이를 막고, 웹을 정상적으로 구동시키기 위해서는 개발자들이 각 브라우저마다 따로 개발을 해주어야만 했습니다. 이런 수고를 없애고 웹 개발의 형식을 통일시킨 것이 바로 웹 표준이라고 합니다
웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있습니다. 웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다룹니다. 이 세 기술은 화면의 구조, 표현, 동작을 각각 담당합니다.
Semantic HTML
웹 표준에서는 HTML을 시멘틱(semantic)하게 작성하는 것의 중요성을 강조합니다. 그래야 개발자 간 소통도 잘되고, 검색 엔진에도 잘 걸리고(검색 효율성), 웹 접근성까지 높아지기 때문이죠!
시멘틱 태그의 예시는 다음과 같습니다.
<header> : 웹페이지의 머리말을 나타내는 태그
<nav> : 웹페이지의 메뉴를 나타내는 태그
<main> : 웹페이지의 핵심 내용을 담는 태그
<section> : 문서의 일부분을 나타내는 태그
<article> : 독립적으로 구성 가능한 문서나 글을 나타내는 태그
<aside> : 문서의 별도 내용을 나타내는 태그
<footer> : 웹페이지의 바닥글을 나타내는 태그
+
<p> 태그도 semantic 요소이다.
하나의 paragragh (단락)이라는 의미를 부여
article과 section 구분법?
뚝 ! 끊기지 않고 독립적으로 사용가능 - <article>
재사용성 0 - <section>
그렇지 않은 태그의 예시는 다음과 같습니다.
<div>: 영역을 나누기 위한 일반적인 컨테이너 태그
<span>: 텍스트나 인라인 요소를 그룹화하기 위한 태그
<br> : 줄바꿈을 나타내는 태그
<hr> : 수평선을 나타내는 태그
<img> : 이미지를 삽입하기 위한 태그
자주 틀리는 마크업
웹표준을 저해하는 마크업은 되도록이면 사용하면 안됨
1. 인라인 요소안에 블록요소를 넣으면 안됨
// h1, div 요소는 블록 요소이고,
// label, span 요소는 인라인 요소입니다.
(나쁜 예시)
<label> <h1>나쁜 예시 1</h1> </label>
<span> <div>나쁜 예시 2</div> </span>
(좋은 예시)
<h1> <label>나쁜 예시 1</label> </h1>
<div> <span>나쁜 예시 2</span> </div>블록요소 안에 인라인요소 넣기 굳
인라인 요소 안에 다른 인라인 요소를 넣는 것은 일반적으로 괜찮
<참고로 블록요소와 인라인요소 구분한 것>
HTML에서 대표적인 블록요소 태그는 다음과 같습니다:
<div> : 구획을 나누는 데 사용되며, CSS 스타일을 적용할 수 있습니다.
<h1>~<h6> : 제목을 나타내며, 숫자가 작을수록 큰 크기를 갖습니다.
<p> : 문단을 나타내며, 기본적으로 위아래 여백이 존재합니다.
<ul> : 순서가 없는 목록을 나타냅니다.
<ol> : 순서가 있는 목록을 나타냅니다.
<li> : 목록의 항목을 나타냅니다.
<table> : 표를 나타내며, <tr>, <th>, <td> 태그와 함께 사용합니다.
<form> : 입력 양식을 나타내며, <input>, <label>, <button> 태그와 함께 사용합니다.
인라인 요소 태그는 다음과 같습니다:
<span> : 특정 부분을 강조하거나 스타일을 적용할 때 사용합니다.
<a> : 하이퍼링크를 만들 때 사용합니다.
<img> : 이미지를 나타내며, src 속성을 이용해 이미지 파일 경로를 지정합니다.
<strong> : 강조하는 단어나 구를 나타냅니다.
<em> : 강조하는 내용을 기울임꼴로 표시합니다.
<br> : 줄바꿈을 나타냅니다.
<input> : 사용자 입력을 받는 데 사용되며, type 속성에 따라 다양한 형태로 사용할 수 있습니다.
+
section 바로 아래에 li 태그가 오면 안되지만, h1 태그가 나온뒤에 li 태그가 나와도는 되는거지?
마크업 규칙에 따르면, <section> 요소 안에 <li> 요소가 직접 포함될 수는 없습니다.
<li>요소는 바로 <ul>이나 <ol>요소가 감싸주어야합니다. (중간에 뭐 껴있으면 안됨!)
<section> 요소 안에 <li> 요소를 직접 포함하는 것은 올바른 마크업이 아닙니다.
다음은 좋은 예시이다.
<section>
<h1>섹션 제목</h1>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
</section>2. <b>, <i> 요소 사용하지 않기
<b> 요소와 <i> 요소는 각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용하는 요소입니다.
하지만,표현을 기준으로 이름이 지어진 요소이기 때문이기 때문에
대신 <strong> 요소와 <em> 요소를 사용하는 것이 좋습니다.
<b>글씨를 두껍게</b> -- 대체하기 --> <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i> -- 대체하기 --> <em>콘텐츠 강조하기</em>
3. <hgroup> 마구잡이로 사용하면 안됨
<hgroup> 요소들은 목차의 역할을 하면서 콘텐츠의 상하 관계를 표시하기 위해서 사용함.
단순히 글씨 크기를 줄이거나 키우려면 css를 사용하는게 좋음
// 나쁜 예시
<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>
4. <br /> 연속으로 사용하면 안됨
<br /> 은 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소임
간격이나 여백을 만들기 위해서는 css를 사용하길!
// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.
// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>
// 좋은 예시 2
//HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>
//CSS 파일
.margin { margin: 10px }
5. 인라인 스타일링 사용하지 않기
웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하면서 각 영역이 분리되어 깔끔했음.
그런데 HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것과 같음(말짱 도루묵)
웹 표준을 지키기 위해서는, HTML과 CSS 코드를 분리해서 작성하길
//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" }'Web system' 카테고리의 다른 글
| 네트워크 계층모델 (OSI 7계층 모델, TCP/IP 4계층 모델) (0) | 2023.05.01 |
|---|---|
| 네트워크 심화(IP 패킷이란, TCP와 UDP 비교) (0) | 2023.05.01 |
| REST API와 REST 성숙도 모델 (0) | 2023.03.29 |
| API 가 도대체 뭔지 딱 정리해줌 (0) | 2023.03.29 |
| SSR과 CSR 비교해봄 (0) | 2023.03.28 |
