[CSS] CSS 반응형 이해하기

 

웹 반응형 사이트를 만들기 위해 우선 HTML,CSS,Javascript의 기본적 개념을 이해하고, 이를 활용해서 반응형 사이트를 구현하는 방법에 대해 설명해 보겠습니다.

 

1.반응형 웹 디자인이란

반응형 웹 디자인(Responsive Web Design, RWD)은 사용하는 플랫폼 별로 다양한 화면 크기와 해상도에서 웹사이트 이용자에 최적의 경혐을 제공하도록 설계하는 방식으로, 이를 통해서 데스크톰,태블릿, 스마트폰 등 다양한 웹 사이트가 자동으로 조정되어 보이도록 구성합니다.

 

 

반응형 웹 디자인은 여러분들이 사용하는 컴퓨터 데스크톱에 크롬 웹 브라우저에서 직접 어떤 방식으로 반응형 디자인이 구성되는지 쉽게 알 수 있습니다. 이로써 개발자들은 반응형 웹 디자인 더욱 섬세하고 센스있게 구성할 수 있습니다.

---

2. 반응형 웹 디자인 간단하게 알아보기

반응형 웹 디자인을 알아보기 위해 웹 페이지에서 메뉴 버튼, 애니메이션 네비게이터, 푸터, 그리고 화면별 반응형 레이아웃을 구성하는 방법을 알아보겠습니다.

 

기본적 HTML 코드

    <header>
      <div class="container"></div>
    </header>

 

우선 웹페이지를 구성하기위해 맨 위 상단 부분은 header 태그를 감싸고 그안에 클래스로 컨테이너를 선언한 div를 구성하는 방식이 좋습니다. 이렇게 맨 위쪽 네비게이션 기능을 구현해주며 스크롤을 내릴때도 그 헤더가 따라오는 기능을 구현할 수 있습니다.

<nav id="navbar" class="navbar">
   <ul>
     <li><a href=""></a></li>
     <li><a href=""></a></li>
     <li><a href=""></a></li>
     <li><a href=""></a></li>
   </ul>
</nav>

 

그 다음 헤더 밑에 메뉴를 구성하는 nav태그를 만들어 그안에 ul 태그로 메뉴 리스트를 구성할 li 태그를 만들어줍니다. 메뉴의 숫자를 또는 어떠한 기능을 추가하느냐에 따라 반흥형 디자인을 더욱 섬세하게 구현이 필요합니다.

<main>
     <section><h1>home</h1></section>
     <section><h1>연락처</h1></section>
     <section><h1>서비스 내역</h1></section>
     <section><h1>주문 하기</h1></section>
</main>

 

네비게이션 밑에 main 태그에는 여러 개의 색션으로 구성되고 그 섹션별 다른 콘텐츠들도 포함시킬 수 있습니다. 섹션은 웹 페이지의 슬라이드나 동영상 트레일러를 넣거나 상품 리스트 가격 등을 넣어줄 수 있습니다. main 코드 밖에도 div 태그로 감싸 클래스를 container 클래스로 지정하고 스타일링하는 방식도 좋습니다.

<footer>
      <p>&copy: thinky Blog</p>
</footer>

 

footer는 사이트의 가장 하단 부분을 구현하는 태그로 사이트에서 스크롤을 끝까지 내린 후에 보이는 곳을 구현합니다. 이제 우리는 이렇게 만든 사이트를 스타일링 해볼 것입니다. index.css 파일을 생성해 가장 기본적인 것 부터 배워보겠습니다.

* { 
    box-sizing: border-box
 	margin: 0;
  	padding: 0;
 }

 

우선 html에 전체적인  부분을 설정하는 css 코드로 웹 페이지의 박스의 크기를 화면에 표현하는 방식을 변경하는 box-sizing코드를 입력해줍니다. 이 코드는 웹 페이지내 박스를 어떠한 방식 기준으로 계산할 건지 정하는 코드입니다.

 

box-sizing을 선언하고 margin과 padding 즉 여백  margin으로 웹 페이지 바깥쪽 여백을 0으로 선언해 콘텐츠가 웹 페이지 밖으로 나가지 않도록 잡아줍니다. 이것을 통해 화면을 줄여도 콘텐츠가 받으로 삐져나오지 않습니다.

body {
  font-family: Arial, Helvetica, sans-serif;
}

main {
  flex: 1;
  padding: 20px;
}

 

그 다음은 body 태그안 콘텐츠를 어떤 폰트를 쓸지 정하는 코드로 개발자들이 실무로 들어갈때 웹 페이지를 구성할 폰트를 정하는 곳입니다. body 태그안에 모든 콘텐츠 태그들이 들어가므로 이곳에서 폰트를 정해주는 것이 좋습니다.

 

요소 전체를 담당하는 main 태그에는 flex 1을 선언해 메인 콘텐츠에 적용할 최대 공간을 차지하게해서 footer 부분이 아래로 내려가도록 구현해줍니다..

.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

 

우선 메뉴 버튼을 구성할 컨테이너를 css로 간단하게 스타일을 설정해줍니다. 

.navbar {
  display: none; /* 기본적으로 숨기기 */
  position: absolute;
  background-color: #4caf50;
  width: 100%;
  top: 50px;
  left: 0;
}

 

네비게이션 부분은 메뉴 버튼을 클릭시 나오게 하기위해 position을 absolute로 설정해 완전히 화면에 없는 상태로 우선 만들어 줍니다.

.navbar ul {
  list-style: none;
}

.navbar li {
  padding: 10px;
}

.navbar a {
  color: white;
}

.navbar.show {
  display: block; /* 메뉴 클릭시 */
  animation: slideDown 0.3 ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  padding: 20px;
}

section {
  margin: 50px 0;
}

footer {
  text-align: center;
  padding: 10px;
  background-color: #f1f1f1;
}

 

그후 메뉴의 ul 리스트 링크 등 여러가지 태그들의 스타일을 지정해줍니다. 

 

메뉴버튼을 클릭하면 초록색 배경의 메뉴들이 뜨는 것을 볼 수 있습니다. 이제 반응형을 알아보겠습니다. 600px 까지줄였을때 메뉴에 리스트들을 중앙으로 배치하고 싶다면 다음과 같은 코드를 입력해줍니다.

@media (max-width: 600px) {
  header {
    text-align: center;
  }
}

 

@media에 max-width는 화면을 줄였을대 최대 사이즈고 600px까지 도달한다면 스타일이 적용됩니다. 반대로 min-width는 600px이상에서만 적용됩니다. 이렇게 반응형을 요소마다 어느정도로 스타일링할지 세밀하게 구성할 수 있습니다.

---

 

GitHub - CSS-STR/css-media-query