갤러리 퍼블리싱한 html 자료입니다.
2018. 12. 7. 10:07
갤러리 퍼블리싱한 html 자료입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
@media only screen and (max-width: 480px){
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
<h1>Left Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
<h1>Left Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
<h1>Left Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
'프로그래밍 > HTML' 카테고리의 다른 글
| html : select tag 태그 option 칼라 color 적용방법 (2) | 2021.07.13 |
|---|---|
| 브라우저 '비밀번호 저장' 기능 비활성화 (0) | 2020.09.21 |
| NanumSquare 웹폰트 사용해보기 (0) | 2018.04.20 |
| 폰트 사이즈 font sizes 에서 points, pixels, ems, percent 비교 (0) | 2018.04.20 |
| 비동기 화면에서 뒤로가기 back 버튼 마우스를 클릭시 window.history.pushState 사용하기 (0) | 2018.04.09 |