-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
안녕하세요
22.05.05 19:22 작성 조회수 141
1
■ 질문 남기실 때 꼭! 참고해주세요.
- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
안녕하세요 해당 강의 들으면서 실습하고 있었는데
왜 자꾸 .gnb li 영역 왼쪽에 공백이 생기는지 왜 안없어지는지 모르겠습니다. ㅠㅠ
저 알수없는 공백 때문에 중앙정렬도 안되고 있습니다.
혹시 어디가 잘못되었는지 알수있을까요?
맥을 사용하고 있습니다.
하단에 소스코드 올려드립니다.
----------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex UI 실전제작- 반응형 헤더 네비게이션</title>
<link rel="stylesheet" href="../css/style58.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- XEIcon CDN -->
<link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Custom CSS & JS -->
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="#none"><img src="../images/logo-naver.png"></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</a></li>
<li><a href="#none">Awards</a></li>
<li><a href="#none">Location</a></li>
<li><a href="#none">Contact</a></li>
</ul>
<div class="sns">
<a href="#none"><i class="fa fa-facebook"></i></a>
<a href="#none"><i class="fa fa-twitter"></i></a>
<a href="#none"><i class="fa fa-youtube-play"></i></a>
</div>
</nav>
</header>
</body>
</html>/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
@font-face {
font-family: 'InfinitySans-RegularA1';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-RegularA1.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* FontAwesome CDN 4.7*/
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
/* 사파리 인풋스타일 제거 */
input:checked[type="checkbox"] {
background-color:rgb(255, 255, 255);
-webkit-appearance:checkbox;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="image"],
input[type="tel"],
input[type="submit"],
button,
select,
textarea {
-webkit-border-radius:0;
-webkit-appearance:none;
}
input, button {
outline: none;
}
/* Safari Table reset CSS */
table, tr, td, th {
margin: 0;
padding: 0;
border-collapse: collapse;
border: none;
}
body {
background-color: #eee;
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 15px;
}
/* Reset CSS */
a { text-decoration: none; color: #222; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; margin: 0; }
button { cursor: pointer; outline: none; }
* {
box-sizing: border-box;
}
/* Header */
header {
background-color: rgb(255, 255, 134);
display: flex;
justify-content: center;
height: 60px;
align-items: center;
}
nav {
width: 1280px;
display: flex;
justify-content: space-between;
}
.logo {
/* border: 1px solid #000; */
transform: translateY(10px);
}
.logo img {
width: 150px;
}
.gnb {
display: flex;
list-style: none;
}
.gnb li {}
.gnb li a {
margin: 10px;
}
.sns {
/* border: 1px solid #000; */
display: flex;
}
.sns a {
margin: 5px;
line-height: 35px;
/* border: 1px solid #000; */
}
@media screen and (max-width: 768px) {
/* Header */
header {
height: auto;
}
nav {
width: 100%;
flex-direction: column;
}
.logo {
padding: 10px;
}
.gnb {
border: 1px solid #000;
flex-direction: column;
width: 100%;
}
.gnb li {
width: 100%;
margin: 0;
/* border: 1px solid red; */
}
.gnb li a {
margin: 0;
border: 3px solid #000;
display: block;
padding: 7px;
}
.sns {
justify-content: center;
}
}
답변을 작성해보세요.
1
코딩웍스(Coding Works)
지식공유자2022.05.06
.gnb가 ul로 되어 있습니다.
ul은 기본적으로 리스트 아이콘 자리로 왼쪽 패딩이 많이 있습니다.
padding: 0 넣어주시면 없어집니다.
답변 1