html 코드 좀 도와주세요..
본문
지금 제가 하고 싶은 게 사진 옆에 글을 쓰고
그 밑에는 글 옆에 사진이 있는 걸 하고 싶은데.... 무슨 뜻인지는 대충 감이 오실 거라 믿습니다.
코드랑 이미지는 있고 이걸 조금 변형 시켜야 할 거 같은데... 조금 도와주세요...
<div class="intro">
주요 업무
</div>
<div class="l"></div>
<div class="page2" style="border:1px solid #dfdfdf;">
<div class="d">
<div class="sound">
<img src='<?=G5_THEME_URL?>/template/page2/images/sound.jpg'>
</div>
<div>
<h1>
<p><b>녹취록 작성</b></p>
<span>민·형사상 사건을 위해 이후 재생할 목적으로 취해 둔 음성이나 화상 자료를 검찰, 경찰, 법정에 제출하기 위한 자료로 문서화해 드립니다.</span>
</h1>
<ul>
<li>
1. 휴대폰 녹음, 현장대화 녹음, 녹음기 대화녹음 등
</li>
<li>
2. 영상촬영 파일, 블랙박스 영상 등
</li>
<li>
3. 각종 통화 녹음 및 상담전화 녹음
</li>
</ul>
</div>
</div>
<div class="e">
<div class="finger">
<img src='<?=G5_THEME_URL?>/template/page2/images/meeting.jpg'>
</div>
<div>
<h1>
<p><b>회의록 작성</b></p>
<span>회의가 이루어지는 장소에 국가공인 속기사가 직접 회의에 입회하여 발언되는 모든 내용, 상황을 기록해서 문서화해 드립니다.
</span>
</h1>
<ul>
<li>
1. 공공기관의 각 위원회
</li>
<li>
2. 시민단체 및 협회 회의
</li>
<li>
3. 주주총회
</li>
<li>
4. 재건축/재개발 조합 총회 및 이사회, 대의원회
</li>
<li>
5. 세미나, 공청회, 토론회, 간담회, 각종 회의
</li>
</ul>
</div>
</div>
</div>
.page2{margin:0 auto;font-size:18px; margin-top:50px;width:1100px;padding-right:50px;padding-left:50px; padding-top: 80px; padding-bottom: 20px;}
.l {width:10%; height:5px;background-color:#dfdfdf;display:block;margin:0 auto;margin-top:20px;}
.page2::after{display:block;clear:both;content:"";}
.d{float:left;width:400px;margin-left:80px;}
.e{float:left;width:400px;margin-left:80px;}
.intro{font-size:42px;margin-top:80px;color:#4b4b4b;font-weight:500;text-align: center;}
.sound{width:100%;}
.page2 h1 p {font-size: 22px; color: #000; margin-bottom: 20px; }
.page2 span{line-height: 25px; color: #000;}
.page2 ul {margin-top: 30px; margin-bottom: 50px;}
.page2 ul li {line-height: 30px; color: #4d4d4d; text-align: left;}
@media screen and ( max-width:1100px)
{
.intro{margin-top: 30px;}
.l {width: 25%;}
.page2{width: 95%; padding: 0;}
.d{width: 95%; float: none; margin-left: 0; margin: 0 auto;}
.e{width: 95%; float: none; margin-left: 0; margin: 0 auto;}
.page2 h1 p{margin-top: 20px;}
}
긴 글 죄송합니다...
꼭 좀 도와주세요...
답변 1
사진 글 / 글 사진 과 같은 형태로 구성하고 싶으신게 맞으실까요?
지금 사용하신 것처럼 각각 이미지와 글 영역에 가로 넓이를 설정하고 float: left/right를 지정해주는 방법이 있고, 부모가 되는 영역에 display: flex 를 사용하는 방법도 있습니다. 원하는 레이아웃을 먼저 잡고 해당 부분의 너비와 포지션을 지정해보시면 쉽게 해결하실 수 있으실 듯합니다.