-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
2강 innerhead
20.06.27 15:31 작성 조회수 200
0
안녕하세요!
2강에서 margin: 0 auto로 .innerHeader를 가운데로 오게 하려고 했는데 자꾸만 안돼서 질문을 남겨욤
그리고 tnb를 float해도 보이지가 않습니다ㅠ
코드를 남기면 선생님께서 봐주실 수 있으실까요? 감사합니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>한화</title>
<link rel="stylesheet" href="css/main.css" />
<script
src="https://kit.fontawesome.com/c5b2b994d5.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="wrap">
<!-- 본문바로가기 -->
<a href="#main" id="skip-nav">본문바로가기</a>
<!-- header -->
<header>
<div class="innerHeader">
<h1 class="logo">
<a href="index.html"><img src="img/logo.png" alt="한화" /></a>
</h1>
<nav class="gnb">
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">사업영역</a></li>
<li><a href="#">투자정보</a></li>
<li><a href="#">인재채용</a></li>
</ul>
</nav>
<nav class="tnb">
<ul>
<li>
<a href="#"><i class="fas fa-flask"></i> 알기쉬운 제품공정</a>
</li>
<li>
<a href="#"
><i class="far fa-handshake"></i> 내 삶 속의 한화 케미컬</a
>
</li>
<li>
<a href="#">제품검색 <i class="fas fa-search"></i></a>
</li>
</ul>
</nav>
<nav class="gnbMo">
<a href="#"><i class="fas fa-bars"></i></a>
</nav>
</div>
</header>
</div>
</body>
</html>
@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Noto+Sans+KR:wght@400;700&display=swap");
/* reset */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
/* layout */
.en {
font-family: "Exo 2", sans-serif;
}
body {
font-family: "Noto Sans KR", sans-serif;
}
.wrap {
margin: 0 auto;
background-color: red;
}
#skip-nav {
position: fixed;
left: 0;
top: -41px;
width: 100%;
line-height: 40px;
background-color: #ff8342;
color: #fff;
text-align: center;
border-bottom: #ff0000;
}
#skip-nav:focus {
top: 0px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
line-height: 100px;
background-color: rgba(0, 0, 0, 0.2);
}
.innerHeader {
width: 1600px;
margin: 0 auto;
box-sizing: border-box;
overflow: hidden;
}
.innerHeader .logo {
float: left;
padding-top: 15px;
}
.innerHeader .logo img {
width: 100%;
height: auto;
}
.innerHeader .gnb {
float: left;
margin-left: 80px;
}
.innerHeader .gnb li {
float: left;
margin-right: 80px;
}
.innerHeader .gnb li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
color: white;
font-size: 16px;
}
.innerHeader .gnb li a:hover,
.innerHeader .gnb li a:focus {
color: #ff8342;
}
.innerHeader .gnbMo {
display: none;
}
.innerHeader .tnb {
float: right;
}
.innerHeader .tnb li {
float: left;
margin-right: 25px;
}
답변을 작성해보세요.
0
0
0
감자도리
질문자2020.06.30
선생님 안녕하세용 section.me에서 가상클래스 before가 만들어지지 않아 질문 드리려는데요 파일을 보여드리는 게 나을 듯 싶은데 어떻게 보내드려야 할까요??? 감사합니당
0
0
0
J.영
지식공유자2020.06.29
a는 인라인 요소라 해당되는 글씨만 영역이 선택될 것입니다~ ^^
그래서 헤더의 높이만큼 높이 값을 주기 위해 블록 요소로 처리했습니다~~
조금 어려우시다면 .gnb li a 에 display:block 을 제거해보시고 ㅎㅎ
개발자 도구로 a 부분을 클릭해보시면 이해하기 쉬우실 거예요^^~~
0
감자도리
질문자2020.06.29
헉 답변감사합니다 개발자 도구에서도 문제가 없었는데 구글크롬에서 80%로 보니 알맞게 나오더라구요 100%로 보면 아무런 변화가 없어서 눈치채지 못했었나봐요ㅠㅠ 감사합니다
0
J.영
지식공유자2020.06.29
Yubi Choi님
작성하신 파일을 확인해보니
제 PC에선 정상적을 보입니다.
어느부분이 정확히 안된다는 것인지 ...
파일을 인프런 게시판에 남겨주시고 저에게 전달부탁하시면
제가 확인하고 다시 답변드리도록 하겠습니다^^
아래는 Yubi Choi님의 파일 결과물입니다. 제가 보기엔 정상적으로 작성된것으로 확인됩니다^^
오늘도 좋은 하루 되십시요^^
0
J.영
지식공유자2020.06.28
제가 외부에 있다보니 바로 답변을 드리기가 어렵습니다.
월요일중으로 소스를 다시 한번 확인하고 답변드리도록 하겠습니다.
편안한 저녁시간 되세요^^
답변 9