<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조직도</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tree">
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>대표이사</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>신**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>총무부</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>정**</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>박**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>사입팀</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>이**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>박**</span></a></li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>김**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>김**</span></a></li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>홍**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>이**</span></a></li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>김**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>정**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>이**</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>마지막</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>김**</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>영업MD</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>이**</span></a></li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>온라인</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>황**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>정**</span></a></li>
<li><a href="#"><img src="images/1.png" alt=""><span>박**</span></a></li>
<li><a href="#"><img src="images/1.png" alt=""><span>조**</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>CS</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>김**</span></a></li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>물류센터</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>김**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>박**</span></a></li>
<li><a href="#"><img src="images/1.png" alt=""><span>김**</span></a>
<ul>
<li><a href="#"><img src="images/1.png" alt=""><span>윤**</span></a></li>
<li><a href="#"><img src="images/1.png" alt=""><span>최**</span></a></li>
<li><a href="#"><img src="images/1.png" alt=""><span>노**</span></a></li>
</ul>
</li>
<li><a href="#"><img src="images/1.png" alt=""><span>박**</span></a></li>
<li><a href="#"><img src="images/1.png" alt=""><span>정**</span></a>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
/* height: 100vh; */
width: 100vw;
display: grid;
align-items: center;
background: #f5f5f5;
font-size: 1vw
}
.tree {
width: 100%;
/* width: 100vw; */
height: auto;
text-align: center;
border: 1px solid red;
overflow:hiddlen; /* 줄 바꿈 금지 */
white-space:nowrap; /* 줄 바꿈 금지 */
}
.tree ul {
padding-top: 20px;
position: relative;
transition: 0.5s;
}
.tree li {
display: inline-table;
text-align: center;
list-style-type: none;
position: relative;
padding: 10px; /* 넓은화면 */
padding-top: 10px;
transition: 0.5s;
}
/* .tree li::before, */
.tree li::before {
content: "";
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid yellowgreen; /* ─ 수평선 두께 */
width: 50%; /* ─ 수평선 왼쪽 첫번째 자식 */
height: 10px;
}
.tree li::after {
content: "";
position: absolute;
top: 0;
/* right: 50%; */
right: auto;
left: 50%;
border-top: 1px solid red; /* ─ 수평선 두께 */
border-left: 1px solid red; /* 부모에게서 내려오는 │ 수직선 왼쪽 #ccc */
/* width: 96%; ─ 수평선 */
width: 60%; /* ─ 수평선 */
height: 10px;
}
/* .tree li::after {
} */
.tree li:only-child:after,
.tree li:only-child:before {
display: none;
}
.tree li:only-child {
padding-top: 0;
}
.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none; /* ─ 수평선 왼쪽 */
}
.tree li:last-child::before {
border-right: 1px solid black; /* 부모에게서 내려오는 │ 수직선 오른쪽 끝 */
/* border-radius: 0px 5px 0px 0px; */
}
/* .tree li:first-child::after {
border-radius: 5px 0px 0px 0px;
} */
.tree ul ul::before {
content: "";
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid orange; /* │ 수직선 윗부분 */
width: 0;
height: 20px;
}
.tree a {
border: 1px solid #ccc; /* 개체 테두리 */
padding: 1px;
display: inline-grid;
border-radius: 5px;
text-decoration-line: none;
transition: 0.5s;
}
.tree a img {
/* width: 50px;
height: 50px;
margin-bottom: 10px !important;
border-radius: 100px;
margin: auto; */
display: none;
}
/* .tree a span {
border: 1px solid #ccc;
border-radius: 5px;
color: #666;
padding: 8px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
} */
/*Hover-Section*/
.tree li a:hover,
.tree li a:hover img,
.tree li a:hover span,
.tree li a:hover + ul li a {
background: #c8e4f8;
color: #000;
/* border: 1px solid#94a0b4; */
box-shadow: 0px 0px 8px -5px #5f5f5f;
}
.tree li a:hover + ul li::after,
.tree li a:hover + ul li::before,
.tree li a:hover + ul::before,
.tree li a:hover + ul ul::before {
border-color: #94a0b4;
}
/* @page { size: A4 portrait; margin:0; } A4 세로 출력 */
@page { size: A4 landscape; margin:0; } /* A4 가로 출력 */
@media all and (max-width: 768px){
/* 브라우저 창 width가 768px보다 작아지는 순간부터 적용
모바일 */
.tree li {
display: inline-table;
text-align: center;
list-style-type: none;
position: relative;
padding: 0px; /* 좁은화면 */
padding-top: 10px;
transition: 0.5s;
}
}화면 그대로 출력하기
http://goodthing.me/saucetip/5467
Good Thing - 좋은일, 좋은생각
당신이 원하고, 희망하고, 꿈꾸고 있는것들 그것을 가능하게 도와드리겠습니다.
goodthing.me
https://devesim.tistory.com/105
프린트 가로, 세로 출력 CSS 설정
· 환경 : 크롬 · 방법 : style 태그 내부에 아래 코드를 작성한다. @page { size: A4 portrait; margin:0; } //A4 세로 출력 @page { size: A4 landscape; margin:0; } //A4 가로 출력 자바스크립트에서 인쇄 시 크롬 미리보
devesim.tistory.com
node.js 설치
node -v 설치확인
npm install -g localtunnel
lt 설치확인
lt --port 5500 --subdomain test --local-host "127.0.0.1" -o --print-requests
'컴퓨터 > HTML' 카테고리의 다른 글
| 코딩자율학습 HTML+CSS+자바스크립트 길벗 (0) | 2023.03.16 |
|---|---|
| font 찾기 (0) | 2023.02.14 |
| 반응형 웹사이트 화면크기 (0) | 2020.09.13 |
| html (0) | 2020.09.12 |
| css 블록요소 인라인요소 codepen (0) | 2020.09.12 |