반응형 컬럼 카드 개수 증가 크기가 동일하지 않는 습니다.
본문
강사진 소개를 간단하게 하려고 아래처럼 만들었는데, 두번째, 세번째... 갈수록 크기가 커지거나 작아지는데
처음 크기와 동일하게 나오게 하는 방법이 있을까요?
PC 에선 캡쳐 화면처럼 나오게 하고싶고, 모바일 에선 자기소개 부분이 하단으로 내려가면서 한명씩 보이게 하고 싶습니다.
제가 임의적으로 짜집기 해서 만든거라 좀 부끄러운 수준/내용일 질문하기도 부끄럽습니다...^^;
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 50%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
</style>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>
<div>
<div class="row">
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="row na-row">
<div class="col-md-5 na-col">
<img src="이미지 주소">
</div>
<div class="col-md-7 na-col">
<ul>
<li>
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권 입니다.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
답변 2
먼저, 모든 카드가 동일한 크기를 갖도록 하고 480px 해상도에서 원하는 반응형 레이아웃을 위해 CSS와 HTML 구조를 수정하시면 될 것같습니다.
참고하셔서 원하시는 로직으로 수정하시면 될 것 같습니다.
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* 칼럼들을 감싸는 Flexbox 컨테이너 */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
/* 각 칼럼은 50% 폭을 갖고 패딩을 가집니다. */
.column {
flex: 0 0 50%;
padding: 0 10px;
}
/* 카드 스타일 */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;
}
/* 480px 해상도를 위한 미디어 쿼리 */
@media screen and (max-width: 480px) {
.column {
flex: 0 0 100%;
margin-bottom: 20px;
}
}
</style>
<h2>반응형 칼럼 카드</h2>
<p>브라우저 창 크기를 조절하여 효과를 확인하세요.</p>
<div class="row">
<div class="column">
<div class="card">
<img src="이미지 주소">
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권입니다.</p>
</div>
</div>
<div class="column">
<div class="card">
<img src="이미지 주소">
<h3>제임스권</h3>
<p>안녕하십니까? 제임스권입니다.</p>
</div>
</div>
<!-- 필요한 경우 더 많은 카드 아이템을 추가 -->
</div>
이렇게 하면 두 개의 칼럼(각각 50% 폭)을 가진 행을 만들게 되고, 또한 480px 해상도를 가진 스크린에 대해 미디어 쿼리를 적용하여 칼럼이 하나의 칼럼 형태로(각각 100% 폭) 수직으로 쌓이게 됩니다.
우와... 감사 드립니다.
너무 명쾌하시게 설명해 주셨네요.
그저 감동할 뿐입니다.
다시한번 감사의 말씀을 드립니다.
알려주신 방법을 응용해 적용했더니 반응형 까지 잘적용이 됩니다.
어찌 감사 드려야 할지~~^^;
하시는 일 마다 어려움없이 잘 되시길 기원 합니다.
진심 감사 드립니다.
URL을 공유해주세요. 그래야 원인을 인차 찾을수 있습니다.
답변을 작성하시기 전에 로그인 해주세요.
