직접 제작한 HTML 양식

펜슬과 포스타입이 차이점이자 잘쓰면 유용한 기능 HTML.

근데 CSS를 사용할 수 없어서 일일히 style해야되는건 불편함 ㅎㅎ;;

심심할 때마다 어느 사이트를 모방해서 HTML을 조금식 만들어볼 예정. 누구든 쓰지 않을까나.

펜슬은 유감스럽게도 코드에디터가 없어서 HTML로 만들었으나 복붙이 안됨;;; 그래서 인용문을 사용해서 코드를 올렸습니다…

가독성이 쓰레기라도 이해해주세요 ㅠ^ㅠ

아! PC에 최적화 되어있습니다! 모바일은 가독성 그지에요!!

• 홈페이지 인사말

미리보기

<div style="border: 2px solid black; border-radius: 10px; background-color: #EEEEEE; margin: 5px; padding: 10px; font-size:15px; font-family: PNXL_RIDIBatang; line-height:160%; word-break: keep-all;">

<p style="font-weight: bold; font-size: 16px;">　안녕하십니까? 제작자입니다.</p>

쉬운 형식이지만 누군가는 사용할 수도 있다고 생각하여 함께 첨부합니다. 유용히 사용되었으면 좋겠네요.

<br>펜슬도 추후 CSS기능을 추가해줬으면 하네요. 다른 웹폰트도 사용하고 싶기 때문입니다. 물론 기본 폰트도 잘 되어있어 좋긴한데...

<br>폰트를 바꾸는 것은 추후 소개해드리도록 하겠습니다. 이만 잡설을 마치며 사라져보겠습니다.

<br>감사합니다.

</div>

HTML

• 소방청 전국소방서안내도 모방

미리보기

<p style="border: 2px solid black; background-color: #EEEEEE; padding: 10px; text-align: center; font-size:19px; font-family: PNXL_RIDIBatang; line-height:130%; font-weight: bold;">

전국소방서안내

</p><br>

<div style="font-family: PNXL_Pretendard; font-size: 16px; line-height:160%; word-break: keep-all;">

<span style="float: left; margin: 5px; width: 70%; line-height: 90%;">

<span style="font-weight: bold; display: inline-block;">접속위치 : </span> 서울특별시 ●●구 ●●동 ■■-■

<br><span style="display: inline-block; font-size: 13px; color:gray">※ 접속 위치가 다르거나 타 지역을 찾으실 경우 우측의 검색 창에서 지역명(시, 구, 동 혹은 로 단위)을 검색하시면 됩니다.</span>

</span>

<span style="border: 1px solid black; float: right; margin: 1px; padding: 3px; background-color: #3D3D3D; color: white; width: 50px; text-align: center;">검색</span>

<span style="border: 1px solid black; float: right; margin: 1px; padding: 3px; color: white; width: 20%; text-align: center;">지역구</span><br>

</div><br>

<table height="180" align="left" style="border: 1px solid black; font-family: PNXL_Pretendard; font-size:15px; width:100%; word-break: keep-all;">

<tr style="text-align:left;">

<th style="padding:5px;border-right: 1px solid black;"><div style= "font-weight: bold;font-size:17px;">○○소방서-○○</div><br>서울특별시 ○○구 ○○로 ■<br>(○○동)<br>02-○○○○-○○○○<br>119 ♡♡소방센터<br><span style="font-size:11px; color:gray;">※ 해당지역 : ○○, ○○, ○○, ○○</th>

<th style="padding:5px;border-right: 1px solid black;"><div style= "font-weight: bold;font-size:17px;">◇◇소방서-◇◇</div><br>서울특별시 ◇◇구 ◇로 ■■■<br>(◇◇동)<br>02-◇◇◇◇-◇◇◇◇<br>119 ♡♡소방센터<br><span style="font-size:11px; color:gray;">※ 해당지역 : ◇◇, ◇◇, ◇◇</th>

<th style="padding:5px;border-right: 1px solid black;"><div style= "font-weight: bold;font-size:17px;">□□소방서-□□</div><br>서울특별시 □□구 □□로 ■■<br>(□□동)<br>02-□□□□-□□□□<br>119 ♡♡소방센터<br><span style="font-size:11px; color:gray;">※ 해당지역 : □□, □□, □□</th>

<th style="padding:5px;border-right: 1px solid black; background-color:#efefef;"><div style= "font-weight: bold;font-size:17px;">◎◎◎소방서-◎◎</div><br>서울특별시 ◎◎구 ◎◎로 ■■<br>(◎◎동)<br>02-◎◎◎◎-◎◎◎◎<br>119 ♡♡소방센터<br><span style="font-size:11px; color:gray;">※ 해당지역 : ◎◎, ◎◎◎, ◎◎</th>

<th style="padding:5px;"><div style= "font-weight: bold;font-size:17px;">☆☆소방본부</div><br>서울특별시 ☆☆구 ☆☆로 ■<br>(☆☆동)<br>02-☆☆☆☆-☆☆☆☆<br>119 ♡♡소방구조본부<br><span style="font-size:11px; color:gray;">※ 해당지역 : 별도 지정. 공지참조</th>

</tr>

</table>

HTML

• 직무자 연락처소개

미리보기

<span style="border-left: 5px solid black; background-color: #e1e1e1; margin: 2px; padding: 5px; text-align: left; font-size:19px; font-family: PNXL_RIDIBatang; line-height:160%; font-weight: bold; width: 500px; word-break: keep-all;">

소개를 무엇이든 적으십시오</span><br><br>

<div style="font-family: PNXL_Pretendard; font-size:15px; line-height:140%; word-break: keep-all; padding-left:10px; border-left:2px solid gray; margin-left:5px">

뭐든 적으십시오.

<br>감사합니다.

<br><br><div style="float:right;">- 어쩌구저쩌구 어떤팀 주○○ 부장</div>

</div>

<br><br>

<table align="left" style="border: 1px solid gray; font-family: PNXL_Pretendard; font-size:15px; width:100%; border-collapse: collapse; word-break: keep-all;">

<tr style="font-size:16px; font-weight: bold;">

<th style="height: 45px; wight: 20px; border-bottom:2px solid black;">　</th>

<th style="border-bottom:2px solid black;wight: 15%">소속팀</th>

<th style="border-bottom:2px solid black;wight: 15%">성명</th>

<th style="border-bottom:2px solid black;wight: 10%">직급/직위</th>

<th style="border-bottom:2px solid black;wight: 20%">연락처</th>

<th style="border-bottom:2px solid black;wight: 30%">특이사항</th>

<th style="border-bottom:2px solid black;wight: 10%">근무현황</th> <!--제거해도 무관-->

<th style="height: 45px; wight: 20px; border-bottom:2px solid black;">　</th>

</tr>

<tr style="font-size:15px; text-align: center;">

<td style="height: 45px; border-bottom:1px solid #bbbbbb;"></td>

<td style="border-bottom:1px solid #bbbbbb;">A팀</td>

<td style="border-bottom:1px solid #bbbbbb;">주○○</td>

<td style="border-bottom:1px solid #bbbbbb;">과장할래</td>

<td style="border-bottom:1px solid #bbbbbb;">044-●●●●-●●●●</td>

<td style="border-bottom:1px solid #bbbbbb;">뭘 잘할까<span style="color:gray; font-size:11px;">※막적기</span></td>

<td style="border-bottom:1px solid #bbbbbb; color:green">당직</td>

<td style="height: 45px; border-bottom:1px solid #bbbbbb;"></td>

<!-- 추가하고 싶은 내용이 생기면 여기부터 -->

</tr>

<tr style="font-size:15px; text-align: center;">

<td style="height: 45px; border-bottom:1px solid #bbbbbb;"></td>

<td style="border-bottom:1px solid #bbbbbb;">B팀</td>

<td style="border-bottom:1px solid #bbbbbb;">김○○</td>

<td style="border-bottom:1px solid #bbbbbb;">팀장</td>

<td style="border-bottom:1px solid #bbbbbb;">044-●●●●-●●●●</td>

<td style="border-bottom:1px solid #bbbbbb;">뭘 잘할까나</td>

<td style="border-bottom:1px solid #bbbbbb; color:green">당직</td>

<td style="height: 45px; border-bottom:1px solid #bbbbbb;"></td>

</tr>

<!-- 여기까지 복사 붙여넣기 ㄱㄱ -->

<tr style="font-size:15px; text-align: center;">

<td style="height: 45px;"></td>

<td>C팀</td>

<td>윤○○</td>

<td>사원</td>

<td>044-●●●●-●●●●</td>

<td>숨쉬기를 잘해요<span style="color:gray; font-size:11px;">※그거말고는 딱히</span></td>

<td style="color:green;">당직</td>

<td style="height: 45px;"></td>

</tr>

</table>

HTML