0803

1)학습한 내용

*html작성

<!-- section3 -->
    <section id="section3">
        <div class="zo_text">
            <h1>조직도</h1><br>
            <h2>ORGANIZATION</h2>
        </div>

        <div class="zozic">
            <h1 class="zo_tx rectangle">대표이사</h1>
                <ol class="zo_tx2">
                    <li>
                        <h2 class="zo_tx3 rectangle">전략기획부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• 유저 Needs 분석 </h3><br><h3 class="zo_tx5">• 고객 수요 확인</h3><br><h3 class="zo_tx5"> • BM 설계/기획</h3> <br><h3 class="zo_tx5">• 사업화 전략 수립</h3> <br><h3 class="zo_tx5">• 사업계획서 작성</h3>
                            </li>
                        </ol>
                    </li>

                    <li>
                        <h2 class="zo_tx3 rectangle">개발부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• DB 분석/설계</h3><br><h3 class="zo_tx5"> • Cloud 서버 관리</h3> <br><h3 class="zo_tx5">• 기능 정의</h3> <br><h3 class="zo_tx5">• 기능 구현</h3><br> <h3 class="zo_tx5">• 기능 테스트</h3>
                            </li>
                        </ol>
                    </li>
                    
                    <li>
                        <h2 class="zo_tx3 rectangle">디자인부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• 디자인 트랜드 분석</h3><br><h3 class="zo_tx5"> • 브랜드 디자인</h3><br> <h3 class="zo_tx5">• 웹사이트 디자인</h3><br><h3 class="zo_tx5"> • 모바일 앱 디자인</h3><br><h3 class="zo_tx5"> • 상품개발 디자인</h3>
                            </li>
                        </ol>
                    </li>

                    <li>
                        <h2 class="zo_tx3 rectangle">마케팅부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• 서비스 시장조사</h3><br><h3 class="zo_tx5">• 시장동향 분석</h3><br> <h3 class="zo_tx5">• 시장성 검증</h3><br> <h3 class="zo_tx5">• 온라인 채널 운영</h3><br><h3 class="zo_tx5"> • 오프라인 광고</h3>
                            </li>
                        </ol>
                    </li>

                    <li>
                        <h2 class="zo_tx3 rectangle">경영지원부</h2>
                        <ol class="zo_tx4">
                            <li>    
                                <h3 class="zo_tx5">• 경영 무 지원</h3><br> <h3 class="zo_tx5">• 업무 환경 지원</h3><br><h3 class="zo_tx5"> • 세무 업무 지원</h3>
                            </li>
                        </ol>
                    </li>
                </ol>
        </div>

    </section>

*css작성

/* section3 */
#section3{
    position: relative;
    width: 100%;
    height: 906px;
}

.zo_text{
    position: absolute;
    left: 13%;
    top: 10%;
}

.zo_text h1{
    font-size: 40px;
}
.zo_text h2{
    font-size: 18px;
    color: #C8C8C8;
}



.zozic {
    top: 24%;
    max-width: 80%;
    padding: 0 10px;
    margin: 0 auto;
    position: relative;
  }
.zozic h1{
    color: #FFFFFF;
    font-size: 26px;
    padding: 30px;
}
.zozic h2{
    font-size: 26px;
    padding: 30px;
}
.zozic h3{
    font-size: 26px;
}


.rectangle {
    position: relative;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  }

.zo_tx {
    text-align: center;
    width: 15%;
    margin: 0 auto 40px;
    background: #184B9F;
    border-radius: 20px;
}
.zo_tx::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 49.7%;
    transform: translateX(-50%);
    width: 2px;
    height: 70px;
    background: #9E9E9E;
  }

.zo_tx2 {
    position: relative;
    display: flex;
}
.zo_tx2::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 9.4%;
    width: 80.5%;
    height: 2px;
    background: #9E9E9E;
}
.zo_tx2::after {
    display: none;
    content: "";
    position: absolute;
    left: -20px;
    bottom: -20px;
    width: calc(100% + 20px);
    height: 2px;
    background: #9E9E9E;
}
.zo_tx2 li {
    position: relative;
}
.zo_tx2 > li::before {
    content: "";
    position: absolute;
    bottom: 72%;
    left: 45.2%;
    transform: translateX(-50%);
    width: 2px;
    height: 70px;
    background: #9E9E9E;
}
.zo_tx3 {
    text-align: center;
    width: 102%;
    top: 28%;
    left: -5%;
    margin: 0 auto 70px;
    border-radius: 20px;
    border: 3px solid #184B9F;
}
.zo_tx4 {
    position: relative;
    top: 25%;
    margin: 0 auto;
  }

 
.zo_tx5{
    text-align: left;
}

2)학습내용 중 어려웠던점

x

3)해결방법

X

4)학습소감

인테넷에 올라와있는 예제를보며 고쳐야할부분들을 고치면서 코드짜는 법을 이해하였다.