사진과 글이 잘 어울어 지게 작성하기
페이지 정보
작성자본문
<div class="article-wrap">
<figure class="article-photo">
<img src="a2c65741486e5dc15a5e3a4372f78ad2_1763688683_25.jpg" alt="시인 홍길동">
<figcaption>▲ 시인 홍길동</figcaption>
</figure>
<div class="article-text">
<p>
단풍은 곱게 물들어 모두의 마음을 온통 붉고 노랗게 채색하고 정든 가지를 떠난다.
봄이 설렘의 계절이라면 가을은 그리움의 계절이다.
</p>
<!-- 이하 본문 계속 -->
</div>
</div>
.article-wrap {
overflow: hidden; /* float 정리 */
}
.article-photo {
float: left;
margin-right: 20px;
text-align: center;
}
.article-photo img {
max-width: 200px; /* 필요에 따라 조절 */
height: auto;
}
.article-photo figcaption {
margin-top: 6px;
font-size: 13px;
color: #555;
}
.article-text {
font-size: 15px;
line-height: 1.7;
}
댓글목록
운영자님의 댓글
간편모드
<img src="a2c65741486e5dc15a5e3a4372f78ad2_1763688683_25.jpg" alt="시인 홍길동"
style="float:left; margin-right:20px; max-width:200px;">
<p style="font-size:13px; color:#555; margin-top:5px;">
▲ 시인 홍길동
</p>
