* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
무신사 부분 작업 하고 있는데요
제대로 작업 하고 있는거 같은데 결과 화면에 스타일 css가 안먹고 있어요
이유가 무엇일까요?
작성한 코드 및 에러 메세지
html부분
<!DOCTYPE html>
<html lang="ko">
<header>
<div class="banner">
<img src="https://placehold.it/200x70" alt="무신사 배너">
<a href="#" class="close-btn"><i class="fas fa-times"></i></a>
</div>
<nav class="navigation1">
<div class="left-group">
<img src="https://placehold.it/100x30" alt="무신사 로고">
<div class="search-box">
<input type="text" placeholder="검색">
<button type="button"><i class="fas fa-search"></i></button>
</div>
<p>[1등] : 패션품목</p>
</div>
<div class="right-group">
<a href="#" class="pink">링크1</a>
<a href="#" class="red">링크2</a>
<a href="#" class="blue">링크3</a>
<a href="#">링크4</a>
<a href="#">링크5</a>
<a href="#">링크6</a>
<a href="#">링크7</a>
<a href="#">링크8</a>
<a href="#">링크9</a>
<a href="#">링크10</a>
<a href="#">링크11</a>
<a href="#">링크12</a>
</div>
</nav>
<nav class="navigation2">
<div class="left-group">
<a href="#">테라스 샵</a>
</div>
<div class="right-group">
<span>래플에 참여해 보세요!</span>
<a href="#" class="blue">래플 바로가기</a>
<a href="#">브랜드 구인</a>
</div>
</nav>
<nav class="navigation3">
<div class="left-box">
<button>로그인</button>
</div>
<div class="right-box">
<a href="#" class="blue">링크1</a>
<a href="#">링크2</a>
<a href="#">링크3</a>
<a href="#" class="red">링크4</a>
<a href="#">링크5</a>
<a href="#">링크6</a>
<a href="#">링크7</a>
<a href="#" class="blue">링크8</a>
</div>
</nav>
</header>
<body>
<header>
<div class="banner">
<h1>무신사</h1>
</div>
<nav class="navigation1">
<ul>
<li><a href="#">카테고리1</a></li>
<li><a href="#">카테고리2</a></li>
<li><a href="#">카테고리3</a></li>
</ul>
</nav>
<nav class="navigation2">
<ul>
<li><a href="#">카테고리4</a></li>
<li><a href="#">카테고리5</a></li>
<li><a href="#">카테고리6</a></li>
</ul>
</nav>
<nav class="navigation3">
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
</ul>
</nav>
</header>
<main>
<section class="main-left">
<h2>좌측 영역</h2>
<p>좌측 내용이 들어갈 부분입니다.</p>
</section>
<section class="main-right">
<h2>우측 영역</h2>
<p>우측 내용이 들어갈 부분입니다.</p>
</section>
</main>
</body>
</html>
스타일 부분
/* reset.css */
* {
box-sizing: border-box;
color: black;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
outline: none;
}
a:hover,
a:active {
text-decoration: none;
}
button {
background-color: transparent;
border: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.banner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 70px;
background-color: #000;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.close-btn {
color: #fff;
margin-right: 20px;
font-size: 20px;
}
.navigation1 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 78px;
background-color: #000;
padding: 0 15px;
}
.left-group {
display: flex;
align-items: center;
}
.left-group img {
margin-right: 15px;
}
.search-box {
position: relative;
margin-right: 15px;
}
.search-box input[type="text"] {
width: 200px;
padding: 5px 10px;
font-size: 14px;
background-color: #fff;
border: none;
border-radius: 3px;
}
.search-box button {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
padding: 5px 10px;
background-color: #000;
border: none;
border-radius: 3px;
color: #fff;
font-size: 14px;
}
.search-box button i {
color: #fff;
}
.left-group p {
margin: 0;
font-size: 12px;
color: #fff;
}
.right-group {
display: flex;
align-items: center;
}
.right-group a {
margin-right: 15px;
font-size: 18px;
font-weight: bold;
text-decoration: none;
color: #fff;
}
.right-group a.pink {
color: pink;
}
.right-group a.red {
color: red;
}
.right-group a.blue {
color: blue;
}
.navigation2 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 51px;
background-color: #ccc;
padding: 0 15px;
}
.navigation2 .left-group a {
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navigation2 .right-group span {
font-size: 14px;
color: #000;
margin-right: 10px;
}
.navigation2 .right-group a {
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.navigation2 .right-group a.blue {
color: blue;
}
.navigation3 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
background-color: #fff;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 0 15px;
}
.navigation3 .box-container {
display: flex;
flex-direction: row;
}
.navigation3 .left-box {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.navigation3 .right-box {
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
}
.navigation3 button {
width: 150px;
height: 28px;
border: 1px solid #000;
background-color: #fff;
font-size: 12px;
color: #000;
}
.navigation3 a {
font-size: 12px;
color: #000;
}
.navigation3 a:first-child {
color: blue;
}
.navigation3 a:nth-child(4) {
color: red;
}
.navigation3 a:last-child {
color: blue;
}
.navigation3 .box-container > * + * {
margin-left: 10px;
}
리셋부분
/* reset.css */
* {
box-sizing: border-box;
color : black;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
outline: none;
}
a:hover, a:active {
text-decoration: none;
}
button {
background-color: transparent;
border: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
