따라 하기 전에 먼저 생각해 보고
따라 하면서 중간중간 이해해 보고
다 만든 후 혼자 처음부터 만들어 보고
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Mobile web</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable=no>
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="system">
<ul>
<li><p><b>대표이사 타쿠대디</b></p></li>
<ul>
<li><p><b>금융소비자보호총괄책임자<em>(CCO : Chief Consumer Officer)</em></b></p></li>
<li><span><b>금융소비자보호협의회<em>(CCO를 포함한 금융소비자보호 최고의결기가)</em></b></span></li>
<li><p><b>소비자 보호파트</b></p></li>
<ul class="depth3">
<li>
<strong>소비자제도 기획</strong>
<div>
소비자 보호 관련 업무기획<br>
상품개발 및 판매 시 사전협의 및 모니터링 <br>
민원분석을 통한 제도 개선
</div>
</li>
<li>
<strong>VOC 및 민원 업무</strong>
<div>
고객의 소리 접수 및 처리<br>
대내외 민원 접수 및 처리 <br>
보이스피싱 피해 등 소비자 피해 보상의<br>
접수 및 처리
</div>
</li>
<li>
<strong>피해 예방 모니터링</strong>
<div>
보이스피싱 및 해킹에 의한<br>
이상금융거래 등 소비자피해 <br>
예방을 위한 모니터링 및 조치
</div>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS
body { padding: 50px; background: #fafafa;}
.system { position:relative; width: 1080px; height: 631px; background: url(bg_system.png) no-repeat center 70px; font-family: dotum; font-family: dotum; color:#000;}
.system p { display:table; width: 318px; margin: 0 auto 60px; background: #fff;}
.system b { display: table-cell; vertical-align: middle; text-align: center; height: 68px; border: 1px solid #d3d3d3;}
.system em { display:block; font-weight: normal;}
.system span {position:absolute; right: 0; top: 260px; display: table; width: 318px; height: 68px; background: #ededed; border: 1px solid #d3d3d3; }
.system .depth3 strong { display: block; width: 318px; height: 48px; line-height: 48px; border: 1px solid #d3d3d3; background: #ededed; text-align: center;}
.system .depth3 div { padding: 18px 0 0 ; width: 318px; height: 128px; border: 1px solid #d3d3d3; border-top: none; background: #fff; line-height: 26px; text-align: center;}
.system .depth3 > li:nth-child(2) { padding:44px 0 0; margin: 0 auto; width: 318px;}
.system .depth3 > li:nth-child(1) { position: absolute; left:0; bottom:0;}
.system .depth3 > li:nth-child(3) { position: absolute; right:0; bottom:0;}
도움 : 유튜브 리베하얀님
https://www.youtube.com/watch?v=9fdjA3CgxtA&list=PL_6yF2upGJYtE8CWiTRu7qvRSSzFy4Hzd&index=6
728x90
'프로젝트 및 실습 > 웹 따라 만들기' 카테고리의 다른 글
| 실무실습) 탭 메뉴 만들기 (0) | 2020.05.17 |
|---|---|
| 실무실습) 간단한 카테고리 만들기 (0) | 2020.05.15 |
| 실무실습) 로그인 페이지 만들기 (0) | 2020.05.12 |
| 실무실습) 이벤트 게시판 (0) | 2020.05.09 |
| 실무실습) 연혁표 만들기 (2) | 2020.05.07 |