inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

Flex UI 실전 제작(3) – 반응형 헤더 네비게이션(3)

반응형 헤더 네비게이션(3) 질문

636

air_guri

작성한 질문수 24

1

안녕하세요.
수업을 듣다가 궁금한게 있어서 글을 남기게 되었습니다.
1. CSS에서 nav에 width를 1280px;로 잡을 경우 아래와 같이 나오고 있습니다.
<1280px>
그래서 저는 1100px로 잡아서 선생님께서 만드신 화면과 비슷하게끔 만들었는데 선생님이 만드신 거와 다르다보니 뭐가 잘못된 건지 궁금합니다. 현재 노트북으로 작성하고 있습니다.
<1100px>
2. 미디어 쿼리 부분에서 .gnb li가 가로방향 전체가 아닌 .gnb li a 주변에 border가 만들어지는데 뭐가 잘못된건지 봐주시면 감사하겠습니다.
아래는 코드 입니다.
<!DOCTYPE html>
<html lang="en">
<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>Flex UI 실전 제작 - 반응형 헤더 네비게이션</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');
        @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
        body{
            font-family: 'Montserrat', sans-serif;
            background-color: eee;
            font-size: 15px;
            color: #222;
            margin : 0;
        }
        /* reset css */
        a {
            text-decoration: none;
            color: #222;
        }
        h1, h2, h3, h4, h5, h6 {
            font-weight: normal;
            margin: 0;
        }
        button {
            cursor :pointer;
            outline : none;
        }
        /* Header */
        header {
            background-color: #74b9ff;
            display: flex;
            justify-content: center;
            height: 60px;
            align-items: center;
        }
        nav {
            display: flex;
            justify-content: space-between;
            width: 1100px;
        }
        .logo {}
        .logo img{
            filter:invert()
        }
        .gnb {
            margin: 0;
            padding : 0;
            list-style: none;
            display: flex;
        }
        .gnb li{}
        .gnb li a {
            color: white;
            margin: 10px;
    
        }
        .sns {}
        .sns a {
            color: white;
            margin: 5px;
        }
        .gnb li a:hover, .sns a:hover{
            color: black;
        }
        @media screen and (max-width: 768px){
            header{
                height: auto;
                
            }
            nav {
                width: 100%;
                display: flex;
                flex-direction: column;
            }
            .logo {
                padding: 10px;
            }
            .gnb {
                display: flex;
                flex-direction: column;
                align-items: center;
                
            }
            .gnb li {
                border: 1px solid white;
                
                
            }
            .gnb li a {
                border: 1px solid #000;
                display: block;
                padding: 7px;
                margin: 0;
            }
         .sns {
             
             text-align: center;
             background-color: dodgerblue;
             padding: 10px;
         }
         .sns a {
             color: black;
         }

        }
    </style>
</head>
<body>
    
    <header>
        <nav>
            <div class="logo"><a href="#none"><img src="Flex UI 실전 제작(3) – 반응형 헤더 네비게이션/images/logo.png" alt=""></a></div>
            <ul class="gnb">
                <li><a href="#none">Home</a></li>
                <li><a href="#none">About</a></li>
                <li><a href="#none">Project</a></li>
                <li><a href="#none">Plan & History</a></li>
                <li><a href="#none">Awards</a></li>
                <li><a href="#none">Location</a></li>
                <li><a href="#none">Contract</a></li>
            </ul>
            <div class="sns">
                <a href="#none"><i class="fa fa-facebook-square"></i></a>
                <a href="#none"><i class="fa fa-twitter-square"></i></a>
                <a href="#none"><i class="fa fa-youtube-play"></i></a>
            </div>
        </nav>
    </header>
</body>
</html>

flex 반응형-웹

답변 1

0

코딩웍스(Coding Works)

보더 속성을 지우시면 됩니다.

0

air_guri

선생님

제가 질문했던 거는 border값을 줬을 때 전체에 안그려져서 질문을 했던 건데 제가 질문을 잘못 말씀드렸나 봅니다.

코드를 다시 보니깐 css에서 .gnb에 text-align: center를 안주고 align-items를 center로 넣어서 발생된 문제였습니다.

답변 주셔서 감사합니다.

아 그리고 제가 남긴 첫 번째 질문으로 남긴 화면 비율도 궁금한데 혹시 답변해주실 수 있으신가요?

0

코딩웍스(Coding Works)

첫번째 질문이 있는걸 깜빡했네요.ㅠㅠ

노트북 해상도를 몇으로 사용하고 계신지 모르겠지만...

nav에 1280px로 잡았으니까 1280에서는 헤더 좌우가 잘리면서 가로스크롤이 생기겠죠.

이런 경우에는 미디어쿼리 구간을 하나 더 넣어주세요. 그럼 조금 자연스러워질거에요.

@media (min-width: 768px) and (max-width: 1280px) {
  nav {
    width: 100%;
  }
}

0

air_guri

감사합니다!!!

가로스크롤

1

479

1

상위 태그 영역 무시 하는 방법

1

858

2

반응형 적응형 구분

2

819

2

flex가 적용되면 하위에 있는 인라인의 속성은?

1

370

1

슬릭 슬라이더 버튼

1

384

1

slick 모바일로 변환했을때..

1

616

1

x scroll 이 왜 생기는 걸까요?

1

880

1

영상 16분 field margin-left 문제 (다운로드 교재도 동일한 문제)

1

259

1

모바일에서 이미지 짤림 현상

1

2757

2

질문 있습니다

1

248

1

안녕하세요

1

266

1

모바일버전에서 스크롤이 생겨서요 ㅜㅜ

1

294

1

반응형 헤더 네비게이션 공부중인데요. 궁금한것이 있어서요.

1

398

2

슬라이딩 스크롤이 이상하게 먹혀요!

1

425

2

slick slider 하는데 패딩이 안먹혀요

1

777

2

제이쿼리 부드럽게 스크롤할때 제이쿼리에 밑줄오류가 있습니다.

1

327

1

혹시 이 강의 싸이트를 혼자의 힘으로 만들수 있으면 어느정도 실력정도 되나요?

1

263

1

소스랑 자료 다운로는 어디서 받을 수 있나요?

1

312

1

반응형 헤더 네비게이션 강의 질문있습니다.

1

214

1

그 반응형 질문 있습니다

1

231

1

질문드립니다 강사님

1

303

2

flex 레이아웃 배치 질문있습니다.

1

228

1

미디어쿼리 반응형 만들때 사이즈 질문있습니다.

1

209

1

인라인요소인 label 에 margin-bottom 이 되다니... 어렵습니다.

1

981

1