27강 : 반응형 웹

티스토리 뷰

Web/HTML & CSS

27강 : 반응형 웹

개발을해보자 2020. 3. 4. 02:39

27-1. 반응형 웹

웹사이트를 방문하는 사용자마다 모니터의 해상도가 다르기 때문에 이를 고려해주어야 한다. 또한, 스마트폰이나 태블릿 등 모바일 기기는 모니터에 비해 화면이 작기 때문에 더욱 신경을 써야 한다. 이것을 해결해주기 위해 반응형 웹을 사용한다.

@media ( max-width: 800px ) {

div { background-color: black; }

}

이런 식으로 @media를 사용하여 화면 크기 별 CSS 속성을 지정해준다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      @media screen and (max-width:800px) {
        wrap { width: 100%; }
        #content_wrap #content p { font-size: 3em; font-weight: bold; }
      }
      @media screen and (min-width:801px) and (max-width:1000px) {
        wrap { width: 100%; }
        #content_wrap #content p { font-size: 1.5em; font-weight: bold; }
      }
      @media screen and (min-width:1001px) {
        wrap { width: 80%; }
        #content_wrap #content p { font-size: 1em; font-weight: bold; }
      }

      * { margin:0; padding: 0; }
      li { list-style: none; }

      #wrap { margin: 0 auto; }

      #header { border: 1px solid #cccccc; height: 100px; }
      #header h1 { text-align: center; }

      #nav { border: 1px solid #cccccc; }
      #nav ul {
        overflow: hidden;}
      #nav ul li { float: left; width: 20%; height: 50px; line-height: 50px;
                    text-align: center; border: 1px solid #cccccc; box-sizing: border-box; }

      #content_wrap { border: 1px solid #cccccc; }
      #content_wrap #content { padding: 10px; }
      #content_wrap #content h2 { border-bottom: 1px solid #cccccc; margin-bottom: 10px; }

      #footer { height: 100px; line-height: 100px; text-align: center; border: 1px solid #cccccc; font-size: 2em; font-weight: bold; }
    </style>
</head>
<body>
  <div id="wrap">
    <div id="header">
      <h1>HEADER</h1>
    </div>

    <div id="nav">
      <ul>
        <li>팬다 주니어</li>
        <li>스카피</li>
        <li>케로 & 베로니</li>
        <li>죠르디</li>
        <li>앙몬드</li>
      </ul>
    </div>

    <div id="content_wrap">
      <div id="content">
         <h2>안녕 니니즈</h2>
                <p>
                    니니즈(영어: NINIZ)는 17년 11월 14일, 카카오 (기업)가 카카오프렌즈 이후 5년 만에 정식 출시한 캐릭터 시리즈다. 카카오톡 이모티콘을 기반으로 했으며, 캐치프레이즈는 '귀여움의 버라이어티, 니니즈'이다. 디자이너 호조(HOZO)가 대부분을 디자인한 카카오프렌즈와는 달리 카카오 내부에서 자체적으로 개발한 캐릭터들로 구성된다.
                  니니즈(영어: NINIZ)는 17년 11월 14일, 카카오 (기업)가 카카오프렌즈 이후 5년 만에 정식 출시한 캐릭터 시리즈다. 카카오톡 이모티콘을 기반으로 했으며, 캐치프레이즈는 '귀여움의 버라이어티, 니니즈'이다. 디자이너 호조(HOZO)가 대부분을 디자인한 카카오프렌즈와는 달리 카카오 내부에서 자체적으로 개발한 캐릭터들로 구성된다.
                  니니즈(영어: NINIZ)는 17년 11월 14일, 카카오 (기업)가 카카오프렌즈 이후 5년 만에 정식 출시한 캐릭터 시리즈다. 카카오톡 이모티콘을 기반으로 했으며, 캐치프레이즈는 '귀여움의 버라이어티, 니니즈'이다. 디자이너 호조(HOZO)가 대부분을 디자인한 카카오프렌즈와는 달리 카카오 내부에서 자체적으로 개발한 캐릭터들로 구성된다.
                  니니즈(영어: NINIZ)는 17년 11월 14일, 카카오 (기업)가 카카오프렌즈 이후 5년 만에 정식 출시한 캐릭터 시리즈다. 카카오톡 이모티콘을 기반으로 했으며, 캐치프레이즈는 '귀여움의 버라이어티, 니니즈'이다. 디자이너 호조(HOZO)가 대부분을 디자인한 카카오프렌즈와는 달리 카카오 내부에서 자체적으로 개발한 캐릭터들로 구성된다.
                  니니즈(영어: NINIZ)는 17년 11월 14일, 카카오 (기업)가 카카오프렌즈 이후 5년 만에 정식 출시한 캐릭터 시리즈다. 카카오톡 이모티콘을 기반으로 했으며, 캐치프레이즈는 '귀여움의 버라이어티, 니니즈'이다. 디자이너 호조(HOZO)가 대부분을 디자인한 카카오프렌즈와는 달리 카카오 내부에서 자체적으로 개발한 캐릭터들로 구성된다.
                </p>
      </div>
    </div>

    <div id="footer">
      FOOTER
    </div>
  </div>
</body>
</html>

style 태그 가장 위를 보면 @media 규칙을 이용해 screen 의 크기 별 속성을 정해주었다.

화면의 폭이 800px 이하일 경우는 font-size: 3em이고 font-weight: bold가 된다.

화면의 폭이 801px 이상이고 1000px 이하일 경우는 font-size: 1.5em이고 font-weight: bold가 된다.

화면의 폭이 1001px 이상일 경우는 font-size: 1em이고 font-weight: bold가 된다.

(왼쪽) 화면의 폭이 801px 이상이고 1000px 이하일 경우 (오른쪽) 화면의 폭이 800px 이하인 경우

'Web > HTML & CSS' 카테고리의 다른 글

26강 : CSS 규칙 (0)	2020.03.03
25강 : CSS 변환(transform) (0)	2020.03.02
24강 : CSS 애니메이션 (0)	2020.03.02
23강 : CSS 변형 (0)	2020.03.01
13강 : CSS 속성4 (0)	2020.03.01

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

웹개발 한 번 해보겠습니다..

티스토리 뷰