본문으로 건너뛰기

로고 만들기

로고란?

웹페이지의 로고는 웹 사이트의 브랜드를 대표하는 매우 중요한 요소입니다. 로고는 웹페이지 상단에 위치하며, 사용자가 언제나 웹 사이트의 메인 페이지로 돌아갈 수 있도록 합니다.

일반적으로 로고는 웹 사이트 또는 회사의 이름이나 로고 이미지로 구성됩니다. 웹 사이트의 시각적 아이덴티티를 형성하며, 사용자에게 브랜드를 쉽게 식별하고 기억할 수 있도록 돕습니다.

주로 웹페이지의 상단에 위치하며, 일반적으로 클릭 가능한 링크로 설정됩니다. 사용자가 로고를 클릭하면 언제나 웹 사이트의 메인 페이지로 돌아갈 수 있어 편리합니다. 이는 사용자가 웹 사이트 내에서 길을 잃지 않도록 돕는 중요한 기능입니다.

예시 코드

로고 예시 코드 - 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"을 입력하면 됩니다.