개발 공부/html & css
제대로 배워보는 html과 css, 그리고 웹표준 9. EMS, 이벤트 제작 실습
maxlafe
2020. 9. 11. 15:41
퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
제대로 배워보는 html과 css, 그리고 웹표준 9. EMS, 이벤트 제작 실습
9.1 이메일 페이지 제작 실습 1~2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- quirks mode -->
<html lang="en">
<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" border="0">
<tbody>
<tr>
<td><img src="img/em_top2_2017_event.gif" alt=""></td>
</tr>
<tr>
<td style="padding: 15px 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><img style="text-align: center" src="img/seoulgas_event_2017_1.png" alt="아직도 이메일로 요금만 확인하세요?
요즘세대는 가스앱, 실시간 요금조회부터 요금납부,안전매니저 방문 예약 신청까지 이제 우리집 가스관리는 가스앱으로!
'가스앱' 이럴때 쓰기 좋아요! 가스앱에서는 실시간 가스요금을 확인할 수 있어요. 8개 카드결제와 5개 은행계좌이체가 가스앱으로 가능하구요, 월별 및 연간 가스사용량과 요금조회가 가능해요. 이사일에 맞춰 방문예약만 하면 이사당일, 서비스매니저가 방문해 업무를 처리해 드려요. 가스앱으로 방문 예약 신청하시면 원하는 날짜와 시간에 안전매니저가 방문합니다. 가스앱에서는 콜센터 연결과 대처방법을 안내해드려요."></td>
</tr>
<tr>
<td><img style="text-align: center" src="img/seoulgas_event_2017_2.png" alt="서울도시가스 모바일고객센터 앱 다운로드 이벤트
모바일 청구서 신청하고 3천원 쿠폰 겟 하자!
이벤트기간 2017년9월11일~2017년11월10일
이벤트대상 이벤트 기간 내 모바일 청구서 신규 신청회원.
기 참여자는 금번 이벤트에 참여하실 수 없습니다. 기타 유의사항은 앱 내 이벤트 페이지를 참고하세요.
앱마켓에서 가스앱 또는 서울도시가스를 검색하세요. "> </td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- quirks mode -->
<html lang="en">
<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" style="border:1px solid #ccc; background-color:#f2f2f2" align="center" border="0">
<tbody>
<tr>
<td style="padding-top: 5px"><img src="img/em_top2_2017_event.gif" alt=""></td>
</tr>
<tr>
<td style="padding: 15px 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 style="vertical-align:top" border="0" src="img/seoulgas_event_2017_1.png" alt="아직도 이메일로 요금만 확인하세요?
요즘세대는 가스앱, 실시간 요금조회부터 요금납부,안전매니저 방문 예약 신청까지 이제 우리집 가스관리는 가스앱으로!
'가스앱' 이럴때 쓰기 좋아요! 가스앱에서는 실시간 가스요금을 확인할 수 있어요. 8개 카드결제와 5개 은행계좌이체가 가스앱으로 가능하구요, 월별 및 연간 가스사용량과 요금조회가 가능해요. 이사일에 맞춰 방문예약만 하면 이사당일, 서비스매니저가 방문해 업무를 처리해 드려요. 가스앱으로 방문 예약 신청하시면 원하는 날짜와 시간에 안전매니저가 방문합니다. 가스앱에서는 콜센터 연결과 대처방법을 안내해드려요."></td>
</tr>
<tr>
<td style="padding-bottom: 15px; text-align: center"><img style="vertical-align:top" border="0" usemap="#map" src="img/seoulgas_event_2017_2.png" alt="서울도시가스 모바일고객센터 앱 다운로드 이벤트
모바일 청구서 신청하고 3천원 쿠폰 겟 하자!
이벤트기간 2017년9월11일~2017년11월10일
이벤트대상 이벤트 기간 내 모바일 청구서 신규 신청회원.
기 참여자는 금번 이벤트에 참여하실 수 없습니다. 기타 유의사항은 앱 내 이벤트 페이지를 참고하세요.
앱마켓에서 가스앱 또는 서울도시가스를 검색하세요. ">
</td>
<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>
</tr>
</tbody>
</table>
</body>
</html>
7.3 이벤트 페이지 제작 실습
<!DOCTYPE html>
<html lang="en">
<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, dd, dt, ul, ol, li{
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
.area{
background-color: #ddd;
padding: 40px 0;
}
.event {
width: 1080px;
height: 1532px;
background: url(img/event.jpg);
margin: 0 auto;
text-indent: -9999em;
position: relative;
}
.event .btn {
position: absolute;
left: 260px;
top: 1350px;
}
.event .btn a {
display: block;
/* a는 인라인 요소라 크기 지정이 안 되므로 블록을 지정해야 함 */
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>
BEAT360(압구정로417)
</dd>
<dt>프로그램</dt>
<dd>
<ol>
<li>
<p><strong>예비 서퍼들을 위한 서핑의 모든 것</strong></p>
<p>안전수칙,서퍼의 매너,파도를 잡는 법,내게 맞는 장비 선택 요령, 지상 트레이닝_본격 패들링부터 테이크 오프까지</p>
</li>
<li>
<p><strong>서퍼들의 가슴 뛰는 삶과 생생한 서핑 이야기</strong></p>
</li>
</ol>
</dd>
<dt>강사소개</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>