반응형 웹 알고 보면 아주 쉽습니다...CSS 관련...

[김종록]

다 외우려 하지 말고 이 소스를 USB에 저장해 놨다가 쓸일이 있으면 그때그때 붙여넣기 하여 쓰면 되는 것입니다...

물론 다 이해하고 외우는 수준이면 더욱 좋기는 하지만 그게 오히려 더 무식한 방법일수도 있습니다...

이걸 HTML에서 외부파일로 불러오기를 하면 되는 것입니다....href 로 불러 오는 태그를 이용하면 됩니다...

--------------------------------------------------------------------------------------------------------------------------------------------------

body {
    margin:0;
}
.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;
    }
}

-------------------------------------------------------------------------------------------------------------------------------------------

다른 소스 입니다...

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

header {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 1em;
}
img {
  width: 100%;
  height: auto;
  display: block;
}

.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px;
}

.box {
  flex: 1;
  background-color: #eee;
  padding: 20px;
  border-radius: 8px;
}

/* 반응형 처리 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}