0810

1)학습한 내용

*css 모바일 버전 미디어쿼리 작성

@media screen and (max-width: 685px){
    .zozic h1{
        padding: 25px;
        font-size: 20px;
        left: -2%;
    }
    .zo_tx{
        min-width: 120px;
        width: 30%;
    }
    .zo_tx2 {
        width: 76%;
        left: 6%;
        min-width: 314px;
    }
    .zozic h2{
        font-size: 20px;
        padding: 21px;
    }
    .zozic h3{
        font-size: 20px;
    }
    .zo_tx::before{
        height: 50px;
    }
    .zo_tx2::before{
        top: 9px;
    }
    .zo_tx2 > li::before{
        height: 50px;
        bottom: 79%;
    }
    .zo_tx3 {
        margin: 0px auto 25px;
        top: 21%
    }
}
@media screen and (max-width: 610px){
    /* 연혁 */
    #yunhyuk {
        height: 1600px;
    }
    .timeline{
        top:13%;
        left: 48%;
        width: 26%;
        min-width: 135px;
    }
    .jul{
        padding-top: 77px;
    }
    .title{
        font-size: 20px;
        top: 0px;
    }
    .title::after{
        top: -4px;
    }
    .title2{
        font-size: 28px;
        left: -318%;
    }
    .title3{
        font-size: 28px;
    }
    .info >p{
        font-size: 15px;
    }
    .title4{
        font-size: 20px;
    }
    .info1 >p{
        font-size: 15px;
    }

    /* 조직도 */
    .zozic h1{
        padding: 25px;
        font-size: 13px;
        left: -2%;
    }
    .zo_tx{
        min-width: 140px;
    }
    .zo_tx2 {
        width: 50%;
        left: 4%;
        min-width: 314px;
    }
    .zozic h2{
        font-size: 13px;
        padding: 21px;
    }
    .zozic h3{
        font-size: 13px;
    }
    .zo_tx::before{
        height: 50px;
    }
    .zo_tx2::before{
        top: 9px;
    }
    .zo_tx2 > li::before{
        height: 50px;
        bottom: 75%;
    }
    .zo_tx3 {
        margin: 0px auto 25px;
        top: 25%;
    }
}
@media screen and (max-width: 532px){
    #wrap_text{    
        right: 0%;
        }
}
@media screen and (max-width: 516px){
    .pat_img1{
        left: 4%;
    }
    .pat_img2{
        left: 51%;
    }
    .pat_img3{
        left: 4%;
    }
    .pat_img4{
        left: 51%;
    }
    .pat_img5{
        left: 4%;
    }
    .pat_img6{
        left: 51%;
    }
    .pat_img7{
        left: 4%;
    }
    .pat_img8{
        left: 51%;
    }
    .pat_img9{
        left: 4%;
    }

}
@media screen and (max-width: 482px){
    #resoft{
        height: 1000px;
    }
}

@media screen and (max-width: 430px){
    /* HEADER */
    header #wrapper nav > ul ul {
        padding-top: 0;
    }
    header #wrapper nav > ul ul>.wrap_tx2 a {
        font-size: 20px;
    }
    #wrapper > nav + div {
        height: 190px;
        top: 78px;
    }
    header #wrapper nav > ul ul a{
        font-size: 12px;
    }
    header #wrapper nav > ul > li > a{
        font-size: 15px;
        width: 80px;
    }
    .display h1{
        font-size: 30px;
        left: 36%;
    }
    header #wrapper nav > ul ul>.wrap_tx2::after{
        bottom: 84%;
    }
    #wrap_text {
        right: 10%;
    }

    /* section1 */
    #resoft{
        height: 700px;
    }
    .re_text h1{
        font-size: 20px;
    }
    .re_text h2{
        font-size: 9px;
    }
    .re_tx h1, .re_tx2 h1, .re_tx3 h1, .re_tx4 h1, .re_tx5 h1, .re_tx6 h1, .re_tx7 h1{
        font-size: 14px;
        width: 114px;
    }
    .re_text2 h2{
        font-size: 10px;
    }
    .re_text2{
        top: 24%;
    }

    /* section2 */
    #yunhyuk {
        height: 1200px;
    }
    .yh_text{
        top: 4%;
    }
    .yh_text h1{
        font-size: 20px;
    }
    .yh_text h2{
        font-size: 9px;
    }
    .timeline{
        top: 9%;
        left: 48%;
        width: 32%;
        min-width: 120px;
    }
    .jul{
        padding-top: 77px;
    }
    .title{
        font-size: 16px;
        top: 0px;
    }
    .title::after{
        top: -4px;
    }
    .title2{
        font-size: 25px;
        left: -325%;
    }
    .title3{
        font-size: 25px;
    }
    .info >p{
        font-size: 11px;
    }
    .title4{
        font-size: 16px;
    }
    .info1 >p{
        font-size: 11px;
    }

    /* section3 */
    #section3 {
        height: 1100px;
    }
    .zo_text {
        top: 4%;
    }
    .zo_text h1 {
        font-size: 20px;
    }
    .zo_text h2 {
        font-size: 9px;
    }
    .zozic {
        top: 10%;
    }
    .zozic h1{
        padding: 25px;
        font-size: 13px;
        left: -2%;
    }
    .zo_tx{
        min-width: 140px;
    }
    .zo_tx2 {
        width: 76%;
        left: 6%;
        min-width: 314px;
    }
    .zozic h2{
        font-size: 13px;
        padding: 21px;
    }
    .zozic h3{
        font-size: 13px;
    }
    .zo_tx::before{
        height: 50px;
    }
    .zo_tx2::before{
        top: 9px;
    }
    .zo_tx2 > li::before{
        height: 50px;
        bottom: 75%;
    }
    .zo_tx3 {
        margin: 0px auto 25px;
        top: 25%;
    }
    /* section4 */
    #section4 {
        height: 1863px;
    }
    .pat_text{
        top: 4%;
    }
    .pat_text h1 {
        font-size: 20px;
    }
    .pat_text h2 {
        font-size: 9px;
    }
    .pat_img{
        top: 9%;
    }
    .pat_img1{
        max-width: 150px;
        max-height: 220px;
        left: 5%;
    }
    .pat_img2{
        max-width: 150px;
        max-height: 220px;
    }
    .pat_img2 img{
        width: 275px;
        margin-left: -41%;
        margin-top: -30px;
    }
    .pat_img3{
        max-width: 150px;
        max-height: 220px;
        top: 29%;
        left: 5%;
    }
    .pat_img4{
        max-width: 150px;
        max-height: 220px;
        top: 29%
    }
    .pat_img5{
        max-width: 150px;
        max-height: 220px;
        top: 59%;
        left: 5%;
    }
    .pat_img6{
        max-width: 150px;
        max-height: 220px;
        top: 59%;
    }
    .pat_img7{
        max-width: 150px;
        max-height: 220px;
        top: 90%;
        left: 5%;
    }
    .pat_img8{
        max-width: 150px;
        max-height: 220px;
        top: 90%;
    }
    .pat_img9{
        max-width: 150px;
        max-height: 220px;
        top: 119%;
        left: 5%;
    }


    /* section5 */
    #section5 {
        height: 800px;
    }
    .map_text{
        top: 4%;
    }
    .map_text h1 {
        font-size: 20px;
    }
    .map_text h2 {
        font-size: 9px;
    }
    .map_tx h3{
        font-size: 12px;
    }
    .map_tx h4{
        font-size: 10px;
    }
    .map_tx2 h3{
        font-size: 12px;
        margin: 20px 4% 40px 4%;
    }
    .map_tx2 h4{
        font-size: 10px;
        margin: 20px 0px 40px 10px;
    }

    /* footer */
    .fot_img {
        top: 9%;
        left: 8%;
    }
    .fot_text1 {
        left: 7%;
        font-size: 11px;
    }
    .fot_text2 h1 {
        top: 41%;
        left: 7%;
        font-size: 11px;

    }
    .fot_text2 h2 {
        top: 70%;
        left: 7%;
        font-size: 11px;
    }
}

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

X

3)해결방법

X

4)학습소감

폰트나 이미지등 보기 편하게 크기를 줄이는 작업을하고 각 위치들도 보기편하게 옮기는 작업을 했는데 작업을 하면할수록 익숙해지는거 같다.