로고란?
웹페이지의 로고는 웹 사이트의 브랜드를 대표하는 매우 중요한 요소입니다.
주로 웹페이지의 상단에 위치하며, 일반적으로 클릭 가능한 링크로 설정됩니다.
예시 코드
로고 예시 코드 - html
<!-- Logo -->
<span id="logo">
<a href="#"> {홈페이지명} </a>
</span>
로고 예시 코드 css
.navbar #logo img {
display: block;
width: 40px;
}
로고 구성
여기서는 텍스트를 이용해서 로고를 구성할 것입니다.
로고를 구성하는 방법은 다양하지만, 텍스트를 이용하는 것이 가장 간단하고 쉽습니다.
여기서는 텍스트를 위한 태그인 <span> 태그를 이용했습니다.
그리고 안에 있는 <a> 태그를 이용해 로고를 클릭하면 메인 페이지로 이동할 수 있도록 링크를 설정했습니다.
링크 설정은 href 속성에 값을 넣으면 되는데, 현재 페이지를 의미하는 #을 입력했습니다.
즉, 로고를 클릭하면 현재 페이지로 이동합니다.
다른 페이지로 이동하고 싶다면, href 속성에 해당 페이지의 주소를 입력하면 됩니다.
예를 들어 구글로 이동하고 싶다면, href="https://www.google.com"을 입력하면 됩니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!