글보기
망보드
모바일 홈페이지 화면 코드
2023-12-01조회수9

이번에 아바다 AVADA를 쓰게 되면서 가장 좋은 점 중의 하나가,

손쉽게 컴퓨터/태블릿/폰 상태를 눈으로 보면서 화면을 구성할 수 있다는 점이다.

 

그래서 그 기념으로 깔끔한 아이콘 위주의 모바일 홈화면을 구상하고 소스를 남겨본다

 

IMG_1339.jpeg

 

<table style="border-collapse: collapse; width: 100%; height: 170px;">
<tbody>
<tr style="height: 40px;">
<td style="width: 20%; text-align: center; height: 40px;"></td>
<td style="width: 20%; text-align: center; height: 40px;"><a href="https://wisehobbies.com/%ea%b3%b5%ec%a7%80%ec%82%ac%ed%95%ad/"><img class="aligncenter wp-image-411" src="https://wisehobbies.com/wp-content/uploads/2023/11/noticeboard-300x300.png" alt="" width="40" height="40" /></a>공지사항</td>
<td style="width: 20%; text-align: center; height: 40px;"><a href="https://wisehobbies.com/user_messages/"><img class="aligncenter wp-image-631" src="https://wisehobbies.com/wp-content/uploads/2023/11/chat-300x300.png" alt="" width="40" height="40" /></a>메세지 함</td>
<td style="width: 20%; text-align: center; height: 40px;"><a href="https://wisehobbies.com/%ea%b1%b4%ec%9d%98-%eb%ac%b8%ec%9d%98%ec%82%ac%ed%95%ad/"><img class="aligncenter wp-image-415" src="https://wisehobbies.com/wp-content/uploads/2023/11/customer-service-300x300.png" alt="" width="40" height="40" /></a>건의/문의</td>
<td style="width: 20%; text-align: center; height: 40px;"></td>
</tr>
<tr style="height: 106px;">
<td style="width: 20%; text-align: center; height: 106px;"><a href="https://wisehobbies.com/%eb%b2%a0%ec%8a%a4%ed%8a%b8-%ea%b2%8c%ec%8b%9c%ed%8c%90/"><img class="aligncenter wp-image-1296" src="https://wisehobbies.com/wp-content/uploads/2023/11/medal-300x300.png" alt="" width="40" height="40" /></a>베스트</td>
<td style="width: 20%; text-align: center; height: 106px;"><a href="https://wisehobbies.com/%ea%b0%a4%eb%9f%ac%eb%a6%ac/%ea%b0%9c%ea%bf%80%ec%9e%bc-%ec%9c%a0%eb%a8%b8/"><img class="aligncenter wp-image-410" src="https://wisehobbies.com/wp-content/uploads/2023/11/laughing-300x300.png" alt="" width="40" height="40" /></a>유머</td>
<td style="width: 20%; text-align: center; height: 106px;"><a href="https://wisehobbies.com/%ea%b0%a4%eb%9f%ac%eb%a6%ac/%ea%b3%b5%ed%8f%ac-%eb%af%b8%ec%8a%a4%ed%85%8c%eb%a6%ac/"><img class="aligncenter wp-image-408" src="https://wisehobbies.com/wp-content/uploads/2023/11/ghost-300x300.png" alt="" width="40" height="40" /></a>공포</td>
<td style="width: 20%; text-align: center; height: 106px;"><a href="https://wisehobbies.com/%ea%b0%a4%eb%9f%ac%eb%a6%ac/ssul-%ec%8d%b0/"><img class="aligncenter wp-image-413" src="https://wisehobbies.com/wp-content/uploads/2023/11/trusted-friends-300x300.png" alt="" width="40" height="40" /></a>SSUL</td>
<td style="width: 20%; text-align: center; height: 106px;"><a href="https://wisehobbies.com/%ea%b0%a4%eb%9f%ac%eb%a6%ac/%ed%95%9c%ea%b5%ad%ec%82%ac-%ec%84%b8%ea%b3%84%ec%82%ac/"><img class="aligncenter wp-image-409" src="https://wisehobbies.com/wp-content/uploads/2023/11/history-300x300.png" alt="" width="40" height="40" /></a>역사</td>
</tr>
<tr style="height: 24px;">
<td style="width: 20%; text-align: center; height: 24px;"><a href="https://wisehobbies.com/%ea%b0%a4%eb%9f%ac%eb%a6%ac/%ec%a2%8b%ec%9d%80-%ea%b8%80%eb%93%a4/"><img class="aligncenter wp-image-423" src="https://wisehobbies.com/wp-content/uploads/2023/11/love-300x300.png" alt="" width="40" height="40" /></a>좋은글</td>
<td style="width: 20%; text-align: center; height: 24px;"><a href="https://wisehobbies.com/%ea%b0%a4%eb%9f%ac%eb%a6%ac/%ec%95%88%ea%b5%ac%ec%a0%95%ed%99%94/"><img class="aligncenter wp-image-414" src="https://wisehobbies.com/wp-content/uploads/2023/11/virgo-300x300.png" alt="" width="40" height="40" /></a>안구정화</td>
<td style="width: 20%; text-align: center; height: 24px;"><a href="https://wisehobbies.com/%ea%b0%a4%eb%9f%ac%eb%a6%ac/ai-%ea%b7%b8%eb%a6%bc/"><img class="aligncenter wp-image-407" src="https://wisehobbies.com/wp-content/uploads/2023/11/artificial-intelligence-300x300.png" alt="" width="40" height="40" /></a>AI그림</td>
<td style="width: 20%; text-align: center; height: 24px;"><a href="https://wisehobbies.com/%ea%b8%80%ed%84%b0/"><img class="aligncenter wp-image-1341" src="https://wisehobbies.com/wp-content/uploads/2023/11/desktop-computer-300x300.png" alt="" width="40" height="40" /></a>글터</td>
<td style="width: 20%; text-align: center; height: 24px;"><a href="https://wisehobbies.com/%ea%b7%b8%eb%a6%bc%ed%84%b0/"><img class="aligncenter wp-image-1342" src="https://wisehobbies.com/wp-content/uploads/2023/11/tools-300x300.png" alt="" width="40" height="40" /></a>그림터</td>
</tr>
<tr>
<td style="width: 20%; text-align: center;"></td>
<td style="width: 20%; text-align: center;"></td>
<td style="width: 20%; text-align: center;"></td>
<td style="width: 20%; text-align: center;"></td>
<td style="width: 20%; text-align: center;"></td>
</tr>
</tbody>
</table>

 

이걸 컨테이너 안의 텍스트 안에 집어넣고, 폰에서만 보이도록 하면 끝이다.

#망보드#설정#아바다#AVADA
댓글
자동등록방지
(자동등록방지 숫자를 입력해 주세요)