따라 하기 전에 먼저 생각해 보고

따라 하면서 중간중간 이해해 보고

다 만든 후 혼자 처음부터 만들어 보고

 

 

 

 

 

 

 

 

 

 

 

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

+ Recent posts

티스토리툴바