0802

1)학습한 내용

*html 2페이지 작성

<!-- section2 -->
    <section id="yunhyuk">
        <div class="yh_text">
            <h1>연혁</h1><br>
            <h2>HISTORY</h2>
        </div>
        
        <div class="yh">

            <div class="timeline">
                <div class="outer">

                    <div class="card">
                        <div class="info">
                            <h3 class="title">1</h3>
                            <h4 class="title2">2022</h4>
                          <p></p>
                        </div>
                      </div>

                      <div class="jul">
                  <div class="card">
                    <div class="info">
                        <h3 class="title">12</h3>
                        <h4 class="title3">2021</h4>
                      <p>대구여성인력개발센터 MOU 협약 (여성IT인재 현장실습)<br><br><br>
                         대구가톨릭대학교 계약학과 MOU 협약 (ICTAI융합학과)<br><br><br>
                        기업부설연구소(연구개발전담부서) 등록</p>
                    </div>
                  </div>
                

                  <div class="card">
                    <div class="info">
                        <h3 class="title">11</h3>
                      <p>제 38류, 제 45류 상표등록 출원 (Mmate : 제 40-1799224호, 제 40-1799225호)</p>
                    </div>
                  </div>

                  <div class="card">
                    <div class="info">
                        <h3 class="title">10</h3>
                      <p>서울특별시 송파구청 앱 개발 (제8회 한성백제마라톤 비대면 대회)<br><br><br>
                        대구광역시체육회 앱 개발 (2021 대구 마스크쓰햬 컬러풀 핫플 걷기)<br><br><br>
                        대구광역시 달서구체육회 앱 개발 (제15회 언택트 달서 하프마라톤 대회) </p>
                    </div>
                  </div>

                  <div class="card">
                    <div class="info">
                        <h3 class="title">9</h3>
                      <p>대구 경북지방중소벤처기업청 여성기업 등록</p>
                    </div>
                  </div>

                  <div class="card">
                    <div class="info">
                        <h3 class="title">8</h3>
                      <p>구미대학교 MOU 협약 (현장실습학기제)</p>
                    </div>
                </div>
                
                </div>
                </div>
                <div class="card1">
                    <div class="info1">
                        <h3 class="title4">5</h3>
                      <p>(주)리소프트 회사 설립</p>
                    </div>
                  </div>
              </div>
            </div>
        
    </section>

*css

/* section2 */
#yunhyuk{
    width: 100%;
    height: 1314px;
    position: relative;
    background-color: #F9F9F9;
}

.yh_text{
    position: absolute;
    left: 13%;
    top: 10%;
}
.yh_text h1{
    font-size: 40px;
}
.yh_text h2{
    font-size: 18px;
    color: #C8C8C8;
}


.yh{
    display: flex;
  justify-content: center;
}

.timeline {
    position: absolute;
    background: var(--primary-color);
    margin: 20px auto;
    padding: 20px;
    top: 20%;
    left: 50%;
    width: 25%;
}
.outer {
    border-left: 6px solid #C8C8C8;
}
.card {
    position: relative;
    margin: 0 0 20px 20px;
    color: #1E1E1E;
    font-weight:bold;
}
.jul{
    position: relative;
    border-top: 1px solid #C8C8C8;
    padding-top: 40px;
    width: 230%;
    padding-left: 90%;
    left: -90%;

}
.info >p{   
    padding: 20px 0 55px 0;
}
.title {
    color: #184B9F;
    position: absolute;
    left: -110px;
    font-size: 32px;
    top: -12px;
}
.title::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #184B9F;
    border-radius: 999px;
    left:79px;
    top: 11px;
    border: 3px solid #184B9F;
}
.title2{
    position: absolute;
    font-size: 50px;
    color: #000000;
    left: -100%;
    top: -5%;
}
.title3{
    position: absolute;
    font-size: 50px;
    color: #000000;
    left: -70.5%;
    top: -5%;
}
.card1 {
    position: relative;
    margin: 0 0 20px 20px;
    color: #1E1E1E;
    font-weight:bold;
}
.title4 {
    color: #184B9F;
    position: absolute;
    left: -104px;
    font-size: 32px;
    top: -24px;
}
.title4::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #184B9F;
    border-radius: 999px;
    left:79px;
    top: 4px;
    border: 3px solid #184B9F;
}

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

X

3)해결방법

X

4)학습소감

혼자서 하기 힘들었지만 인터넷에 있는 타임라인이라는 예제를 보면서 작업을 해결해나갔다