백엔드 프로젝트 1주차 (Learn HTML) - 4

Semantic HTML

🎯Introduction to Semantic HTML

웹페이지를 만들 때, 의미가 없는(non-semantic) HTML과 의미가 있는(semantic) HTML을 혼합하여 사용함. semantic이라는 것은 "의미와 관련된"이라는 뜻이며, semantic 요소는 오프닝과 클로징 태그사이의 정보를 포함함.

 

Semantic HTML을 사용함으로써, 우리는 어떻게 보여지는지가 아닌 어떤 의미를 지니는지에 기반하여 HTML 요소를 선택함. 태그 안에 어떤 의미가 있는지에 대한 정보를 제공하지 않는 <div>와 <span>과 같은 요소들은 semantic 요소가 아님.

 

예를 들어 <div> 요소를 사용하여 제목(header)의 정보를 보유하는 대신, 우리는 <header>라고 하는 요소를 사용함. <header> 태그를 <div> 태그 대신 사용함으로써, 오프닝과 클로징 태그 안에 들어있는 정보가 무엇인지 그 맥락에 대한 정보를 제공할 수 있게 됨.

 

🔎Semantic HTML을 사용하는 이유는 무엇인가

 

• 접근성: Semantic HTML은 모바일 디바이스로부터의 접근이나 장애인의 접근을 원활하게 해줌. 이는 스크린 리더와 브라우저가 코드를 더욱 잘 해석할 수 있기 때문임.
• SEO: 웹사이트의 SEO(Search Engine Optimization, 웹페이지 방문자 수를 증가시키는 프로세스)를 향상시킴. 더 나은 SEO로, 검색 엔진은 우리의 웹페이지를 더 잘 식별할 수 있으며 가장 중요한 내용물에 적절하게 가중치를 둘 것임.
• 이해도: 개발자들이 웹사이트의 소스 코드를 잘 이해할 수 있도록 해줌.

이를 잘 이해하기 위해서는, non-semantic HTML을 각 영역에 판매하는 물건 표시가 없는 가게에 들어서는 것처럼 생각하면 됨. 간판이 없기 때문에, 어떤 영역에서 무슨 제품을 판매하는지 알 수 없어 이를 찾는 데 시간이 오래 걸림. 하지만 영역 별로 판매 제품이 표시되어있는 가게는 semantic HTML처럼 필요한 물건을 훨씬 쉽게 찾을 수 있음.

 

 

 

 

🎯Header and Nav

웹페이지의 구조 설계에 도움을 주는 semantic 요소들을 살펴보면 우선 <header>라는 요소가 있음. <header> 요소는 보통 <h1>에서 <h6>까지의 제목을 표시하는 서론이나 운 링크를 포함하고 있음.

 

아래는 <header> 요소의 코드 예시임.

<header>
  <h1>
     Everything you need to know about pizza!
  </h1>
</header>

위 예시 코드는 <header> 태그 대신 <div> 태그를 사용한 아래 코드와 비교 가능함.

<div id="header">
  <h1>
    Everything you need to know about pizza!
  </h1>
</div>

<header> 태그를 사용함으로써, 우리는 쉽게 코드를 읽을 수 있음. <h1> 부모 태그 안에 무엇이 있는지 식별하기 더욱 쉬워졌으며, 이는 태그 안에 무엇이 있는지에 대한 세부 사항을 제공하지 않는 <div> 태그 코드와 확연히 비교됨.

 

<nav> 태그는 메뉴나 목차와 같은 탐색 링크의 블럭을 정의하기 위해 사용됨. <nav>는 <header>의 안에 포함될 수 있지만 단독으로 사용하지는 못한다는 점을 기억해야 함.

<header> 
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>   
    </ul>
  </nav>
</header>

• a href #: href 태그 안에 기입한 주소값을 이용하여 다른 문서 혹은 같은 문서 내에서의 이동을 위해 사용
  (출처: https://blog.naver.com/tothe_point/221637487599)

탐색 링크를 라벨링하기 위한 방법으로 <nav>를 사용함으로써, 우리 뿐만이 아니라 웹브라우저와 스크린 리더 또한 코드를 더욱 쉽게 읽을 수 있음.

 

 

 

🎯Main and Footer

두 가지 더 구조적인 요소로는 <main>과 <footer>가 있음. 이 요소들은 <nav>나 <header>와 함께 관습적인 웹개발 표준을 바탕으로, 요소들이 어디에 위치하는지 설명하는 것을 도움.

<main> 요소는 웹페이지의 주된 내용을 요약하기 위해 사용함. 이 태그는 웹페이지의 <footer>, <nav>와 구별되는 지점은 해당 요소들은 주요한 내용을 포함하지 않는다는 것임.

<main>
  <header>
    <h1>Types of Sports</h1>
  </header>
  <article>
    <h3>Baseball</h3>
    <p>
      The first game of baseball was played in Cooperstown, New York in the summer of 1839.
    </p>
  </article>
</main>

• <main> 태그는 <article>과 <header>를 자식으로 보유하는데, 이들은 페이지와 관련된 가장 중요한 정보들을 다룸.

페이지 맨 아래에 있는 내용은 footer라고 하며, <footer> 요소로 나타낼 수 있음.

footer는 다음과 같은 정보들을 보유할 수 있음.

• 연락망 정보
• 저작권 정보
• 이용약관
• 사이트 맵
• 맨 위 링크 참조

<footer>
  <p>Email me at Codey@Codecademy.com</p>
</footer>

• 위 예시 코드에서 footer는 연락망 정를 포함하기 위해 사용됨.

<footer> 태그는 <main> 태그와 분리되며, 주로 내용물의 바닥에 위치함.

 

 

 

🎯Article and Section

Semantic HTML의 내용에 무엇이 들어가는지 살펴볼 때, <section>과 <article>에 대해 알아볼 것.

<section>은 목차, 제목과 같은 문서의 영역을 같은 테마로 정의하는 역할을 함. 예를들어, 크리켓에 관한 기사와 같은 주제를 가진 내용은 하나의 <section> 안으로 들어감. 웹사이트의 홈페이지는 소개, 뉴스 기사, 연락처 정보를 위한 섹션으로 나눌 수 있음.

<section>
  <h2>Fun Facts About Cricket</h2> 
</section>

• 위 코드에서 완성한 <section> 요소는 캡슐화를 위한 것이며, <h2>요소를 추가함.

<article>은 자기 자신이 의미를 지니는 내용물을 다룸. 기사, 블로그, 코멘트, 잡지 등을 넣을 수 있으며, 사용자가 스크린 리더를 사용하여 article의 내용(텍스트, 이미지, 비디오의 혼합물)이 어디서 시작해서 어디서 끝나는지 파악할 수 있도록 도와줌.

<section>
  <h2>Fun Facts About Cricket</h2>
  <article>
    <p>A single match of cricket can last up to 5 days.</p>
  </article>
</section>

• 위 코드에서 크리켓에 대한 정보를 전달하는 <article> 요소는 <section> 요소 안쪽에 배치되어있음.
• <section> 요소는 문맥에 따라 <article> 요소 안쪽에 넣을 수 있음.

 

 

🎯The Aside Element

<aside> 요소는 추가적인 정보를 표시하기 위해 사용되며, 이 정보는 다른 요소를 강조하지만 주된 맥락을 이해하기 위해 필수적인 요소는 아님.

이 요소는 <article>이나 <section>과 같은 다른 요소들과 함께 사용함.

<aside> 요소가 흔히 사용되는 곳은 다음과 같음:

• 참고 문헌
• 글쓴이 프로필
• 댓글
• 기사 발췌문
• 편집 사이드바
• 추가 정보

<article>
  <p>The first World Series was played between Pittsburgh and Boston in 1903 and was a nine-game series.</p>
</article>
<aside>
  <p>
   Babe Ruth once stated, “Heroes get remembered, but legends never die.” 
  </p>
</aside>

• <article>와 함께 <aside> 사용
• <article> 안에 있는 정보는 주된 맥락인 반면, <aside> 안의 정보는 <article>의 정보를 이해하기 위해 꼭 필요한 것은 아님.

 

🎯Figure and Figcaption

<aside>를 이용하여 주된 내용 외에 추가적인 텍스트를 덧붙일 수 있었지만, 만약 추가적인 이미지나 설명을 더해야 할 때는 다른 방법을 사용해야 함. <figure>와 <figcaption>이라는 태그가 있음.

 

<figure> 요소는 문서의 주된 흐름과 연관된 이미지, 설명, 다이어그램, 코드 토막과 같은 미디어들을 포함함. 

<figure>
  <img src="overwatch.jpg">
</figure>

• 위 코드에서 <figure> 태그는 <img> 태그를 에워싸고 있음. <figure> 안의 <img> 태그를 이용하여 웹페이지 안에 이미지를 삽입하며, src 속성을 사용하여 이미지의 소스 코드를 연결시킴.

<figcaption>을 이용해서 사진, 삽화에 대한 설명을 붙일 수 있음.

<figcaption>은 <figure> 태그에 담긴 미디어를 설명하는 역할을 함. 주로 <figcaption>은 <figure> 안으로 들어감. 이는 <p>를 이용하여 내용을 설명하는 것과는 확연히 다름. <figure>의 위치를 바꾸기로 결정했다면, 단락의 태그는 아마도 figure로부터 다른 곳으로 이동되었겠지만 <figcaption>은 figure와 함께 움직이지 않음. 이는 추가 설명이 있는 이미지들을 그룹화할 때 유용함.

<figure>
  <img src="overwatch.jpg">
  <figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>

• 위 예시에서, <figcaption>을 <figure>안에 더하여 이전 예시의 이미지를 설명하고 있음. 이는 <figure> 내용과 <figcaption> 내용을 그룹화하는 데 도움을 줌.

<figure> 안의 내용이 주된 흐름과 연관되어 있을 수 있지만, 그 배치는 독립적임. 이는 즉 문서의 흐름과 상관 없이 아무 곳으로 이동시키거나 제거할 수 있다는 것임.

 

 

 

🎯Audio and Attributes

지금까지는 텍스트 기반의 내용물을 알아보았다면, 이제는 <audio>에 대해 알아볼 것. 확실히 모든 사람들은 <audio>를 필요로 함. 

<audio> 요소는 문서에 오디오 내용물을 넣을 때 필요함. <video>, <audio> 등은 src를 사용하여 오디오 소스를 연결함.

<audio>
  <source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>

• 위 예시에서 <audio> 요소를 생성하고 <source> 요소를 사용하여 오디오 링크를 에워쌈(iAmAnAudioFile.mp3가 우리의 오디오 파일임).
• type 속성을 사용하여 종류를 특정하고 어떤 오디오인지 명명함. 필수적인  것은 아니고 권고사항이지만, 오디오의 종류를 명시하는 것은 브라우저가 이를 더욱 쉽게 식별하고 해당 브라우저가 지원하는 오디오 파일 형식인지 판단할 수 있도록 도와줌.

이제 오디오 파일을 브라우저에 연결했지만, 컨트롤러가 필요함. 이것이 attribute가 필요한 이유임. Atrributes(속성)는 요소에 대한 추가적인 정보를 제공함.

속성은 우리가 오디오 파일에서 많은 것들을 할 수 있도록 해주는데, 이번에는 controls과 src 속성만 공부할 것.

• controls: 재생, 음소거와 같은 기본 컨트롤러를 브라우저에 자동으로 배치
• src: 오디오 파일의 URL을 특정함

src 속성은 이미 위 예시 코드에서 사용해보았음. 더 많은 속성들을 <audi>의 오프닝 태그에 넣을 수 있는데, 예를들어 자동 재생과 오디오 컨트롤러를 동시에 넣는 방법도 있음. (아래 코드)

<audio autoplay controls>

 

 

 

🎯Video and Embed

이전 실습에서 보았던 것처럼, 미디어 내용물은 웹사이트에 유용하게 작용할 수 있음. <video> 요소를 통해, 우리는 웹사이트에 비디오를 추가할 수 있음. <video> 요소는 개발자가 사용자에게 비디오를 보여줄 수 있도록 시도하는 것임.

 

비디오 재생을 변경할 수 있는 속성들은 다음과 같음:

• controls: 멈춤/재생 버튼이 비디오에 추가되며, 음량 조절과 전체화면 옵션 또한 같이 생성됨.
• autoplay: 페이지가 로드되었을 때 자동으로 재생되도록 함.
• loop: 비디오가 연속 재생되도록 함.

<video src="coding.mp4" controls>Video not supported</video>

• 위 예시에서, coding.mp4라고 하는 비디오가 재생됨
• Video not supported라는 문구는 브라우저가 비디오를 보여줄 수 없을 때에만 나타남.

또다른 미디어 내용물 보유 태그로는 <embed>가 있는데, 이는 비디오, 오디오, gif 파일 등 온라인에 있는 어느 미디어 파일이든 상관없이 페이지에 추가할 수 있도록 함. 이는 즉 embed 버튼이 있는 웹사이트는 다른 웹사이트에 더해질 수 있는미디어 내용물 형식을 지니고 있다는 것임.

<embed> 태그는 <video>와 달리 자체 닫힘 태그임.

<embed>는 더 이상 사용되지 않는 태그이며 <video>, <audio>, <img>와 같은 다른 대안을 대신 사용해야 하지만 오래 전 코드를 읽었을 때 이해할 수 있도록 하기 위해 배우는 것임.

<embed src="download.gif"/>

• 위 예시에서 <embed>는 download.gif라는 로컬의 gif 파일을 웹페이지에 추가하는 데 사용됨.
• Embed는 다른 웹사이트 뿐만이 아니라 로컬에 있는 파일을 업로드하는 목적으로도 사용됨.

 

 

🎯Review

🌐Semantic HTML: 특정한 요소들을 통해, 태그 사이에 있는 내용이 무엇인지에 대한 맥락을 제공하며 웹페이지의 의미를 소개함.

• Semantic HTML은 현대에 표준적이며, 웹페이지 번역을 위해 스크린 리더를 사용하는 사용자들에게 있어서 접근하기 쉽고, 웹사이트의 SEO를 향상시켜 주는 등의 장점을 지님.

🌐<header>, <nav>, <main>, <footer>는 웹페이지의 기본 구조를 다룸.

🌐<section>은 목차, 제목, 또는 같은 주제를 가진 문서 내의 다른 영역 등 문서 내의 요소들을 정의 및 구분함.

🌐<article>은 기사, 블로그, 댓글과 같이 그 자체로 의미를 지니는 내용물을 다룸.

🌐<aside>는 주된 내용과 연관된 정보지만, 주된 정보를 이해하기 위해 반드시 필요한 것은 아님.

🌐<figure>는 모든 종류의 미디어를 포함함.

🌐<figcaption>은 <figure>의 미디어를 설명하는 데 사용됨.

🌐<video>, <embed>, <audio> 요소들은 미디어 파일을 다룸.