* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
부트 스트랩 카드들을 가로로 배치하고 싶은데 가로로 배치가 안되네요 ㅠㅠ
아래는 페이지 주소입니다.
https://sehojung.github.io/test00/
아래는 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a45643c079.js" crossorigin="anonymous"></script>
<script src="main.js" defer></script>
<title>Document</title>
<style>
body {
margin: 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #263343;
padding: 2px 12px;
}
.navbar_logo {
font-size: 24px;
color: white;
}
.navbar_logo i {
color: tomato;
}
.navbar_menu {
display: flex;
list-style: none;
padding-left: 0;
}
.navbar_menu li {
padding: 8px 14px;
transition: background-color 0.2s ease-in-out;
border-radius: 4px;
}
.navbar_menu li:hover {
background-color: #d49446;
border-radius: 4px;
transition: background-color 0.2s ease-in-out;
}
.navbar_icons {
list-style: none;
color: white;
display: flex;
padding-left: 0px;
}
:hover.fa-internet-explorer {
transform: scale(1.05);
transition: transform 0.2s ease-in-out;
}
.fa-internet-explorer {
transition: transform 0.2s ease-in-out;
}
:hover.fa-facebook-square {
transform: scale(1.05);
transition: transform 0.2s ease-in-out;
}
.fa-facebook-square {
transition: transform 0.2s ease-in-out;
}
.navbar_icons li {
padding: 8px 12px;
font-size: 25px;
}
.container {
margin-left: 20px;
display: flex;
overflow-x: scroll;
/* 가로 스크롤 추가 */
}
.card {
flex: 0 0 auto;
/* width 자동으로 조정되도록 */
margin-right: 20px;
/* 카드간 간격 조정 */
}
.card-img-top {
width: 100%;
height: 800px;
object-fit: cover;
}
/*.background-img {
display: flex;
justify-content: center;
width: 100%;
}*/
.background2-img {
display: none;
}
.navbar_toggleBtn {
display: none;
}
a {
text-decoration: none;
color: white;
}
@media screen and (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.navbar_menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%;
}
.navbar_menu li {
width: 100%;
text-align: center;
}
.navbar_icons {
display: none;
justify-content: center;
width: 100%;
}
.navbar_toggleBtn {
display: block;
position: absolute;
right: 28px;
font-size: 27px;
color: #d49446;
}
.navbar_menu.active,
.navbar_icons.active {
display: flex;
}
.background-img {
display: none;
}
.background2-img {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<i class="fab fa-monero"></i>
<a href="index.html">MC WORKS</a>
</div>
<ul class="navbar_menu">
<li><a href="project-Hwasung.html">Hwasung</a></li>
<li><a href="">Kihung</a></li>
<li><a href="">Goduck</a></li>
<li><a href="">Onyang</a></li>
<li><a href="">Cheonan</a></li>
</ul>
<ul class="navbar_icons">
<li><a href="http://mcworks.co.kr/"><i class="fab fa-internet-explorer"></i></a></li>
<li><i class="fab fa-facebook-square"></i></li>
</ul>
<a href="#" class="navbar_toggleBtn">
<i class="fas fa-list"></i>
</a>
</nav>
<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">
<a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank">
<img src="https://source.unsplash.com/1600x900/?laptop" class="card-img-top" alt="노트북">
</a>
<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>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<img src="https://source.unsplash.com/1600x900/?SmartPhone" class="card-img-top" alt="스마트폰">
<div class="card-body">
<h5 class="card-title">스마트폰</h5>
<h6 class="card-subtitle mb-2 text-muted">60만원</h6>
<p class="card-text">최신 스마트폰 판매합니다. 3개월정도 사용 하였으면 상태 최상.</p>
<a href="https://spartacodingclub.kr/" class="card-link stretched-link" target="_blank"></a>
</div>
</div>
</div>
</div>
</div>
<div class="background2-img">
<img src="mcblower2.JPG">
<img src="mcblower3.JPG">
</div>
</body>
</html>
