외부형 CSS

[땡초도사]

사실 CSS는 개념을 잘 이해하고 있으면 그다지 어려운 분야가 아닙니다...

하지만 프론트앤드에서 CSS는 참으로 머리아픈 부분이죠...

간단하게 짠다면 몰라도  레이어가 늘어나게 되면 레이어 지옥에 빠지게 됩니다....

CSS는 HTML내부에 집어 넣는 내장형 CSS가 있고...

외부파일을 불러오는 외부형 CSS가 존재 합니다...또한 원격접속형 CSS도 존재하죠

웹을 공부하다 보면 꼭 거기에 극한된것만 깨닫게 되는것이 아닙니다....

서버를 또 알아야 됩니다..

서버란 단순히 Apache웹서버만을 설치하여 서비스하는것이 아닙니다...

APM+DNS를 구축하여 돌려야 되는데..

부수적으로 알아야 할 점들이 한두가지가 아닙니다...

DNS만 하더라도 Bind를 생각하는데....

DNS는 권한DNS와 외부DNS와 재귀적DNS가 존재 합니다....

CSS파일을 공개 합니다...

반응형 웹을 꾸미기 위해서는 필수 적입니다...

반응형 웹은 원래 뷰포터, 가변그리드, 미디어 쿼리 등의 3박자가

완벽하게 떨어졌을때 완벽한 반응형 웹이라고도 합니다...

* body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }

 img {
      max-width: 100%;
      height: auto;
      display: block;
    }
 header {
    max-width:1000px;
    height:150px;
    align-items:center;
    margin:0 auto;
    display:flex;
}
 header .logo {
    display: flex;
}
 header .logo img {
    width:90px;
    height:90px;
}
 header .gnb {
    width:98%;
    margin:auto 50px;
}
 header .sign-in {
    width:250px;
    margin:auto 0;
}
 contents h1 {
    font-size:3.5rem;
    line-height:140%;
}
 section1 {
    max-width:100%;
    background:#817e00 url('../images/main_bg.png') repeat;
    padding:100px 0;
}
 section1 .wrapper {
    max-width:1000px;
    margin:0 auto;
    display:flex;
}
 section1 .wrapper .title {
    width:50%;
    color:#fff;
    padding-right:40px;
    word-break: keep-all;
}
 section1 .wrapper .title .sub {
    font-size:1.5rem;
}
 section1 .wrapper .desc {
    width:50%;
}
 section1 .wrapper .desc img {
    max-width:100%;
}
 section2 {
    max-width:100%;
    padding:150px 0;
    text-align: center;
}

@media all and (max-width:767px) {
    header {
        display:block;
    }
    header .gnb {
        margin-top: 6px;
        margin-left: 10px;
    }
    header .sign-in {
        margin-left: 10px;
    }
    contents h1 {
        font-size:2.4rem;
        margin-left: 20px;
    }
    section1 {
        padding:20px 0;
    }
    section1 .wrapper {
        display:block;
    }
    section1 .wrapper .title {
        width:100%;
        padding-right:0;
    }
    section1 .wrapper .title .sub {
        margin-left: 20px;
    }
    section1 .wrapper .desc {
        margin-top: 60px;
        width:100%;
    }
    section2 {
        padding:50px 0;
    }
    h2 {
        margin: 0 30px;
    }
}