@Media query

kirin.log·2020년 11월 12일
CSS
9

🚀 미디어쿼리(media query)

화면이 작을때와 클때, 보여지는 UI를 다르게 하는 방식

html

<head>
   <link rel="stylesheet" href="favorite.css" media="(max-width: 700px)"> 
</head>

<!-- 
  html <head>에 연결해주고 css페이지에서 구문 삽입하기 
-->
css

@media(max-width:800px){
 ---(스크린 너비가 800px보다 작을 경우 변화되는 내용 쓰기)---
}

/* 즉, 화면이 작아졌을 때 보여지는 모습대로 속성값 구성하기 */

🚀 media query 실습

<html>
  <head>
     <title>flex</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css">
  </head>
  <body>
     <div class="container">     
       <header>
         <h1>KIRIN VELOG</h1>
       </header>
       <section class="content">
         <nav>
           <ul>
             <li>html</li>
             <li>css</li>
             <li>js</li>
           </ul>
         </nav>
         <main>
           <p>제 블로그는 TIL을 정리한 내용입니다.</p>
           Lorem ipsum dolor sit amet consectetur adipisicing cessitatibus!
           Veniam dicta eligendi laudantium s quas quod quo maiores, sunt ad 
           provident quae aspernatur, voluptates perspiciatis molestias
           molestiae et? Culpa voluptatibus doloribus consequuntur dolorem 
           officia vero omnis facilis, veniam et, consectetur voluptate 
           cupiditate odit! Recusandae, deleniti itaque. Accusantium eius 
         </main>
         <aside>
             AD
         </aside>
      </section>
      <footer>
          <a href="https://velog.io/@kirin/Flex">velog 바로가기</a>
      </footer>
    </div>
  </body>
</html>
css

@media (max-width:1000px){
    body{
        background-color: green;
    }
}
@media (max-width:500px){      /* 화면이 작아졌을때의 미디어쿼리 변화주기*/
    body{
        background-color: yellow;
    }
    .content{
        flex-direction: column;
    }
    .content nav{
        border:none;
        flex-basis: auto;
    }
    body{
        border: none;
    }
    main{         /* main, nav, aside를 수직정렬 위해 각 order를 1,2,3 순서로 준다 (flex 기능) */
        order:0;
    }
    nav{
        order:1;
    }
    aside{
        order:2;
        display: none;   /* 모바일 화면에서는 광고칸 안보이게 */
    }
}
@media (min-width:1001px){
    body{
        background-color: blue;
    }
}



*{
    box-sizing: border-box;
    color:white;
    padding:0;
    margin:0;
}
.container{
    display: flex;
    flex-direction: column;
}
header{
    border-bottom: 1px solid grey;
}
footer{
  background-color: red;
  position: fixed;
  left:0px; 
  bottom:0px; 
  width:100%;
  z-index: 1;
  text-align: center;
  padding: 15px;
}
.content{
    display: flex;
}
.content nav{
    border-right: 1px solid grey;
}
.content aside{
  border-left: 1px solid grey; 
}
nav, aside{
    flex-basis: 150px;
    flex-shrink: 0;
    text-align: center;

(+) 넓은 화면에는 안보이지만, 화면 축소 하면 보이게 하기

.navbar_toggleBtn{
    display:none;   
    /* display:none;을 해줌으로서 일반 화면에는 나오지 않고 미디어쿼리에 
    display:block;를 적용하여 화면이 작아질때만 block으로 나오게 한다 */

    position:absolute;
    right: 32px; 
    /* right값을 설정하지 않으면 기본 왼쪽 상단에 위치한다. 
    right값을 적용하면 해당 값만큼 오른쪽에 떨어져서 위치한다. */

    font-size: 24px;
    color:var(--point-color);
@media screen and (max-width: 768px) {
 .navbar_toggleBtn{
        display:block;
    }
 }

(+) 화면 너비 참고

---desktop(1024px~)---
@media screen and (min-width: 1024px) {
 .container {
 	width: 100%;
    }
 }
 ---tablet(768px~1024px)---
@media screen and (min-width: 768px) and (max-width: 1024px) {
 .container {
 	width: 100%;
    }
 }
  ---mobile(320px~480px)---
@media screen and (max-width: 768px) {   /* 태블릿사이즈보다 작아지면 바로 적용되도록 */
 .container {
 	width: 100%;
    }
 }

반응형(responsive) 웹사이트 제작을 위한 css

🐳 Block / Inline / Inline-block 요소

Block 요소 특징
👉 자동 줄바꿈 ➡ (float 또는 flex를 사용하면 inline)
👉 width, height를 지정하지 않으면 부모의 width와 height를 100% 채운다.
👉 자식으로 inline요소와 block요소를 모두 가질 수 있다.

Inline 요소 특징
👉 자동 줄바꿈이 되지 않는다 ➡ (contents 크기만큼 차지하고 바로 옆으로 붙는다)
👉 width, height를 지정할 수 없다 ➡ (inline요소의 크기는 contents 크기가 된다)
👉 자식요소로 inline요소는 포함할 수 있지만 block요소는 포함할 수 없다.

Inline-block 요소 특징
👉 block요소와 inline요소의 특징을 모두 갖는다.
👉 width, height를 지정 가능(=block), 더하여 자동 줄바꿈 되지 않고 옆으로 붙어올 수 있다(=inline)
👉 text-align을 통한 inline요소도 정렬 가능(=inline)

inline 요소내에서 정렬하는 방법

👉 수평정렬 방법 

text-align: center | right | left | justify(양쪽정렬)

👉 수직정렬 방법 

vertical-align: middle | right | left

block 요소를 정렬하는 방법
👉 수평정렬 방법

margin : 0px auto;

👉 수직정렬 방법

line-height: (block요소의 height값) px

position:absolute로 배치되어 있는 block요소를 정렬하는 방법
👉 수평, 수직 정렬 방법

top : 50%;
left : 50%;
margin-left : -(block요소의 넓이/2)px;
margin-top : -(block요소의 높이/2)px;

🐳 배경이미지관련 속성

background-color : rgba(255, 255, 255, 0.5)
맨 마지막 값은 lpha(투명도) #555 처럼 지정할 수도 있음, 투명도 지정하려면 rgba로해야함.

background-image : url(이미지 경로);
이미지 배경 지정

background-repeat : no-repeat(default) | repeat-x(x축으로반복) | repeat-y(y축으로반복) | repeat(x,y축으로 반복)

background-position : center(가로) center(세로)
ex. 10px 10px
ex. 50% 50%

background-size : cover(가득채우기) | contain(가득채우되 이미지 비율을 유지하며 가득채움)

background-attachment : fixed | scroll(default)
fixed로 지정시 스크롤시에도 이미지가 해당 위치에 그대로 유지됨(이미지 스킨만 바끼는 듯한 효과줄 때 유용)

✔ 축약형:
background: #666 url(...) no-repeat center center

🐳 그림자 효과

box-shadow : (+-가로방향)px (+-세로방향)px (번짐정도)px #666(그림자색상)
➡ block요소 그림자 효과

text-shadow : (+-가로방향)px (+-세로방향)px (번짐정도)px #666(그림자색상)
➡ 텍스트 그림자 효과

🐳 Full Screen 제작 하기

영역을 풀스크린으로 잡을 때 block요소의 width는 아무때나 %로 줄 수 있지만, height값은 자식요소가 없을 경우 %로 지정할 수가 없다.
👉 따라서, width, height 모두 풀스크린으로 100%를 주기 위해서는 position:fixed로 지정해 주어야 한다.
👉 그렇게 가장 바깥 block요소를 fixed로 지정시 그곳에 붙는 모든 자식요소는 이후부터 width, height모두 %로 크기를 지정할 수 있다.
ex)

.outerArea{
  position:fixed;

  width:100%;
  height:100%;
  background : url(...) no-repeat center center;
  background-size: cover;
}

🐳 콘텐츠 넘침 처리

CSS로 제어하다보면 컨텐츠가 영역을 넘어갈 경우 어떻게 처리해야 될지 결정지어야 할 경우가 생기면 아래와 같이 지정할 수 있다.
1️⃣_ 보이게 할지

2️⃣_ 안보이게 할지

3️⃣_ 스크롤이 생기게 할지

overflow : visible
영역을 넘어도 무조건 보이게 한다.
.
overflow : hidden
넘어가는 영역은 잘라서 안보이게 한다.
overflow : hidden의 경우는 이런 용도 말고도 float처리를 위해 사용되기도 한다.
.
overflow: scroll
넘어가지 않아도 처음부터 무조건 스크롤이 생겨있게 됨
.
overflow: auto
넘어가지 않으면 스크롤이 안생기고 넘어갈 경우만 스크롤이 생기게 됨.

🐳 float 속성

float는 block요소를 가로로 이어 붙일 수 있도록 해주는 방법을 제공하는데, 한번 적용한 float의 속성을 해제하기 위해서는 clear:both같은 방법으로 해제하곤 했다.
아니면 전후 처리자 :after 등을 이용하기도 하는데 이는 많은 문제가 발생할 수 있어 권장되지 않는다.

따라서❗❗ float가 지정된 자식들을 포함하는 부모에 overflow:hidden 속성을 주면 된다.

✨✨ 참고 ✨✨
반응형(responsive) 제작을 위해서는 자식들에 float 속성을 지정 시, 해당 부모 안에 있는 모든 자식요소에 float속성을 줘야 미디어 쿼리로 제작시 틀어짐 없이 반응형을 제작할 수 있다.

padding & box-sizing:border-size

block요소의 박스모델은 margin(외부여백), border(선두께), padding(내부여백), contents(콘텐츠)로 구성된다.
👉 block요소의 넓이, 높이를 생각할 때 그 넓이 = margin + border + content 가 된다.
👉 box-sizing:border-box를 이용하면 width와 height로 지정한 크기 내에서 사이즈를 자동으로 조절해서 크기를 맞춰주게 된다.

position

최근에는 반응형(responsive)으로 제작시 외부 layout에 영향을 주는 container들을 제외하고 그 각 container안에 들어가는 요소들은 position:absolute를 통해 배치하는 것이 효율이 좋은데 이때 알아야 하는 position 속성에 관해 설명한다.

position : fixed
scroll을 해도 화면 특정 위치에 계속 보이도록 배치할 때 사용한다.
ex) aside영역에 뜨는 광고, 메뉴 nav 등...
top : ()px
left : ()px
.
position : absolute
position:relative가 지정된 부모를 기준으로 절대좌표로 대상을 배치한다.만약, position:relative가 지정된 부모가 없을시 최상단 body까지 찾아가 body를 기준으로 배치하게 된다.
.
position : relative
2가지 부분에서 사용이 되는데
1️⃣ position:absolute의 기준점이 된다.
2️⃣ 레이아웃에 영향을 주지 않으면서 일부 움직이고 싶을 때 사용된다.
3️⃣ 레이아웃에 영향을 주지 않으면서 살짝 다른 영역을 침범하게 구성하고 싶다면
position:relative; top:-20px; 이런식으로 주면 주변 영역에 영향을 주지 않고 구성할 수 있다.
4️⃣ CSS3의 transform을 사용해서도 transform:translateY(-20px) 처럼도 할 수 있다.(현재 기준점에서 Y축으로 이동)

🪐 박스들이 복잡하게 margin값을 갖는것처럼 구성될 때

이때 상자들 사이에 margin이 있는 그림처럼보이더라도 margin으로 상자들 사이를 띄워서 구성하면 안된다. 이유는 반응형 제작시 죄다 틀어져 버리기 때문이다.
따라서 상자들의 padding값과 box-sizing:border-box를 이용해서 박스들의 배치를 구성지어야 한다.

🪐 CSS 선택자에서 nth-of-child를 사용하는 대신 nth-of-type(n)을 사용

ex)

<div>
   <h1> 신데렐라 </h1>
    <p> 1장 </p>
    <p> 2장 </p>
</div>

<style>
  p:nth-child(2) {    
  /* <p>1장</p>가 빨간색으로 표시. div의 두번째 자식이자 p요소의 요건에 맞기 때문 */
  	color: red;
  }
 
  p:nth-of-type(2) {  
  /* <p>2장</p>가 빨간색으로 표시. div의 같은 유형 두 번째 p유형 요건에 맞기 때문 */
  	color: red;
  }
</style>

🪐 semantic Tag로 사용할 수 있는 영역은 semantic Tag로 구성

<header>헤더 영역</header>

<nav>네비게이션 메뉴 영역< nav>

<figure>멀티미디어 요소들이 오는 영역(중앙광고등...)</figure>

<section>
  <article>세부 영역</article>
  <article>세부 영역2</article>
</section>

<footer><address>주소영역</address>푸터</footer>

<aside>오른쪽 사이드 광고 등처럼 부수적인 영역</aside>

자식의 높이가 결정되면 부모의 높이값을 반드시 지워주자✨

✔ 자식요소의 높이값이 지정된 상태에서 부모의 높이값을 해제하면 자식들이 차지하는 영역만큼 부모의 크기가 자동으로 지정된다.

✔ 자식의 높이가 결정되면 반드시 부모의 높이값을 지워주어야 반응형을 제작할 때 쉽게 반응형으로 제작이 가능하다.

🥇 반응형 제작 Tip

✔ 자식높이가 결정되면 부모의 높이값을 지워주기
✔ layout으로 배치된 컨테이너 내에서 position:absolute로 배치를 했다면 실제 반응형으로 웹페이지를 태블릿, 모바일용으로 제작하는 것은 5분도 걸리지 않고 제작할 수 있다.

✔ 반응형 제작시 기억해야할 유의사항

  1. 가로 넓이는 고정 px이면 안되고 요소들의 넓이를 다 합쳤을 때 100%가 되어야 함(margin포함 넓이에 영향주는 모든 요소)

  2. 높이와 폰트는 고정 px이어야 한다.

  3. 세로 높이는 반응형 제작시 줄일 수 있으면 줄여주자.

✔ 태블릿 반응형 제작 방법

  1. 웹에서 적용한 CSS코드를 그대로 붙인다.

  2. 바로 위의 반응형 제작시 유의사항을 지키면서 컨테이너들의 넓이값을 고쳐나간다.(100%되도록)

  3. 바꾸지 않는 부분들은 삭제한다.(소거법)

  4. 필요시 css 코드를 추가해도 된다.

  5. 줄일 수 있으면 높이는 줄여준다.

✔ 모바일 반응형 제작 방법

  1. 태블릿에 적용한 CSS코드를 그대로 모바일 미디어 쿼리에 붙여준다.

  2. 유의사항에 맞게 고쳐주되, 중요한 점은 절대 바꾸지 않는 부분들도 삭제하면 안된다.
    👉 태블릿 코드는 삭제시 웹코드가 적용되서 괜찮았지만, 모바일은 공통 부분을 삭제시 태블릿 코드가 적용되는게 아니라 웹코드가 적용되니까 많은 차이가 발생하게 된다.
    👉 한 컨테이너가 한칸을 차지하기 위해 width:100%로 지정하여 기존 margin-right값들이 필요없게 되었더라도 이를 삭제하면 안되고 margin-right:0%; 나 margin-right:0px 처럼 고쳐주어야 한다.

CSS의 state

👉 hover : 마우스를 요소 위로 가져갔을 때

👉 active : 요소를 클릭했을 때

👉 focus : input 상자나 textarea등을 클릭했을 때

👉 visited : 주로 a태그에서 한번 누른적이 있는 경우

div:active{
  background-color:blue;
}
profile
kirin.log
boma91@gmail.com
이전 포스트

transition

다음 포스트

typography

0개의 댓글