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