커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
크롬과 익스플로러에서의 사진이 다르게 나옵니다.
ChatGPT로 10분만에 웹사이트 만들기 v0
1주차
김*성
댓글
13
・
추천
0
・
조회수
19
조회수
19
답변 완료
안녕하세요?? 강의 열심히?? 듣고 있습니다.
1주차에서 웹사이트 만들기에서 크롬에서 열면 선생님께서 만드신 사진처럼 나옵니다.
그러나 익스플로러에서 열면 사진이 세로로 아주 길게 늘어진 사진으로 나옵니다.
뭔가 차이가 있는건가요?? 익스플로러에서 열려면 뭔가 코딩이 더 필요한 점이 있는 건가요?
가르쳐주시면 감사하겠습니다.
이것이 익스플로러 캡처 사진입니다.
그리고 이게 크롬 캡처사진입니다.
무슨 차이가 있기에 익스플로러와 크롬에서의 사진 위치라던가 늘어짐의 차이가 있는건가요??
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>나만의 중고마켓</title> <link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> <style> /* 꾸미기 */ </style> <style> .card { transition: transform 0.3s ease; } .card:hover { transform: scale(1.05); } </style> </head> <body> <div class="hero bg-dark text-center py-5"> <h1 class="text-white">나만의 르탄마켓</h1> <h2 class="text-white">집에 있는 물건을 팝니다!</h2> </div> <div class="container"> <div class="row"> <div class="col-md-4 mb-4"> <div class="card"> <img src="https://source.unsplash.com/1600x900/?rice-cooker" class="card-img-top" alt="전기밥솥"> <div class="card-body"> <h5 class="card-title">전기밥솥</h5> <h6 class="card-subtitle mb-2 text-muted">5만원</h6> <p class="card-text">한 번 밖에 안쓴 전기밥솥 팝니다. 부모님이 독립 할 때 주신 거에요!</p> <a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card"> <img src="https://source.unsplash.com/1600x900/?chair" class="card-img-top" alt="의자"> <div class="card-body"> <h5 class="card-title">의자</h5> <h6 class="card-subtitle mb-2 text-muted">1만원</h6> <p class="card-text">사무실에서 사용한 의자 팝니다. 조절 가능한 팔걸이가 달려있어요.</p> <a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card"> <img src="https://source.unsplash.com/1600x900/?laptop" class="card-img-top" alt="노트북"> <div class="card-body"> <h5 class="card-title">노트북</h5> <h6 class="card-subtitle mb-2 text-muted">30만원</h6> <p class="card-text">삼성 노트북 판매합니다. 사용기간은 1년 정도이며, 상태는 깨끗합니다.</p> <a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a> </div> </div> </div> <div class="col-md-4 mb-4"> <div class="card"> <img src="청소기.jpeg" class="card-img-top" alt="청소기"> <div class="card-body"> <h5 class="card-title">청소기</h5> <h6 class="card-subtitle mb-2 text-muted">25만원</h6> <p class="card-text">흡입력이 좋은 청소기!</p> <a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a> </div> </div> </div> </div> </div> </body> </html>
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
댓글 알림
