티스토리 뷰

HTML

[HTML] Header and Nav

Dongi 2021. 11. 26. 09:03

안녕하세요 동기 여러분! 오늘은 Semantic HTML의 첫 번째 시간 Header와 Nav에 대해 알아보려 합니다. 주제에 다가가기 앞서 Semantic HTML이 뭔지 알아봅시다.

 

Semantic HTML

여러분은 방에 있는 책들을 정리 할 때 어떻게 정리를 하시나요? 

 

규칙 없이 마구 잡이로 책을 꽂아 넣는다면 → Non-semantic HTML

적절한 규칙으로 잘 정리한다면 → Semantic HTML입니다ㅎ

 

* 사전에서의 Semantic : 의미의, 의미론적인

 

Jungle Disk에 Semantic HTML에 대해 잘 정리를 해두었는데 제가 링크한 사이트로 가셔서 스크롤을 내리다가 나오는 첫 번째 그림에서 Non-semantic HTML과 Semantic HTML의 특징을 아주 잘 표현하고 있습니다. 
링크 : https://www.jungledisk.com/blog/2017/12/04/should-i-bother-with-semantic-html/
 

HTML Sematic Tags: Should I Bother With Semantic HTML?

With all the new front-end frameworks and tools it’s easy to forget that HTML is designed to give your content meaning on its own at the foundational level.

www.jungledisk.com

 

 

Semantic HTML로 웹을 만드는 이유

아니 코드 짜는 것도 힘든데 막 만들어서 그냥 사용자가 보기 편하게만 만들면 되는 거 아닌가 생각할 수도 있지만 Semantic HTML로 웹을 만드는 이유가 있습니다.

 

  1. 접근성(Accessibility) : Semantic HTML은 모바일 사용자들과 장애인들의 웹 페이지 접근성을 용이하게 합니다. 이유는 screen reader나 브라우저가 코드를 더욱더 잘 해석할 수 있기 때문입니다.
  2. SEO : 검색 엔진 최적화(Search Engine Optimization)가 Semantic HTML을 더욱 더 잘 식별해낼 수 있습니다. 그렇게 된다면 개발자가 만든 웹 사이트가 검색에 더욱 노출될 가능성이 높아지기 때문에 더 많은 사용자를 모을 수 있습니다.
  3. 이해가 쉬움 : 웹 개발자들이 더욱 쉽고 빠르게 웹 사이트를 이해할 수 있게 됩니다.

 

 

Header and Nav

 

<header></header>

Semantic HTML을 만들기 위한 첫 번째 태그는 바로 <header> 태그입니다. 

 

<head> 태그와 살짝 쿵? 헷갈릴 수도 있는데 <head> 태그는 웹 속성 정보(Meta data)를 나타내 주는 기능을 담당하기에 <header>와는 완전히 다릅니다.

<head> 태그 관련 블로그 포스팅
링크 : https://dongi-coding.tistory.com/80
 

[HTML] The <html> Tag, Head

안녕하세요. 동기 여러분 오늘은 태그와 태그에 대해 알아봅시다! The Tag HTML에서 구조(Structure)와 내용(Content)을 만들어 내기 위해서는 반드시 태그를 <!DOCTYPE html> 뒤에 넣어 주어야 합니다. <!DOCTYP

dongi-coding.tistory.com

 

 

<header>에는 제목이나 로고, 소개, 목차 등등 사용자 편리하게 내용을 파악할 수 있는 정보들을 넣어 보여줄 수 있습니다.

 

 

생김새

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>
        하와이안 피자는 하와이에서 만든 피자일까?
      </h1>
    </header>
  </body>
</html>

 

위 코드를 보면 아주 깔끔하고 알아보기가 상당히 편리 한데, <div> 태그로 작성한다면 어떨까요?

<!DOCTYPE html>
<html>
  <body>
    <div id="header">
      <h1>
        하와이안 피자는 하와이에서 만든 피자일까?
      </h1>
    </div>
  </body>
</html>

지금은 코드가 짧아서 쉽게 알아볼 수 있지만 코드가 길어진다면 상당히 지저분해 보일 수도 있겠네요!

 

 

<nav></nav>

nav는 navigational links의 줄임말입니다. navigate가 길을 찾다, 항해하다 라는 뜻이 있으니까 한국어로 하면 길잡이 링크 정도 될 거 같습니다.

 

고로 <nav> 이 친구는 길 잡아 주는 링크를 만들어주는 태그가 되겠군요? (목차 링크)

 

 

생김새

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>
        하와이안 피자는 하와이에서 만든 피자일까?
      </h1>
      <nav>
        <ul>
          <li><a href="#탄생 지역">탄생 지역</a></li>
          <li><a href="#사람들이 좋아하는 이유">사람들이 좋아하는 이유</a></li>
          <li><a href="#사람들이 싫어하는 이유">사람들이 싫어하는 이유</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

 

리스트 태그인 <ul>, <li>와 링크 태그인 <a href="">를 <nav>의 자식 태그로 사용하여 위와 같은 코드를 만들 수 있습니다. 아래는 실행 화면입니다.

 

 

 

오늘의 느낌

COVID-19 테스트 결과는 음성입니다. 다행이다 ㅠㅠ 몸살 기운은 아직 있어서 무리는 안 해야겠습니다.

 

하와이안 피자는 캐나다 온타리오에서 만들어진 피자입니다. 

저는 개인적으로 구운 파인애플을 상당히 좋아하는데유...

 

"파인애플은 과일이다!"라는 인식이 퍽 박혀 있던 중학교 1학년 때 까지는 식사와 함께 파인애플을 먹는다는 건 상상도 못 할 일이 었는데, 중학교 2학년 때 필리핀에 2달 동안 다녀온 적이 있습니다.

 

필리핀 음식이 입에 맞지 않아 (지금은 가물가물한데 맥도날드에 갔더니 탄산음료 위에 생크림인지 아이스크림 인지도 올려주고 후라이드 치킨에 밥도 나오더라고요 그때는 완전히 충격이었음 요즘에는 치밥하는 사람 굉장히 많아졌는데) 피자헛에 갔더니 파인애플 피자를 팔길래 그냥 도전 정신으로 시켜 먹어봤는데 완전 신세계인 겁니다 >ㅂ<~~~ 이게 파인애플을 구우면 신맛이 적어지고 단맛이 올라와서 극적인 단맛을 느낄 수 있는데 저는 거부감이 없었습니다.

 

그 후로는 파인애플 피자를 상당히 좋아하고 있습니다. 지금 토론토에 살고 있으니까 2주일에 한 번씩은 꼭 먹는 거 같아요. 그리고 제가 본업이 요리이기 때문에 다양한 요리들을 먹어보고 만들어 봤는데, 여기 캐나다 사람들은 파인애플이 들어간 요리를 많이 먹더라고요. 

 

혹시 중학교 1학년 때의 동기 코딩처럼 "파인애플은 과일이다!"라는 선입견 때문에 안 드시는 거라면 한 번은 도전해보세요. 

 

나이가 들면 들 수록 못 먹는 음식이 많다는 건 별로 이득은 아니더라고요.. 저는 내륙지방에서 태어나서 살고 또 해물을 접해본 경험이 많이 없어서 친구들이랑 횟집 가면 멍게, 개불, 해삼 등등 징그럽게 생긴 해물을 못 먹어요... 진짜 손해라 생각합니다. 요새는 가면 꾹 참고 먹어봄!!! 자꾸 먹는 버릇 만들면 결국 먹게 되겠죠 ㅎㅎ 

 

 

'HTML' 카테고리의 다른 글

[HTML] Article and Section  (0) 2021.11.27
[HTML] Main and Footer  (0) 2021.11.27
[HTML] Matching a Pattern  (0) 2021.11.25
[HTML] Checking Text Length  (0) 2021.11.24
[HTML] Set a Minimum and Maximum  (0) 2021.11.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/06   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
글 보관함