ougi FE

[CSS] 반응형 웹에 대하여 본문

CSS

[CSS] 반응형 웹에 대하여

ougi 2024. 7. 26. 21:48
728x90

저는 요즘 반응형 웹에 대한 유튜브 강의를 듣고 한번 더 정리하면 좋은 반응형 웹을 만들 수 있을 것 같아 이렇게 글을 쓰게 되었습니다 일단 반응형 웹이 무엇인지 먼저 알아보겠습니다!!

 

반응형 웹이란?

  • 간단히 말하자면 화면 크기에 실시간으로 반응하며 레이아웃이 변화하는 웹을 말합니다
  • 하나의 코드로 모든 화면 크기에 최적화된 웹이라고 할 수 있습니다
  • 유동적입니다
  • 하나의 URL을 기반으로 화면이 바뀝니다
  • 장치에 최적화된 페이지로 연결되는 별도의 URL이 있다면 반응형 웹이라고 부르지 않습니다

장점

  • 검색엔진 최적화에 유리해 검색 결과에서 상위권에 나타나게 할 수 있습니다
  • 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능합니다
  • 반응형 웹 외에 다른 웹에 비해 모든 플랫폼에서 일관된 콘텐츠 경험을 줄 수 있습니다

단점

  • 반응형 웹은 읽어야할 디자인 소스가 많기 때문에 모바일을 전용으로 하는 사이트에 비해 무겁습니다
  • 웹 브라우저의 호환성의 문제가 있을 수 있습니다 ex)디자인 깨짐
  • 구현할 때 많은 어려움이 있을 수 있습니다

미디어 쿼리 

  • 반응형 웹에 핵심이 되는 문법입니다
  • 뷰 포트(브라우저 창 크기)에 크기에 따라 다른 레이아웃을 보여줍니다
  • 다른 CSS문법과 다른 점은 CSS 코드에 조건을 적용합니다
  • 조건에 만족하는 디자인을 보여줍니다
    • 대표적으로 가장 많이 사용하는 조건은 뷰포트 너비이며, min-width와 max-width, width 등을 사용합니다
    • 세로인지 가로인지 방향성에 대한 조건은 orientation이 있습니다 
    • and, or 연산자를 사용해서 여러 조건을 걸 수 있습니다
  • 미디어 타입이라는 것이 존재하는데 코드가 어떤 미디어를 위한 것인지 알려줍니다
    (대표적으로 screen, all, print을 많이 사용)
    • all: 모든 미디어 타입
    • print: 프린터
    • screen: 컴퓨터 화면
    • speech: 스크린 리더

조건에 대한 코드 예시

@media screen and (max-width: 600px) {
	body{
        color: tomato;
      }
}

 

이렇게 화면이 600px 이하로 줄어드니 배경색이 토마토로 바뀌는 것을 볼 수 있었습니다

단위

  • em, rem
    • em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위 입니다
    • em은 부모 요소의 글꼴 크기를, rem은 <html>의 글꼴 크기를 의미합니다
    • em으로 여백 크기를(padding과 margin)를 정할 때는 자기 자신의 글자 크기를 기준으로 합니다
  • vw, vh, vmin, vmax
    • 뷰포트 크기를 기반으로 크기를 계산하는 가변 단위들입니다
    • vh는 뷰포트 너비의 100분의 1입니다
    • vh는 뷰포트 높이 100분의 1입니다
    • vmin는 뷰포트 높이와 너비 중 작은 쪽의 100분의 1입니다
    • vamx는 뷰포트 높이와 너비 중 큰 쪽의 100분의 1입니다
  • 비율 계산 기반(%)
    • %단위는 백분율 값으로, 부모 요소와의 상대적 크기를 지정합니다
    • 너비, 여백 높이, 글자 크기 모두 부모 요소와 비례합니다
  • CSS 함수의 개념과 calc()
    • CSS 함수에는 함수마다 자신의 역할을 나타내는 함수명이 존재합니다
    • calc()을 이용하면 계산식의 결과를 속성값으로 지정할 수 있습니다
    • width: calc(30px-20px)형식입니다
    • 함수란 주어진 인수에 따라 정해지는 값을 일컫는 표현입니다
    • calc()를 이용하면 계산식의 결과를 속성값으로 지정할 수 있습니다

글을 마치며 

이렇게 반응형 웹의 개념과 CSS 문법들을 정리 해보았는데 멋진 반응형 웹을 만들 수 있길 바라겠습니다!!

728x90

'CSS' 카테고리의 다른 글

classnames 사용하여 조건부 스타일 지정하자!  (0) 2024.11.05
[CSS] 트랜지션(Transition) 공부해서 잘 사용하자!!🖌️  (0) 2024.09.16
[CSS] Tailwind CSS 그게 뭔데!!🎨  (4) 2024.09.02
[CSS] position과 z-index 속성에 대하여  (0) 2024.07.21
'CSS' Related Articles more