LHJ

I'm a FE developer.

3. 메뉴 스타일링 1

25 Aug 2020 » js_apple_interaction

메뉴 스타일링 1

1. 마크업

  1. default.css 는 CSS Reset 용도
  2. main.css 생성 및 연동
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>AirMug Pro</title>
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <nav class="global-nav">
            <div class="global-nav-links">
                <a href="#" class="global-nav-item">Rooms</a>
                <a href="#" class="global-nav-item">Ideas</a>
                <a href="#" class="global-nav-item">Stores</a>
                <a href="#" class="global-nav-item">Contact</a>
            </div>
        </nav>
        <nav class="local-nav">
            <div class="local-nav-links">
                <a href="#" class="product-name">AirMug Pro</a>
                <a href="#">개요</a>
                <a href="#">제품사양</a>
                <a href="#">구입하기</a>
            </div>
        </nav>
    </div>
</body>
</html>

2. 구글폰트 적용

  1. 구글폰트 사이트
  2. noto sans 검색
  3. noto sans KR 선택
  4. bold 400, 900 선택
  5. embed link 복사
  6. link 연동
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>AirMug Pro</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <nav class="global-nav">
            <div class="global-nav-links">
                <a href="#" class="global-nav-item">Rooms</a>
                <a href="#" class="global-nav-item">Ideas</a>
                <a href="#" class="global-nav-item">Stores</a>
                <a href="#" class="global-nav-item">Contact</a>
            </div>
        </nav>
        <nav class="local-nav">
            <div class="local-nav-links">
                <a href="#" class="product-name">AirMug Pro</a>
                <a href="#">개요</a>
                <a href="#">제품사양</a>
                <a href="#">구입하기</a>
            </div>
        </nav>
    </div>
</body>
</html>

3. main.css 작성

  1. 구글폰트 Embed 부분에 있는 CSS rules to specify familes 부분 복붙
@charset 'utf-8';

html {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
}
body {
    overflow-x: hidden;
    color: rgb(29, 29, 31);
    letter-spacing: -0.05em;
    background: #fff;
}
p {
    line-height: 1.6;
}

.global-nav {
    height: 44px;
}
.global-nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
}

Related Posts