HTML 훈련 - (4) Logo in Header

header에 로고를 만들고, 클릭시 url로 이동하도록 해주는 예제를 만들어보자.

(goormedu의 nav 바 - navigation)

 

 

우선, 가장 먼저 해당 예제를 블록단위로 나눠서 마크업해보자.

위에서 goormedu라는 것은 '텍스트'가 아니라 로고이므로 img태그를 이용하는것이 바람직하다.

대신, 검색엔진을 통해 검색할 수 있도록 해주려면 h1태그로  goormedu라고 작성해주는게 좋을듯.

-> <h1>,즉 헤더태그 안에는 다른 요소가 들어가도 된다. h1태그 안에 img태그를 이용해서 로고를 나타내자.

 

또한, 우측에 Q&A라는 것을 클릭하면 해당 URL로 이동할 수 있도록 anchor 태그를 사용해주는게 좋을 것 같다.

 

<h1>
      Goorm Edu
      <img src="https://statics.goorm.io/logo/edu/goorm_edu.svg" alt=""/>
</h1>

위와 같이 h1태그와 img태그를 같이 써주면, 문제가 발생하는데

 

'정보'로서의 마크업을 위해 h1에 Goorm edu라고 작성해주었는데, 

위처럼 글자가 뜨게 된다.

이를 css로 안보이게 해줄수는 있으나 굉장히 번거로운 작업이다.

 

이때, 우리는 <img>태그의 alt속성을 이용해서 텍스트로 입력했을때의 효과를 줄 수 있다.

 

 

<h1>
        <img src="https://statics.goorm.io/logo/edu/goorm_edu.svg" alt="Goorm Edu"/>
</h1>

 

 

 

+) img(로고)를 클릭하면 index.html로 돌아오는 것이 일반적이므로 여기에도 <a>태그를 걸어준다.

 

<h1>
    <a href="./index.html">
        <img src="https://statics.goorm.io/logo/edu/goorm_edu.svg" alt="Goorm Edu"/>
    </a>
</h1>

./index.html과 같이 걸어주면,

지금은 해당 페이지 주소가 없지만 해당 페이지의 index.html로 이동하게 된다.

 

 

<div class="header">
        <h1>
            <a href="./index.html">
                <img src="https://statics.goorm.io/logo/edu/goorm_edu.svg" alt="Goorm Edu"/>
            </a>
        </h1>
    
    
        <a href="https://edu.goorm.io/qna">Q&amp;A</a>
</div>

 

div로 감싸주고, header이라는 클래스를 부여해준다.

 

 

 

최종 결과

 

 

 

 

 style.css에 대한 분석은 아래 포스팅을 통해 하도록 하겠다!

 

 

---

 

 

REFERENCE (style.css)

https://github.com/rohjs/bugless-101/blob/practice/html-practice/04-logo-in-header/styles.css

GitHub - rohjs/bugless-101: 👾 김버그의 버그 없는 HTML & CSS 강의자료