Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>서울도시가스 모바일고객센터앱 프로모션 안내</title>
<!-- 이메일 같은 경우에는 아래 바디 부분만 보내기 때문에 인라인 태그로 스타일을 적용해줘야함 -->
</head>
<body>
<table width="860" cellpadding="0" cellspacing="0" align="center" style="border:1px solid #ccc; background-color: #f2f2f2;" border="0">
<!-- cellpadding 셀 안의 여백, cellspacing 셀과 셀 사이 여백 -->
<tbody>
<tr>
<td style="padding-top: 5px;"><img src="img/em_top2_2017_event.gif" alt=""></td>
<!-- 굳이 설명이 없는 장식요소 같은거는 alt 안써도 무방 -->
</tr>
<tr>
<td style="padding:10px 0; color: #333; font:12px/1.6 'Malgun Gothic',sans-serif; text-align: center;">
<p><strong style="font-size: 1.2em;">요즘 대세라는 가스앱 아직도 모르시나요?</strong><br>
이제 가스앱으로 우리집 가스관리하세요!<br>
실시간 요금 조회부터 요금 납부, 안전매니저 방문예약 신청까지<br>
우리집 가스 관리에 필요한 모든 기능을 담은 가스앱!<br></p>
<p><strong style="font-size: 1.2em;">가스앱에서 모바일 청구서 신청 시 3,000원 모바일 쿠폰 증정 이벤트도 진행하고 있으니</strong><br>
하단의 이미지를 꼭 참고하세요!<br></p>
<p style="border-top: 1px solid #ccc; padding-top: 6px;"><small><strong>우리집 가스관리의 모든 것</strong><br>
가스앱- 서울도시가스 모바일 고객센터</small></p>
</td>
</tr>
<tr>
<td style="text-align: center;"><img src="img/seoulgas_event_2017_1.png" style="vertical-align: top;" border="0" alt="아직도 이메일로 요금만 확인하세요? 요즘세대는 가스앱, 실시간 요금조회부터 요금납부,안전매니저 방문 예약 신청까지 이제 우리집 가스관리는 가스앱으로! '가스앱' 이럴때 쓰기 좋아요! 가스앱에서는 실시간 가스요금을 확인할 수 있어요. 8개 카드결제와 5개 은행계좌이체가 가스앱으로 가능하구요, 월별 및 연간 가스사용량과 요금조회가 가능해요. 이사일에 맞춰 방문예약만 하면 이사당일, 서비스매니저가 방문해 업무를 처리해 드려요. 가스앱으로 방문 예약 신청하시면 원하는 날짜와 시간에 안전매니저가 방문합니다. 가스앱에서는 콜센터 연결과 대처방법을 안내해드려요."></td>
<!-- style="vertical-align: top;" 을 img 태그 안에 넣어줘야 이미지 간에 틈이 안 생김 -->
</tr>
<tr>
<td style="padding-bottom: 15px; text-align: center;">
<img src="img/seoulgas_event_2017_2.png" style="vertical-align: top;" border="0" usemap="#map" alt="서울도시가스 모바일고객센터 앱 다운로드 이벤트 모바일 청구서 신청하고 3천원 쿠폰 겟 하자! 이벤트기간 2017년9월11일~2017년11월10일 이벤트대상 이벤트 기간 내 모바일 청구서 신규 신청회원. 기 참여자는 금번 이벤트에 참여하실 수 없습니다. 기타 유의사항은 앱 내 이벤트 페이지를 참고하세요.">
<map name="map" id="map">
<area shape="rect" coords="417,833,585,884" href="#" alt="구글플레이에서 다운로드하기">
<area shape="rect" coords="417,900,585,950" href="#" alt="앱스토어에서 다운로드하기">
</map>
</td>
</tr>
</tbody>
</table>
</body>
</html>
이메일 내용 페이지 예제인데
이메일 내용 같은 경우에는 페이지 전체가 아니라 body 부분만 전송하는 방식으로 주로 쓰기 때문에
style 태그를 인라인으로 지정해주어야 한다.
이미지 밑에 있는 다운로드하기 버튼 링크들은
위처럼 포토샵에서 해당하는 영역의 x y 좌표값을 얻어서
왼쪽 위 모서리 x좌표, 왼쪽 위 모서리 y좌표, 오른쪽 아래 모서리 x좌표, 오른쪽 아래 모서리 y좌표
순서대로 적어서 영역 지정할 수 있음.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>예비 서퍼들을 위한 핵심가이드와 서퍼들의 가슴 뛰는 삶에 대해 나누는 '서핑클래스'</title>
<style>
body,h1,h2,h3,p,dl,dt,dd,ul,ol,li {
margin: 0;
padding: 0;
}
ul,ol,li {
list-style: none;
}
.area {
padding: 40px 0;
background-color: #ddd;
}
.event {
position: relative;
width: 1080px;
height: 1532px;
margin: 0 auto;
background: url(img/event.jpg);
text-indent: -9999em;
/* 텍스트가 보이지 않게 -9999사이즈만큼 들여쓰기해서 화면 밖으로 내보냄 */
}
.event .btn {
position: absolute;
left: 260px;
top: 1350px;
}
.event .btn a {
display: block;
/* a는 인라인 속성이라 크기 지정이 안되니까 display : block;으로 블록을 지정해줘야
배경색이나 크기가 지정됨 */
width: 450px;
height: 45px;
}
</style>
</head>
<body>
<div class="area">
<div class="event">
<h1>KIA BEAT360 <small>BEAT SURF</small></h1>
<h2>예비 서퍼들을 위한 핵심가이드와 서퍼들의 가슴 뛰는 삶에 대해 나누는 '서핑클래스'</h2>
<dl>
<dt><strong>일정</strong></dt>
<dd>
<p><time datetime="2017-09-29T20:00+09:00">9.29(금) 저녁 8시</time>(30분 전부터 입장 가능)</p>
</dd>
<dt><strong>장소</strong></dt>
<dd>
<p>BEAT360(압구정로417)</p>
</dd>
<dt><strong>프로그램</strong></dt>
<dd>
<ol>
<li>
<p><strong>예비 서퍼들을 위한 서핑의 모든 것</strong></p>
<p>안전수칙,서퍼의 매너,파도를 잡는 법,내게 맞는 장비 선택 요령, 지상 트레이닝_본격 패들링부터 테이크 오프까지</p>
</li>
<li>
<p><strong>서퍼들의 가슴 뛰는 삶과 생생한 서핑 이야기</strong></p>
</li>
</ol>
</dd>
<dt><strong>강사소개</strong></dt>
<dd>
<p><strong>Johnny Black(안해성)</strong></p>
<ul>
<li>2010사눅배 양양궁제 서핑대회 롱보드 1위</li>
<li>제1회 마린랜드배 웨이크보드 남자부 5위</li>
<li>쟈니스 서핑스쿨</li>
</ul>
</dd>
<dt><strong>참가신청</strong></dt>
<dd>
<p>Johnny Black 페이스북 게시물 댓글 신청 후 방문(선착순 마감)</p>
<p class="btn"><a href="#">https://www.facebook.com/haesung.an.12</a></p>
</dd>
<dt><strong>신청기간</strong></dt>
<dd>
<p>9.20~9.28</p>
</dd>
</dl>
</div>
</div>
</body>
</html>
이벤트 페이지 예제 실습
이미지에 이벤트에 관련한 정보가 다 들어가있지만
웹 표준성을 준수하는 코딩을 위해서는
따로 텍스트들도 적어주는 것이 좋음
이미지나 스타일 태그는 다 빼놓고 아래 body 부분만 나왔을 때에도
이런 식으로 정리가 되어 있으면 알아보기 쉽다.
하지만 실제 페이지에서는 이런 body 텍스트는 text-indent 값을 마이너스로 한참 줘서
화면에 보이지 않게 한다.
그 외에 특별한 부분이라면 아래 페이스북 페이지 링크 부분만
body에서 해당하는 부분에 스타일을 걸어서 끌어온다
a태그는 인라인 태그이기 때문에 크기 지정이 안되니까
a 태그 부분에 display:block; 스타일을 적용해서 블록태그로 만들어주고
width, height를 지정해주면 위에처럼 버튼의 크기를 넉넉하게 만들 수 있다.
예제 실습으로 넘어오니까 이제 좀
어떤 태그들이 실제로 어떻게 쓰일지 감이 오는 것 같기도 하다.
그리고 생각보다 복잡하고
디자인도 마찬가지지만
표현되어서 보여지는 겉 모습은 똑같아도
어떤 방식으로 풀어낼지는 방법이 천차만별인데
코딩도 똑같은 것 같다.
혼자 쓰는거면 몰라도 대개는
다른 개발자들이나 디자이너들이랑 소통하면서 작업해야할텐데
누가봐도 알 수 있고 이해될만한 코드로 짜는게 중요한 것 같다.
아직은 내가 뭘 만들진 못하지만
디자인도 그냥 무턱대고 만드는게 아니라
각자의 디자인관이 어떤지 그걸 포함시키는게 실력차이라고 생각하는데
가만보니 코딩도 똑같다.
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 012 CSS공부(8) 박스모델 수직가운데정렬, 버튼 예제 실습 (0) | 2021.01.28 |
|---|---|
| 011 CSS공부(7) 박스모델 예제 실습 (0) | 2021.01.27 |
| 009 CSS공부(5) 레이아웃 관련 스타일 (0) | 2021.01.25 |
| 008 CSS 공부(4) 표 관련 스타일 (0) | 2021.01.25 |
| 007 CSS 공부 (3) 박스모델 (0) | 2021.01.14 |
Daily Study/Web Dev
