HTML 좌우로 이미지 배치하기, 글상자 만들기

여러 이미지 한 행에 넣기 (브라우저 창의 폭이 줄면 이미지가 줄바뀜)
<div class="separator" style="clear: both; text-align: center;"><img.. src="이미지 주소1"/><img.. src="이미지 주소2"/></div>
→ [1]a의 style 속성 삭제 및 target="_blank" 추가 [2]각 자료(img, iframe)에 style="margin: 2px 0; vertical-align: middle;" 추가
→ 설명은 span style의 margin-top을 margin-bottom: 3px;로 교체 (여럿 중 이미지1만 설명을 달려면 이미지1+설명을 자식 <div style="display: inline-block; vertical-align: middle;"></div>로 감싼다)
* 이미지들의 서로 다른 세로 길이를 하나로 일치시키려면, 대상 이미지의 가로 길이 = (기준 이미지 원본 세로 / 가로) / (대상 이미지 원본 세로 / 가로) * 기준 이미지의 원하는 가로 길이 (소수점 둘째까지)

테이블로 좌우 나누어 자료 넣기 (브라우저 창의 폭이 줄어도 무조건 한 행에 표시됨)
<table class="txc-table" style="border-collapse: collapse; margin: 0 auto; text-align: center;"><tbody><tr>
<td>가나</td> <td>다라</td>
</tr></tbody></table>
→ [1]가나와 다라에 이미지 삽입 [2]자료 간 여백 <td style="width: 4px;"></td>를 사이에 추가

서영 주위 사람 1

서영 주위 사람 4

글상자 만들기
<div class="txc-textbox" style="border: 1px solid #ccc; background-color: aliceblue; margin: 2px 0; padding: 8px;">글상자</div>

#ccc; background-color: aliceblue;

#ccc; background-color: ghostwhite;

* 모서리를 둥글게 하려면 <div.. 끝에 border-radius: 6px;를 추가한다

gray; background-color: whitesmoke;

* 테이블을 이용해 여러 글상자를 넣으려면 <table style=..에 width: 100%; table-layout: fixed;를 추가하고, <td style="width: 50%; padding-right: 2px;">와 <td style="width: 50%; padding-left: 2px;">로 배치한다

가나

다라마바

※ 이전 글을 복사해 업데이트하여 작성함