codeStates front-end/Css

[css] 반응형 웹

환테크 2023. 3. 16. 20:08
반응형

 

 

목차

     

     

     

     

    📌  반응형 웹

    여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기에 실시간 반응하여

    크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다.

     

     

    📍 리플로우(Reflow)와 리페인트(Repaint

     

    화면을 늘리거나 줄이는 등 크기를 조절하거나, 다른 사이트로 이동을 하는 등 화면에 있던 요소들의 크기가 바뀌게 되는데,

    화면에 나타나는 모습을 바꾸기 위해 모든 요소의 위치와 크기를 다시 계산하고, 다시 그려야 한다.

    웹 인터렉션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복 수행하는 것을 리페인트라 한다.

     

    🔗 리플로우와 리페인트의 최적화

     

    말 그대로 다시 필하고 다시 플로우를 정해야하는데, 이런 과정은 최소하하는 것이 좋다.

    JS + CSS 조합한 애니메이션이 많거나, 레이아웃 변화가 많은 요소 같은 영향을 주는 노드를 줄입니다.

     

     

    리플로우의 원인

     

    • 윈도우 리사이징 (뷰포트 변화는 Global Layout에 영향)
    • 폰트의 변화 (height계산에 영향을 주므로 Global Layout에 영향)
    • 스타일 추가 또는 제거(레이아웃을 바꾸므로)
    • 내용 변화 (인풋박스에 텍스트 입력 등..)
    • :hover와 같은 CSS Pseudo Class
      (CSS: The Definitive Guide: The Definitive Guide 55p에서, hover할 시 나타나는 변화로 인한 우려가 생긴다는 의미인 듯 합니다.)
    • 클래스 Attribute의 동적 변화
    • JS를 통한 DOM 동적 변화
    • 엘리먼트에 대한 offsetWidth / offsetHeight (화면에서 보여지는 좌표) 계산시
    • 스타일 Attribute 동적변화

     

     

    리플로우가 일어나는 대표적인 css 속성

     

    position width height left top right
    bottom margin  padding border border-width clear
    display float font-family font-size font-weight line-height
    min-height overflow text-align vertical-align  ...  

     

     

    리페인트가 일어나는 대표적인 속성

     

    background background-image background-position background-repeat background-size border-radius
    border-style box-shadow  color line-style outline clear
    display float font-family font-size font-weight outline-color
    visibility ...        

     

     

     

    📍 미디어 쿼리

    미디어 타입을 구체적인 조건으로 필요한 스타일을 적용

     

     

    🔗 미디어 쿼리 적용법

     

    1. <head> 태그 안에 <link> 태그를 위치 시킨다.

     

    <link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

     

    2. 미디어 속성을 사용해 조건을 지정한다.

     

    <style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
	/* 여기 css를 작성합니다. */
</style>

     

    3. css 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

     

    미디어 쿼리 구문

     

    @media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

--예제
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

     

    • 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줍니다.
    • 조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않습니다.
    • CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용됩니다.

     

     

    🔗 미디어 타입(Media Type)

     

    지정할 수 있는 미디어 타입

     

    • all : 모든 미디어 타입
    • print : 프린터
    • screen : 컴퓨터 화면
    • speech : 스크린 리더

     

    조건(너비 및 높이)

     

    반응형 디자인을 만들기 위해 가장 많이 상요하는 기능 : 뷰포트 너비 min-width와 max-width, width

     

    //width(혹은 height)는 브라우저의 창 크기
@media screen and (width: 600px) {
	body {
		color : red;
	}
}

     

    방향성

     

    세로 모드인지 가로 모드인지 검사하여 CSS 스타일응 주고 싶은 경우:  orientation

     

    @media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

     

     

    🔗 복잡한 미디어 쿼리

     

    논리곱(and) 미디어 쿼리

     

    // min- 혹은 max- 접두사를 붙이게 되면 최솟값인지 최댓값인지 표시
@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

     

    논리합(and) 미디어 쿼리

     

    @media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

     

    부정(not) 미디어 쿼리

     

    @media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

     

     

    📍 <실습> 반응형 웹 수도코드

     

    @media screen and (min-width: 800px ), screen and (orientation: landscape ) {
  .main-title, .sub-title {
    color: #F6D9C1;
  }
}

@media not all and (orientation: landscape ) {
    .main-title, .sub-title {
      color: #5f88e3;
    }
}

@media screen and (min-width: 1000px) {
  body {
    background: #f4ac71;
  }
  
  .display-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
     width: 40%; 
  }
}

@media screen and (max-width: 1000px) {
  body {
    background: #bababa;
  }

  .display-box {
    background: red;
    display: grid;
    place-items: center;
    
  }
}

     

     

    실행결과

     

    👉🏻 👉🏻 👉🏻 

     

    반응형