[마켓컬리 웹페이지 UI] 세부 레이아웃 구현하기에서 코드를 그대로 붙였는데도 아래 그림처럼 되네요. 해더부분을 가르쳐주세요

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

[마켓컬리 웹페이지 UI] 세부 레이아웃 구현하기에서 코드를 그대로 붙였는데도 아래 그림처럼 되네요. 해더부분을 가르쳐주세요

undefined주차

노*우

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

<!DOCTYPE html>
<html lang="ko">


<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    <link rel="stylesheet" href="02_styles.css">
</head>


<body>
    <div class="container">


        <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>


        <nav>Navbar</nav>
        <div class="box1">Box1</div>
        <div class="box2">Box2</div>
    </div>
</body>
</html>

body {
  height: 100%;
}


.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
nav {
  background-color: #ccc;
  height: 50px;
}


.box1 {
  background-color: #eee;
  height: 200px;
}


.box2 {
  background-color: #ddd;
  height: 300px;
}


header {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}


.header-box1 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}


.header-box1-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.header-box1-right a {
  color: #333;
  text-decoration: none;
  margin-left: 20px;
}


.header-box2 {
  display: flex;
  align-items: center;
  height: 100%;
}


.header-box2-left img {
  height: 60px;
  margin-right: 20px;
}


.header-box2-left span {
  font-size: 24px;
  font-weight: bold;
}


.header-box2-center form {
  display: flex;
  align-items: center;
  border: 2px solid #5F0080;
  border-radius: 20px;
  padding: 5px;
}


.header-box2-center label {
  color: #5F0080;
  font-size: 14px;
  margin-right: 10px;
}


.header-box2-center input[type="text"] {
  border: none;
  font-size: 16px;
  margin-right: 10px;
}


.header-box2-center button[type="submit"] {
  border: none;
  background: none;
  cursor: pointer;
}


.header-box2-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80px;
}


.header-box2-right img {
  height: 30px;
}

댓글 알림