만드는 방법: 블로그 레이아웃
CSS를 사용하여 반응형 블로그 레이아웃을 만드는 방법을 배우세요.
반응형 블로그 레이아웃을 만드는 방법을 배우세요. 이 레이아웃은 스크린 너비에 따라 두 열과 전체 너비 열 사이에서 변화합니다.
브라우저 창 크기를 조정하여 반응형 효과를 확인하세요:
블로그 레이아웃을 만드는 방법
첫 번째 단계 - HTML 추가:
<div class="header">
<h2>블로그 이름</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>제목 표제</h2>
<h5>제목 설명, 2017년 12월 7일</h5>
<div class="fakeimg" style="height:200px;">이미지</div>
<p>일부 텍스트...</p>
</div>
<div class="card">
<h2>제목 표제</h2>
<h5>제목 설명, 2017년 9월 2일</h5>
<div class="fakeimg" style="height:200px;">이미지</div>
<p>일부 텍스트...</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>저에 대해</h2>
<div class="fakeimg" style="height:100px;">이미지</div>
<p>저를 설명하는 텍스트를 죄송스럽게도 누락한 것입니다.</p>
</div>
<div class="card">
<h3>인기 게시물</h3>
<div class="fakeimg">이미지</div><br>
<div class="fakeimg">이미지</div><br>
<div class="fakeimg">이미지</div>
</div>
<div class="card">
<h3>나를 따라오세요</h3>
<p>일부 텍스트...</p>
</div>
</div>
</div>
<div class="footer">
<h2>푸터</h2>
</div>
第二步 - CSS 추가:
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}
/* 페이지 헤더/블로그 제목 */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
/* 두 열을 생성하고 서로浮动시킵니다 */
/* 왼쪽 열 */
.leftcolumn {
float: left;
width: 75%;
}
/* 우측 열 */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
/* 가짜 이미지 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 기사에 카드 효과를 추가합니다 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 열 뒤의浮动을 정리합니다 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 페이지 푸터 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 반응형 레이아웃 - 스크린 너비가 800px보다 작을 때, 두 열이 가로로 배치되지 않고 쌓이도록 합니다 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
관련 페이지
강의:CSS 웹 레이아웃
