reponsive-header-basics/index.html at main · seeminglly/reponsive-header-basics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Query</title>
    <!-- 웹 브라우저 기본 스타일 초기화 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    <!-- Google Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- 디바이스가 데스크탑일 때 연결할 스타일시트 -->
    <link rel="stylesheet" href="./css/desktop.css" media="screen and (min-width: 960px)">
    <!-- 디바이스가 태블릿PC일 때 연결할 스타일시트 -->
    <link rel="stylesheet" href="./css/tablet.css" media="screen and (min-width: 768px) and (max-width: 959px)">
    <!-- 디바이스가 스마트폰일 때 연결할 스타일시트 -->
    <link rel="stylesheet" href="./css/mobile.css" media="screen and (max-width: 767px)">
    <!-- main.js의 연결 -->
    <script defer src="./js/main.js"></script>
</head>

<body>
    <!-- 헤더 -->
    <header>
        <div class="inner">
            <!-- 로고 -->
            <div class="logo">
                <span class="material-icons">
                    ramen_dining
                </span>
            </div>
            <!-- 햄버거 메뉴 -->
            <!-- 모바일에서만 보임 -->
            <div id="hamburger__icon">
                <span class="material-icons">
                    lunch_dining
                </span>
            </div>
            <!-- 중앙 메뉴 -->
            <ul class="menu">
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
            <!-- SNS 메뉴 -->
            <ul class="sns__wrapper">
                <!-- 트위터 -->
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewbox="0 0 24 24">
                        <path
                            d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
                    </svg>
                </li>
                <!-- 페이스북 -->
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewbox="0 0 24 24">
                        <path
                            d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" />
                    </svg>
                </li>
                <!-- 공유 -->
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewbox="0 0 24 24">
                        <path
                            d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 15.889v-2.223s-3.78-.114-7 3.333c1.513-6.587 7-7.778 7-7.778v-2.221l5 4.425-5 4.464z" />
                    </svg>
                </li>
            </ul>
        </div>
    </header>
    <!-- 네비게이션 메뉴 -->
    <!-- 모바일에서만 보임 -->
    <nav id="side__menu">
        <div class="inner">
            <!-- 메뉴 -->
            <ul class="menu">
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
            </ul>
            <!-- SNS 메뉴 -->
            <ul class="sns__wrapper">
                <!-- 트위터 -->
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewbox="0 0 24 24">
                        <path
                            d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
                    </svg>
                </li>
                <!-- 페이스북 -->
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewbox="0 0 24 24">
                        <path
                            d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" />
                    </svg>
                </li>
                <!-- 공유 -->
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewbox="0 0 24 24">
                        <path
                            d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 15.889v-2.223s-3.78-.114-7 3.333c1.513-6.587 7-7.778 7-7.778v-2.221l5 4.425-5 4.464z" />
                    </svg>
                </li>
            </ul>
        </div>
    </nav>
</body>

</html>