티스토리 뷰

WEB/css

조직도 css html

silverline79 2026. 1. 29. 21:57

 

조직도.html
0.01MB

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 4단계 조직도</title>
    <style>
        :root {
            --line-color: #cbd5e1;
            --node-bg: #ffffff;
            --node-border: #64748b;
            --text-color: #1e293b;
        }

        body {
            font-family: 'Pretendard', sans-serif;
            background-color: #f8fafc;
            margin: 0;
            padding: 50px 20px;
            display: flex;
            justify-content: center;
        }

        /* 가로 스크롤 컨테이너 */
        .wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding: 20px;
        }

        .tree {
            white-space: nowrap;
            min-width: max-content; /* 자식 요소들에 맞춰 컨테이너 확장 */
            margin: 0 auto;
        }

        .tree ul {
            padding-top: 20px;
            position: relative;
            transition: all 0.5s;
            display: flex;
            justify-content: center;
        }

        .tree li {
            text-align: center;
            list-style-type: none;
            position: relative;
            padding: 20px 10px 0 10px;
            transition: all 0.5s;
        }

        /* 연결선(상단 가로선) */
        .tree li::before, .tree li::after {
            content: '';
            position: absolute; top: 0; right: 50%;
            border-top: 2px solid var(--line-color);
            width: 50%; height: 20px;
        }
        .tree li::after {
            right: auto; left: 50%;
            border-left: 2px solid var(--line-color);
        }

        /* 단일 자식의 경우 상단 선 제거 */
        .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: 2px solid var(--line-color);
            border-radius: 0 5px 0 0;
        }
        .tree li:first-child::after {
            border-radius: 5px 0 0 0;
        }

        /* 부모로부터 내려오는 수직선 */
        .tree ul ul::before {
            content: '';
            position: absolute; top: 0; left: 50%;
            border-left: 2px solid var(--line-color);
            width: 0; height: 20px;
        }

        /* 노드 박스 스타일 */
        .tree li .node {
            border: 2px solid var(--node-border);
            padding: 12px 18px;
            text-decoration: none;
            color: var(--text-color);
            font-size: 14px;
            font-weight: 600;
            display: inline-block;
            border-radius: 8px;
            background-color: var(--node-bg);
            transition: all 0.3s;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .tree li .node:hover {
            background: var(--node-border);
            color: #fff;
            transform: translateY(-3px);
        }

        /* Depth별 색상 구분 (옵션) */
        .tree > ul > li > .node { background-color: #3b82f6; color: white; border-color: #2563eb; } /* 1Depth */
        .tree ul ul li > .node { background-color: #eff6ff; } /* 2-4Depth */

    </style>
</head>
<body>

    <div class="wrapper">
        <div class="tree">
            <ul>
                <li>
                    <div class="node">대표이사 (CEO)</div>
                    <ul>
                        <li>
                            <div class="node">개발본부</div>
                            <ul>
                                <li>
                                    <div class="node">백엔드팀</div>
                                    <ul>
                                        <li><div class="node">API 파트</div></li>
                                        <li><div class="node">DB 파트</div></li>
                                    </ul>
                                </li>
                                <li>
                                    <div class="node">프론트엔드팀</div>
                                    <ul>
                                        <li><div class="node">React 파트</div></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class="node">경영지원본부</div>
                            <ul>
                                <li>
                                    <div class="node">인사팀</div>
                                    <ul>
                                        <li><div class="node">채용파트</div></li>
                                        <li><div class="node">노무파트</div></li>
                                    </ul>
                                </li>
                                <li>
                                    <div class="node">회계팀</div>
                                    <ul>
                                        <li><div class="node">자금파트</div></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

</body>
</html>

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.

'WEB > css' 카테고리의 다른 글

검색영역 가로 3개 반응형  (0) 2026.01.26
다크 모드 전환 스위치  (0) 2026.01.14
clamp() 함수와 **CSS 변수(Variables)**  (0) 2026.01.14
폼(Form) 요소의 상태를 제어하거나 특정한 위치를 타겟팅할 때 유용한 선택자  (0) 2026.01.14
논리 가상 클래스 선택자 :where() / :is() / :has() / :not()  (0) 2026.01.14
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
글 보관함