* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
6주차 웹페이지 전체 레이아웃은 어느 정도 비슷하게 나오나(색상차이 있음) 세부 레이아웃 에서는 출력 예시와는 다르게 좌측 상단에 모두 몰려 있는 현상이 생깁니다. GPT 에게 문의 하여 혼자 진행을 아무리 해도 잘 되지 않네요.. 결국은 결과는 서로 겹쳐서 나오는데 GPT는 CSS 의 스타일 이 맞지않아서 그렇다고 합니다.
작성한 코드 및 에러 메세지
오<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="03_styles.css"> <!-- 여기서 CSS 파일을 가져옵니다 -->
</head>
<header>
<div class="header-box1">
<div class="header-box1-right">
<a href="#">회원가입</a>
<a href="#">로그인</a>
<a href="#">고객센터</a>
</div>
</div>
<div class="header-box2">
<div class="header-box2-left">
<img src="logo.png" alt="로고">
<span style="color: #5F0080;">텍스트</span>
</div>
<div class="header-box2-center">
<form>
<label for="search">검색어를 입력해주세요</label>
<input type="text" id="search" name="search">
<button type="submit"><img src="search-icon.png" alt="검색"></button>
</form>
</div>
<div class="header-box2-right">
<img src="icon1.png" alt="아이콘1">
<img src="icon2.png" alt="아이콘2">
<img src="icon3.png" alt="아이콘3">
</div>
</div>
</header>
<div class="container">
<header>Header</header>
<nav>Navbar</nav>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</div>
<body>
<div class="container">
<header>Header</header>
<nav>Navbar</nav>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</div>
</body>
</html>
css 파일
header {
width: 100%;
background-color: #333;
color: #fff;
padding: 20px;
box-sizing: border-box;
}
.header-box1, .header-box2 {
display: flex;
align-items: center;
}
.header-box1-right a {
color: #fff;
text-decoration: none;
margin-left: 20px;
}
.header-box2-left img {
height: 60px;
margin-right: 20px;
}
.header-box2-left span {
color: #5F0080;
font-weight: bold;
}
.header-box2-center label {
color: #5F0080;
}
.header-box2-center input[type="text"] {
border: 2px solid #5F0080;
border-radius: 20px;
padding: 5px;
font-size: 16px;
margin-right: 10px;
}
.header-box2-center button[type="submit"] {
border: none;
background: none;
cursor: pointer;
}
.header-box2-right img {
height: 30px;
margin-right: 5px;
}
