조직도 만들기

DoorWeb

2026.01.22

5–8분

조직도는 html과 css 기준으로 작업됩니다.
내용 전달을 위해 이미지 보다는 텍스트 처리를 권장합니다

<style>
        /* 컨테이너 */
        .org-container-style1 {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        /* CEO 스타일 */
        .org-container-style1 .ceo-section {
            margin-bottom: 5px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .org-container-style1 .ceo-card {
            background: #fff;
            border: 2px solid #ddd;
            padding: 18px 40px 15px;
            border-radius: 50px;
            display: inline-block;
            position: relative;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .org-container-style1 .ceo-card .name {
            display: block;
            font-weight: bold;
            color: #000;
            font-size: 1.2rem;
        }

        .org-container-style1 .ceo-card .title {
            display: block;
            font-size: 0.8rem;
            color: #aaa;
        }

        /* 연결선 (데스크탑용 수직선) */
        .org-container-style1 .connector-line-v {
            width: 2px;
            height: 40px;
            background-color: #ddd;
            margin-top: 5px;
        }

        /* 오피스 레이아웃 (Flexbox) */
        .org-container-style1 .office-wrapper {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            align-items: flex-start;
        }

        .org-container-style1 .office-column {
            flex: 1;
            min-width: 250px;
        }

        /* 오피스 헤더 */
        .org-container-style1 .office-header {
            padding: 12px;
            border-radius: 8px;
            font-size: 18px;
            color: #fff;
            font-weight: bold;
            margin-bottom: 20px;
            background: #fff;
            color: #333;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
            position: relative;
            border-left: 20px solid #ddd;
        }

        .org-container-style1 .color-yellow {
            background: #fff3d7;
            border-left-color: #fbc02d;
        }

        .org-container-style1 .color-green {
            background: #f0ffdf;
            border-left-color: #8bc34a;
        }

        .org-container-style1 .color-blue {
            background: #edf9ff;
            border-left-color: #03a9f4;
        }

        /* 팀 카드 리스트 */
        .org-container-style1 .team-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            position: relative;
        }

        .org-container-style1 .team-list::before {
            content: '';
            position: absolute;
            left: 12px;
            top: -20px;
            width: 2px;
            height: calc(100% - 12px);
            background: #ddd;
        }

        .org-container-style1 .team-card {
            background: #fff;
            border: 2px dashed #ddd;
            border-radius: 10px;
            padding: 10px;
            margin-left: 40px;
            width: calc(100% - 50px);
            text-align: left;
            font-size: 0.9rem;
            color: #555;
            position: relative;
            line-height: 20px;
        }

        .org-container-style1 .team-card span {
            font-size: 0.75rem;
            color: #999;
        }

        /* 팀 카드 연결선 (가로) */
        .org-container-style1 .team-card::before {
            content: '';
            position: absolute;
            left: -12px;
            top: 50%;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            z-index: 2;
            border: 2px solid #ddd;
            background: #fff;
            transform: translateY(-50%);
        }

        .org-container-style1 .team-card::after {
            content: '';
            position: absolute;
            left: -34px;
            width: 24px;
            top: 50%;
            z-index: 1;
            height: 2px;
            background: #ddd;
            transform: translateY(-50%);

        }

        /* 모바일 반응형 처리 (768px 이하) */
        @media (max-width: 768px) {
            .org-container-style1 .office-wrapper {
                flex-direction: column;
                align-items: center;
            }

            .org-container-style1 .office-column {
                width: 100%;
                margin-bottom: 40px;
            }

            .org-container-style1 .connector-line-v {
                height: 30px;
            }

            /* 모바일에선 가독성을 위해 상단 선 제거 */
        }
    </style>

    <div class="org-container org-container-style1">
        <header class="ceo-section">
            <div class="ceo-card">
                <span class="name">HYEKANG LEE</span>
                <span class="title">CEO</span>
            </div>
            <div class="connector-line-v"></div>
        </header>

        <div class="office-wrapper">

            <div class="office-column">
                <div class="office-header color-yellow">OFFICE A</div>
                <div class="team-list">
                    <div class="team-card">마케팅팀<br><span>Marketing team</span></div>
                    <div class="team-card">전략팀<br><span>Strategy team</span></div>
                    <div class="team-card">마케팅팀<br><span>Marketing team</span></div>
                </div>
            </div>

            <div class="office-column">
                <div class="office-header color-green">OFFICE B</div>
                <div class="team-list">
                    <div class="team-card">영업팀<br><span>Sales team</span></div>
                    <div class="team-card">구매팀<br><span>Purchasing team</span></div>
                    <div class="team-card">마케팅팀<br><span>Marketing team</span></div>
                </div>
            </div>

            <div class="office-column">
                <div class="office-header color-blue">OFFICE C</div>
                <div class="team-list">
                    <div class="team-card">인사팀<br><span>human resources</span></div>
                    <div class="team-card">마케팅팀<br><span>Marketing team</span></div>
                    <div class="team-card">마케팅팀<br><span>Marketing team</span></div>
                </div>
            </div>

        </div>
    </div>

<style>
        .org-container-style2 {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            padding: 40px 20px;
        }

        /* 노드 공통 스타일 */
        .org-container-style2 .node {
            display: inline-block;
            padding: 15px 40px;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            min-width: 180px;
            border-radius: 8px;
        }

        .org-container-style2 .top-boss {
            background-color: #2c3e50;
        }

        .org-container-style2 .top-boss.second {
            background-color: #546e7a;
            ;
        }

        /* 중앙 수직선 및 감사실 연결 */
        .org-container-style2 .mid-section {
            height: 100px;
            position: relative;
            display: flex;
            justify-content: center;
        }

        .org-container-style2 .vertical-line.main {
            width: 2px;
            background: #ced4da;
            height: 100%;
            position: relative;
        }

        .org-container-style2 .joint-point {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            background: #fff;
            border: 2px solid #546e7a;
            border-radius: 50%;
            z-index: 2;
            box-sizing: border-box;
        }

        .org-container-style2 .branch-line.side {
            position: absolute;
            top: 50%;
            left: 0;
            width: 80px;
            height: 2px;
            background: #ced4da;
        }

        .org-container-style2 .node.sub-boss.side {
            position: absolute;
            left: 80px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #576574;
        }

        /* 하단 부서 연결선 (가로다리) */
        .org-container-style2 .connector-area {
            position: relative;
            height: 10px;
            margin-top: 40px;
        }

        .org-container-style2 .connector-area:after {
            content: "";
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 40px;
            background: #ced4da;
        }

        .org-container-style2 .horizontal-bridge {
            position: absolute;
            top: 0;
            left: 12.5%;
            width: 75%;
            height: 2px;
            background: #ced4da;
        }

        /* 부서 레이아웃 */
        .org-container-style2 .dept-container {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding: 0 0px;
        }

        .org-container-style2 .dept-item {
            flex: 1;
            position: relative;
            padding-top: 30px;
        }

        /* 부서별 수직 연결선 및 포인트 */
        .org-container-style2 .dept-item::before {
            content: "";
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 40px;
            background: #ced4da;
        }

        .org-container-style2 .dept-item::after {
            content: "";
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            width: 10px;
            height: 10px;
            box-sizing: border-box;
            background: #fff;
            border: 2px solid #546e7a;
            border-radius: 50%;
        }

        /* 부서 카드 스타일 */
        .org-container-style2 .dept-node {
            background-color: #fff;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
        }

        .org-container-style2 .dept-header {
            padding: 18px 10px;
            font-weight: 800;
            font-size: 17px;
            color: #2c3e50;
            background: #f8f9fa;
            border-top: 4px solid #3498db;
        }

        .org-container-style2 .team-list {
            padding: 15px 20px;
            font-size: 15px;
            line-height: 1.8;
            color: #636e72;
            text-align: left;
        }

        .org-container-style2 .team-list p {
            margin: 0;
            position: relative;
            padding-left: 15px;
        }

        .org-container-style2 .team-list p::before {
            content: "•";
            position: absolute;
            left: 0;
            color: #3498db;
            font-weight: bold;
        }

        /* 모바일 반응형 (768px 이하) */
        @media (max-width: 768px) {

            /* 1. 전체 컨테이너 패딩 조절 */
            .org-container-style2 {
                padding: 20px 10px;
            }

            .org-container-style2 .hierarchy-top {
                text-align: left;
            }

            /* 2. 감사실(옆으로 삐져나온 노드) 처리 */
            .org-container-style2 .mid-section {
                display: block;
                padding-left: 20px;
            }


            /* 3. 이사(second) 노드 간격 조절 */
            .org-container-style2 .top-boss.second {
                margin-bottom: 20px;
            }

            /* 4. 부서 레이아웃 세로 정렬 */
            .org-container-style2 .dept-container {
                flex-direction: column;
                gap: 20px;
                padding-left: 0px;
                position: relative;
            }

            .org-container-style2 .dept-container:before {
                content: "";
                position: absolute;
                top: -20px;
                left: 20px;
                width: 2px;
                height: 100%;
                background: #ced4da;
            }

            /* 5. 부서 간 불필요한 모든 연결선 제거 */
            .org-container-style2 .connector-area {
                display: none;
                /* 가로다리 영역 전체 숨김 */
            }

            .org-container-style2 .dept-item {
                width: 100%;
                max-width: 350px;
                /* 모바일에서 너무 퍼지지 않게 제한 */
                padding-top: 0;
            }

            .org-container-style2 .dept-item::before,
            .org-container-style2 .dept-item::after {
                display: none !important;
                /* 부서 위 수직선과 점 제거 */
            }

            /* 6. 내부 텍스트 크기 미세 조정 */
            .org-container-style2 .node {
                font-size: 18px;
                padding: 12px 20px;
                min-width: 160px;
                text-align: center;
            }
        }
    </style>

    <div class="org-chart org-container-style2">
        <div class="hierarchy-top">
            <div class="node top-boss">대표이사</div>

            <div class="mid-section">
                <div class="vertical-line main">
                    <div class="joint-point"></div>
                    <div class="branch-line side"></div>
                    <div class="node sub-boss side">감사실</div>
                </div>
            </div>

            <div class="node top-boss second">이사</div>
        </div>

        <div class="connector-area">
            <div class="horizontal-bridge"></div>
        </div>

        <div class="dept-container">
            <div class="dept-item">
                <div class="dept-node">
                    <div class="dept-header">경영지원실</div>
                    <div class="team-list">
                        <p>인사/총무팀</p>
                        <p>재무/회계팀</p>
                    </div>
                </div>
            </div>

            <div class="dept-item">
                <div class="dept-node">
                    <div class="dept-header" style="border-top-color: #e67e22;">전시사업부</div>
                    <div class="team-list">
                        <p>전시기획팀</p>
                        <p>전시디자인팀</p>
                        <p>공무 설계팀</p>
                    </div>
                </div>
            </div>

            <div class="dept-item">
                <div class="dept-node">
                    <div class="dept-header" style="border-top-color: #27ae60;">시공사업부</div>
                    <div class="team-list">
                        <p>프로젝트 제작팀</p>
                        <p>유지보수/관리팀</p>
                    </div>
                </div>
            </div>

            <div class="dept-item">
                <div class="dept-node">
                    <div class="dept-header" style="border-top-color: #9b59b6;">R&D 연구소</div>
                    <div class="team-list">
                        <p>S/W 개발팀</p>
                        <p>H/W 개발팀</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

<style>
        /* 기본 설정 */
        .org-container-style3.org-wrap {
            max-width: 1200px;
            margin: 50px auto;
            font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
            text-align: center;
            color: #333;
        }

        /* 대표이사 원형 노드 */
        .org-container-style3 .org-top-section {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 60px;
        }

        .org-container-style3 .ceo-node {
            width: 160px;
            height: 160px;
            background: #000;
            color: #fff;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            line-height: 1.4;
            z-index: 2;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .org-container-style3 .ceo-node span {
            font-weight: normal;
            font-size: 16px;
        }

        /* 감사 노드 */
        .org-container-style3 .audit-node {
            position: absolute;
            left: calc(50% + 160px);
            /* 중앙(50%)에서 오른쪽으로 120px 지점 */
            top: 50%;
            transform: translateY(-50%);
            width: 120px;
            /* 크기를 살짝 줄여 더 깔끔하게 */
            padding: 10px;
            border: 1px solid #333;
            background: #fff;
            font-weight: bold;
            font-size: 15px;
            z-index: 1;
        }

        /* 감사 연결 점선 */
        .org-container-style3 .audit-node::before {
            content: "";
            position: absolute;
            left: -80px;
            top: 50%;
            width: 80px;
            border-top: 1px dashed #aaa;
        }

        /* 메인 가로 연결선 */
        .org-container-style3 .org-main-line {
            width: 80%;
            margin: 0 auto;
            border-top: 1px dashed #aaa;
            position: relative;
        }

        .org-container-style3 .org-main-line::before {
            /* 수직선 */
            content: "";
            position: absolute;
            top: -60px;
            left: 50%;
            width: 1px;
            height: 60px;
            border-left: 1px dashed #aaa;

        }

        /* 하단 본부 레이아웃 */
        .org-container-style3 .dept-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 40px;
            gap: 10px;
        }

        .org-container-style3 .dept-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: relative;
        }

        /* 본부 제목 (검정 박스) */
        .org-container-style3 .dept-head {
            background: #333;
            color: #fff;
            padding: 12px 5px;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        /* 팀 박스 (회색 박스) */
        .org-container-style3 .team-box {
            background: #eeeeee;
            padding: 10px 5px;
            font-size: 13px;
            color: #555;
        }

        /* 본부 상단 점선 포인트 */
        .org-container-style3 .dept-column::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #333;
            font-size: 10px;
            position: absolute;
            top: -45px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .org-container-style3 .dept-column::after {
            content: "";
            width: 1px;
            height: 40px;
            border-left: 1px dashed #aaa;
            font-size: 10px;
            position: absolute;
            top: -40px;
            left: 50%;
            z-index: 1;

        }

        /* 모바일 반응형 처리 */
        @media (max-width: 900px) {
            .org-container-style3 .dept-container {
                flex-direction: column;
                align-items: center;
            }

            .org-container-style3 .dept-column {
                width: 100%;
                max-width: 300px;
                margin-bottom: 30px;
            }

            .org-container-style3 .audit-node {
                left: calc(50% + 20px);
                top: calc(100% + 30px);
            }


            .org-container-style3 .org-main-line,
            .org-container-style3 .dept-column::before {
                display: none;
            }

            .org-container-style3 .dept-column:first-child::after {
                content: "";
                width: 1px;
                height: 60px;
                border-radius: 50%;
                border-left: 1px dashed #aaa;
                font-size: 10px;
                position: absolute;
                top: -60px;
                left: 50%;
                z-index: 1;

            }

            .org-container-style3 .audit-node::before {
                width: 20px;
                left: -20px;
                rotate: 45deg;
                top: -10px;
            }
        }
    </style>
    <div class="org-wrap org-container-style3">
        <div class="org-top-section">
            <div class="ceo-node">
                선사인 디자인<br><span>대표이사</span>
            </div>

            <div class="audit-node">
                감사
            </div>
        </div>

        <div class="org-main-line"></div>

        <div class="dept-container">
            <div class="dept-column">
                <div class="dept-head">경영전략본부</div>
                <div class="team-box">전략기획관리부</div>
                <div class="team-box">사업지원부</div>
            </div>

            <div class="dept-column">
                <div class="dept-head">IB본부</div>
                <div class="team-box">종합금융관리부</div>
            </div>

            <div class="dept-column">
                <div class="dept-head">투자전략본부</div>
                <div class="team-box">전문가팀</div>
                <div class="team-box">연구원팀</div>
                <div class="team-box">리스크관리팀</div>
            </div>

            <div class="dept-column">
                <div class="dept-head">커뮤니티 관리본부</div>
                <div class="team-box">마케팅팀</div>
                <div class="team-box">크리에이티브팀</div>
            </div>

            <div class="dept-column">
                <div class="dept-head">VIP 솔루션본부</div>
                <div class="team-box">CS팀</div>
            </div>
        </div>
    </div>

샘플 바로보기

도어웹이 직접 제작합니다

글에서 다룬 내용, 실제 사이트로 만들어 드립니다

워드프레스 2026

Beauty House One

호치민 푸미흥 한국인 두피문신·눈썹문신 스튜디오 Beauty House One의 두피문신 홈페이지 제작 사례입니다. 구글 광고 랜딩과 지역 검색을 함께 노리는 구조로, 한국어·영어·번체중국어 3개 언어를 워드프레스로 구축했습니다.

워드프레스 2026

법률사무소 윤민

이혼·가사 전문 법률사무소 윤민의 법률사무소 홈페이지 제작 사례입니다. 조정민 대표변호사의 업무분야 20개와 자주 묻는 질문을 각각 검색 진입점으로 설계하고, 변호사 광고 규정과 운영 안정성까지 고려해 워드프레스로 구축했습니다.

워드프레스 2026

원이비인후과

1. 톤 & 컬러 2. 타이포그래피 3. 레이아웃 & UX — 질환정보 축적형 구조 이 사이트의 핵심은 메인이 아니라 질환 페이지가 시간이 지날수록 두꺼워지는 구조: 4. 전환 설계 (전화 문의형) 예약 시스템 없이 전화 한 통이 목표인 병원이라, 어디서든 전화까지의 거리를 줄이는 쪽으로 설계: 5. 신뢰·운영 안정성

도어웹 홈페이지 테마

업종에 맞는 테마로 바로 시작하세요 — 설치까지 대신해 드립니다

금융·기업 NEXFIN

도어웹 기업형1

예금 · 대출 · 투자 · 자산관리 금융 · 기업형 워드프레스 테마. 신뢰감 있는 블루 톤의 금융 · 기업 홈페이지 디자인입니다. 금융상품 · 금리 안내 · 공지사항부터 회사소개 · 연혁 · 조직도, 자주 묻는 질문 · 상담 신청까지 필요한 화면을 모두 갖췄습니다.

설치 대행 275,000원~ 샘플 사이트 ↗ 자세히

인테리어·건축 INTERIOR

도어웹 인테리어

인테리어 · 리모델링 회사 홈페이지 워드프레스 테마. 미색 바탕과 브론즈 포인트로 시공 사진이 돋보이는 에디토리얼 디자인입니다. 시공 사례(분류 · 평형 · 스타일 거르기, 공사 전후 비교), 서비스, 진행 과정 · 비용 안내부터 사진을 첨부하는 4단계 상담 폼까지 인테리어 회사 홈페이지에 필요한 화면을 갖췄습니다.

설치 대행 275,000원~ 샘플 사이트 ↗ 자세히

법률·법무 LAW

도어웹 법무법인

법무법인 · 법률사무소 홈페이지 워드프레스 테마. 남색과 금색 포인트로 만든 법률 전용 디자인입니다. 업무분야, 구성원(변호사별 상세), 해결사례, 법률칼럼부터 상담 신청 폼까지 법무법인 홈페이지에 필요한 화면을 갖췄습니다.

설치 대행 275,000원~ 샘플 사이트 ↗ 자세히

블로그 전체 보기