4. Logo in Header

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처:edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

 

📸 Screenshot 

---

 

 

 

 

 

 

 

 

📝 메모

---

좀 놀란 건

나는 보통 로고

<div class="logo-container>
	<a href="#">
    	<img src="" alt="logo"/>
    </a>
</div>

 

이렇게 <nav>속 logo-container 만들어서 마크업하는 편이었는데

 

어쨋든 저 로고는 헤더의 큰 주제(;)에 해당하니까

<h1>
     <a href="./logo-in-header.html">
          <img
            src="https://statics.goorm.io/logo/edu/goorm_edu.svg"
            alt="goorm edu"
          />
     </a>
</h1>

<h1>태그에 넣을 수도 있다는 걸 배웠다.

 

 

스타일의 차이인 것 같다.

 

 

 

 

 

그리고 중요한 건

<a> tag에 지금 들어가는 link text가 없는데

이미지가 그 부분을 채워줄 뿐더러

이미지의 alternative text에 원래 link text 자리에 들어가야 했을 정보를 넣어주면 된다.