TIL(today I learned)

2020.09.28 #TIL

노랑세희 2020. 9. 28. 22:31

 오늘은 조직도를 공부하다 마무리하지 못했다 일단 마크업은 완성 단계이고 CSS 작성하면서 추가할 부분을 보완해야한다. CSS는 전체 틀은 구상해놓았고 1dep부터 디자인을 입히려다가 같은 디자인끼리 묶어서 CSS를 주려고 수정했다

내일 중으로 마무리 해야겠다.

 

 

 

HTML

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="system.css">

    <link rel="stylesheet" href="default.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

 

<body>

    <div class="system">

        <ul>

            <li><p><b>대표이사</b></p>

                <ul>

                    <li><p><b>소비자보호총괄책임자<br>(CCO: Cheif Consumer Officer</b></p></li>

                    <li><span>금융소비자보호협의회<br>(CCO를 포함한 금융소비자보호 최고의결기구)</span></li>

                    <li><p><b>소비자 보호파트</b></p>

                        <ul>

                            <li>소비자제도 기획

                                <div>

                                    소비자 보호 관련 업무기획<br>

                                    상품개발 및 판매 시 사전협의 및 모니터링<br>

                                    민원분석을 통한 제도 개선

                                </div>

                            </li>

                            <li>

                                VOC 및 민원 업무

                                <div>

                                    고객의 소리 접수 및 처리<br>

                                    대내외 민원 접수 및 처리<br>

                                    보이스피싱 피해 등 소비자 피해 보상의<br>

                                    접수 및 처리

                                </div>

                            </li>

                            <li>피해 예방 모니터링

                                <div>

                                    보이스피싱 및 해킹에 의한<br>

                                    이상금융거래 등 소비자피해<br>

                                    예방을 위한 모니터링 및 조치

                                </div>

                            </li>

                        </ul>

                    </li>

                </ul>

            </li>

        </ul>

    </div>

</body>

 

</html>

 

 

 

CSS

body{

    padding: 50px;

    background: #fafafa;

}

.system{

    width: 1080px;

    height: 633px;

    margin: 0 auto;

    background: url(bg_system.png) no-repeat center 70px;

    font-family: dotum;  

    color: #000;

    box-sizing: border-box;

}

.system p{

    display: table;

    width: 320px;

    height: 70px;

    border: 1px solid #d3d3d3;

    background: #fff;

    box-sizing: border-box;

}

.system p b{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

}

 

 

 

결과

<진행중>

<목표>