의류 쇼핑몰 11 | Routing 5 | Logo Styles

진짜 Logo 로 바꿔보자. 

 

assets 폴더를 만들고,

폴더 안으로 이미지를 드래그 드랍해서 폴더 안으로 넣는다. 

 

 

svg 이미지를 누르면 html 로 되어 있는데,

화면 사이즈에 상관없이 항상 이미지의 깔끔한 라인을 유지한다. 

 

 

이미지를 Navigation으로 import 해온다. 

 

 

 

이미지가 생겼다. 

 

 

이미지를 클릭하면 home으로 간다.

 

 

 

 

index.scss에 전체적에 적용시킬 내용을 적어준다. 

 

<a> 태그는 색과 밑줄이 있는 것이 기본형이다. 

밑줄을 없애고, 검은색 글자로 바꿔야 한다. 

 

index.scss

 

 

색상이 바뀌었다.

 

 

 

또 box-sizing을 border-box로 설정해준다. 

 

 

---

navigation.scss

.logo {

width: 60px;

}

.navigation {

height: 70px;

width: 100%;

display: flex;

justify-content: space-between;

margin-bottom: 25px;

.logo-container {

height: 100%;

width: 70px;

padding: 5px 10px;

}

.nav-links-container {

width: 50%;

height: 100%;

display: flex;

align-items: center;

justify-content: flex-end;

.nav-link {

padding: 10px 15px;

cursor: pointer;

}

}

}

 

 

index.scss

body {

margin: 0 10;

font-family: 'Dongle', 'Bigelow Rules', sans-serif, cursive;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

code {

font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

monospace;

}

a {

text-decoration: none;

color: black;

}

* {

box-sizing: border-box;

}