|
반응형 표 (표 안쪽셀 여백 ) <table style="width: 100%; max-width: 900px; min-width: 280px; background-color: #f8f8f8; border: 1px solid #e0e0e0; border-collapse: separate; border-spacing: 0; border-radius: 10px; margin: 0; overflow: hidden; table-layout: fixed;"> <tr> <td style="padding: 10px 5px 10px 15px; color: #333; line-height: 1.6; text-align: left; border: none; word-break: break-all;"> <!-- 이 곳에 내용을 입력하세요 --> </td> </tr> </table> 게시판 상단용 (이미지용) <table style="width: 100%; max-width: 900px; min-width: 100px; margin: 0 auto; border: 0px solid #ccc; border-collapse: collapse;"> <tr> <td> <!--타이틀 start --> <table> <tr> <td> <!--이미지 넣는 위치--> <div style="display: flex; align-items: center; font-size: 20px; font-weight: bold;"> <img src="https://URL" alt="아이콘" style="margin-right: 8px;"> </div> </td> </tr> </table> <!--타이틀 end --> <br> <tr> <td style="padding: 5px; border: none; text-align: left;"> <!--게시판이 상단 이미지 보다 적게 설정--> <!--게시판 시작--> 내용 <!--게시판 끝--> </td> </tr> </table> 이런 코드가 필요한 이유는 , 다양한 기기에서 홈페이지를 보는데, 각 환경에 따라 반응형 게시글을 만들기 위하여 사용하는 코드 입니다. 모서리가 둥근 사각형에 이미지 넣기 (가로 최대: 900px 최소: 280px) <center> <table style="width: 100%; max-width: 900px; min-width: 280px; background-color: #f8f8f8; border: 1px solid #e0e0e0; border-collapse: separate; border-spacing: 0; border-radius: 10px; margin: 0; overflow: hidden; table-layout: fixed;"> <tbody><tr> <td style="padding: 0px; color: #333; line-height: 1.6; text-align: left; border: none; word-break: break-all;"> <!-- 이 곳에 내용을 입력하세요 --> <a href="https://URL"><img src="https://URL.png" alt="이미지" width="1024" height="328" editor_component="image_link" /></a> </td> </tr> </tbody></table></center> 
|
