-
2020.09.29 #TILTIL(today I learned) 2020. 9. 29. 16:11
오늘은 어제 마무리 못한 조직도를 마무리 했다. 부모님댁 오느라 저녁공부는 못했지만 아침이랑 학원에서 틈틈히 해서 마무리할 수 있었다.
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><em>(CCO: Cheif Consumer Officer)</em></b></p>
</li>
<li><span><b>금융소비자보호협의회<br><em>(CCO를 포함한 금융소비자보호 최고의결기구)</em></b></span></li>
<li>
<p><b>소비자 보호파트</b></p>
<ul class="sub">
<li class="left">
<strong>소비자제도 기획</strong>
<div>
소비자 보호 관련 업무기획<br>
상품개발 및 판매 시 사전협의 및 모니터링<br>
민원분석을 통한 제도 개선
</div>
</li>
<li class="center">
<strong>VOC 및 민원 업무</strong>
<div>
고객의 소리 접수 및 처리<br>
대내외 민원 접수 및 처리<br>
보이스피싱 피해 등 소비자 피해 보상의<br>
접수 및 처리
</div>
</li>
<li class="right">
<strong>피해 예방 모니터링</strong>
<div>
보이스피싱 및 해킹에 의한<br>
이상금융거래 등 소비자피해<br>
예방을 위한 모니터링 및 조치
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS
body{
padding: 50px;
background: #fafafa;
}
.system{
position: relative;
width: 1080px;
height: 633px;
background: url(bg_system.png) no-repeat center 70px;
font-family: dotum;
font-size: 13px;
color: #000;
box-sizing: border-box;
}
.system p{
display: table;
padding: 10px 0 7px;
width: 320px;
height: 70px;
line-height: 26px;
margin: 0 auto 60px;;
border: 1px solid #d3d3d3;
background: #fff;
box-sizing: border-box;
}
.system p b{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.system em{
font-weight: normal;
}
.system span{
position: absolute; right:0; top: 260px;
display: table;
padding: 10px 0 7px;
width: 320px;
height: 70px;
line-height: 26px;
border: 1px solid #d3d3d3;
background: #ededed;
text-align: center;
box-sizing: border-box;
}
.system .sub li strong{
display: table;
width: 320px;
height: 51px;
border: 1px solid #d3d3d3;
border-bottom: none;
background: #ededed;
line-height: 51px;
text-align: center;
box-sizing: border-box;
}
.system .sub li.center{
position: absolute; left: 50%; top:430px;
transform: translate(-50%, 0);
}
.system .sub li.left{
position: absolute; left:0; top: 430px;
}
.system .sub li.right{
position: absolute; right:0; top: 430px;
}
.system .sub li div{
padding: 18px 0 17px;
width: 320px;
height: 140px;
line-height: 26px;
border: 1px solid #d3d3d3;
font-size: 11px;
text-align: center;
box-sizing: border-box;
}
* display: table; table-cell로 가운데 정렬을 했음 부모요소에 table을 넣고 자식에 table-cell; 후 vertical-align: middle; 하면 세로 가운데 정렬 가능
* 조직도의 줄기 부분은 div의 background image로 넣고 제일 윗 li 높이 만큼 윗 여백을 제공하였음
결과
'TIL(today I learned)' 카테고리의 다른 글
2020.10.07 #TIL (0) 2020.10.08 2020.10.06 #TIL (0) 2020.10.07 2020.09.28 #TIL (0) 2020.09.28 2020.09.27 #TIL (0) 2020.09.27 2020.09.25 #TIL (0) 2020.09.26