ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [css] 반응형 웹
      codeStates front-end/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;
    
  }
}

         

         

        실행결과

         

        👉🏻 👉🏻 👉🏻 

         

        반응형

        'codeStates front-end > Css' 카테고리의 다른 글

        [css] css 애니메이션  (0) 2023.03.17
        [css] Selector  (0) 2023.01.04
        [css] 박스를 구성하는 요소  (0) 2023.01.04
        [css] 박스 모델  (0) 2023.01.04
        [css] css 속성  (0) 2023.01.04

        관련글 관련글 더보기

        댓글

      Designed by Tistory.

      티스토리툴바