커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
아이콘 표시가 안돼요
[왕초보] ChatGPT 300% 활용하기 v0
6주차
이*연
댓글
27
・
추천
0
・
조회수
31
조회수
31
답변 완료
헤더 부분 오른쪽 아이콘 3개와 카테고리 앞 아이콘이 제대로 표시되지 않습니다.
그리고 검색 아이콘도 네모칸 안에 있어야 하는데 바깥에 있는데 어떻게 해야 할까요?
작성한 코드 및 에러 메세지
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>나의 웹 사이트</title> <link rel="stylesheet" href="05_styles.css"> </head> <body> <div class="container"> <header> <div class="header-box1"> <div class="right-align"> <span>회원가입</span> <span>로그인</span> <span>고객센터</span> </div> </div> <div class="header-box2"> <div class="left-align"> <img src="https://spartacodingclub.kr/_next/image?url=https%3A%2F%2Fstatic.spartacodingclub.kr%2FTeamSparta-Inc%2Fscc-frontend%2Fassets%2Ficons%2Flogo-active.png&w=1200&q=100" alt="Logo" class="logo" /> <span style="color: #5F0080;">텍스트</span> </div> <div class="center-align"> <input type="text" placeholder="검색어를 입력해주세요"> <img src="search_icon.png" alt="검색 아이콘"> <span class="material-symbols-outlined">search</span> </div> <div class="header-box2-right"> <span class="material-symbols-outlined"> location_on </span> <span class="material-symbols-outlined"> favorite </span> <span class="material-symbols-outlined"> shopping_cart </span> </div> </div> </header> <nav> <div class="left-align"> <span class="material-symbols-outlined"> menu </span> <span class="category-text">카테고리</span> </div> <div class="center-align"> <span>신상품</span> <span>베스트</span> <span>알뜰쇼핑</span> <span>특가/혜택</span> </div> <div class="right-align"> <button>샛별·택배 배송안내</button> </div> </nav> <div class="box1"> <div class="box1-content"> <img src="image.jpg" alt="이미지"> <h2>Box1 제목</h2> <p>Box1 내용</p> </div> </div> <div class="box2"> <h2 class="box2-title">이 상품 어때요?</h2> <div class="card-container"> <div class="card"> <div class="card-image"> <img src="product1.jpg" alt="상품1"> <div class="card-icon"> <img src="icon1.png" alt="아이콘1"> </div> </div> <div class="card-content"> <h3>[상품명] 상품명</h3> <p>가격 : $50</p> </div> </div> <div class="card"> <div class="card-image"> <img src="product2.jpg" alt="상품2"> <div class="card-icon"> <img src="icon2.png" alt="아이콘2"> </div> </div> <div class="card-content"> <h3>[상품명] 상품명</h3> <p>가격 : $70</p> </div> </div> <div class="card"> <div class="card-image"> <img src="product3.jpg" alt="상품3"> <div class="card-icon"> <img src="icon3.png" alt="아이콘3"> </div> </div> <div class="card-content"> <h3>[상품명] 상품명</h3> <p>가격 : $80</p> </div> </div> <div class="card"> <div class="card-image"> <img src="product4.jpg" alt="상품4"> <div class="card-icon"> <img src="icon4.png" alt="아이콘4"> </div> </div> <div class="card-content"> <h3>[상품명] 상품명</h3> <p>가격 : $60</p> </div> </div> </div> </div> </div> </body> </html>
댓글 알림
