[사용자 친화 웹] 웹 표준 &

인터넷은 웹 기반으로 작동하나요? 아니요!

인터넷은 웹보다 더 넓은 개념입니다.

인터넷

‘전 세계적으로 연결된 컴퓨터 네트워크의 네트워크’

웹뿐만 아니라 온라인 게임, 앱, 이메일 등 네트워크를 이용하는 다양한 서비스를 포함한다.

인터넷

문서, 사진, 동영상 등 다양한 정보를 많은 사람들과 공유할 수 있습니다.

‘공간’

예를 들어 웹툰(웹+만화)도 인터넷만 연결되면 웹이라는 공간에서 창작될 수 있다.

만화도 보고 작가, 독자와도 소통할 수 있다.

웹 표준

W3C(https://www.w3.org/) 추천 “웹에서 사용되는 표준 기술 또는 규칙”에서,

사용자가 사용하는 운영 체제나 브라우저에 관계없이
웹사이트가 동일하게 보이고 정상적으로 작동하도록 하기 위해 여기에는 웹 페이지를 만드는 기술이 포함되어 있습니다.

웹 표준에 따라 웹 사이트를 만들면 어떤 이점이 있습니까?

1. 손쉬운 유지 보수
   – 웹 표준이 등장하기 전에는 구조, 표현, 동작이 혼합된 코드가 많았습니다.
   
   
   각 구역이 분리되어 있어 유지관리 용이 및 교통비 절감
2. 웹 호환성 보장
   – 웹 브라우저의 유형이나 버전, 운영 체제 또는 사용하는 장치에 관계없이 결과는 항상 동일합니다.
   
   

3. 검색 효율성 증가
   – 검색 엔진에서 더 높은 우선 순위
   – 광고비를 들이지 않고도 검색 효율을 높일 수 있다.
   
   

4. 웹 접근성 향상
   – 브라우저 종류, 운영체제 종류, 디바이스 종류 등 모든 환경과 사용자별
   그러나 웹 사이트 개발은 쉽지 않습니다.
   
   

   웹 표준 개발은 이러한 문제를 해결할 수 있습니다.
   
   

시맨틱 HTML

• 시맨틱 : 분별 있는, 분별 있는
• HTML : 화면의 구조(스켈레톤)를 만드는 마크업 언어

시맨틱 HTML은 HTML을 구조화된 것보다 더 의미 있게 만드는 것을 목표로 합니다.

시맨틱 HTML이 필요한 이유는 무엇입니까?

• 개발자 간의 커뮤니케이션

  요소 때문에

  그리고 요소의 이름만으로 요소에 어떤 내용이 포함될지 모르거나,
  시맨틱 HTML을 구축하는 데는 적합하지 않습니다.
  
  

• 웹 접근성

  시맨틱 HTML을 생성하는 것만으로도 웹 접근성을 향상시킬 수 있습니다.
  
  

• 검색 효율성

  귀하의 웹사이트가 검색 엔진에 더 자주 나타나기를 원하신다면,
  광고비 같은 추가 비용 없이 시맨틱 HTML을 잘 디자인하면 어느 정도 효과를 볼 수 있다.
  
  

시맨틱 요소의 유형

자주 틀리는 마크업

1⃣ 인라인 요소 안에 블록 요소 넣기

// h1, div 요소는 블록 요소이고,
// a, span 요소는 인라인 요소입니다.



<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>

2⃣수 ,

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

// 나쁜 예시
<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>

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



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

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

(O) <h1>스타일링 속성은 CSS로 작성해주세요.</h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.

</h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>  
 
//CSS 파일
h2 { color : "yellow" }