티스토리 뷰

Frontend/CSS, HTML

[CSS] 반응형 웹(미디어 쿼리, 중단점), 잘 사용되는 CSS속성들

blueprint-12 2023. 2. 6. 22:15

1. 미디어 쿼리란(media-query)?

뷰포트의 너비에 따라 웹 사이트트의 스타일 시트를 수정할 수 있다. 

(뷰포트 너비 외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다.)

@media screen and (max-width:500px){
 //스크린의 viewport 너비가 500px 이하일 경우
 //적용시킬 스타일 시트
}

 

미디어 쿼리 예시 

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>media-query</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">박스입니다</div>
    <div class="container">
      <div class="box1">박스1</div>
      <div class="box2">박스2</div>
    </div>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}

.box {
  height: 200px;
  background: blue;
  color: white;
  padding: 30px;
}

/* 600px이상일 때에는 파란색 이하일 때에는 빨간색 */
@media screen and (max-width: 600px) {
  .box {
    background: red;
  }
}

.container {
  display: flex;
  flex-direction: row;
}

.box1 {
  background: green;
  width: 20%;
  padding: 30px;
}
.box2 {
  background: orange;
  width: 80%;
  padding: 30px;
}

/* 최소 601이상일 때 */
@media screen and (min-width: 601px) {
  .container {
    flex-direction: column;
  }

  .box1,
  .box2 {
    width: 100%;
  }
} ;
  • 코드를 보면, box1 과 box2는 600px이하일 때 20% 80% 의 비율로 두 요소가 한줄을 차지하고있지만, 601px이상(min-width:601px)일 때에는 블록요소처럼 각각 한줄(width: 100%)을 차지하고 있다.

2. break point 

viewport란 디바이스가 있고 디바이스의 브라우저가 있을 때 북마크바 등..의 브라우저의 기본 UI를 제외한 스크린을 말한다.

break point란 반응형 웹사이트 작업의 기준이 되는 중단점(break point)

  • 간단히 말해서, pc / 태블릿 / 모바일의 기준이 되는 규격 분기를 말한다.
크기 중단점
Mobile 0 ~ 767px
tablet  768px ~ 1023 px
pc  1024px ~ 1439px
pc Large  1440px ~ 

*break point에는 절대적인 기준은 없다.

 

중단점 예시

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>break point</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <span class="contents">안녕하세요 </span>
    </div>
  </body>
</html>

style.css

* {
  box-sizing: border-box;
}

.container {
  background: red;
  padding: 30px;
}
.contents {
  color: white;
}
.contents:after {
  content: '저는 PC입니다.';
}

/* PC 기본 설정  */
@media screen and (max-width: 767px) {
  /* mobile */
  .container {
    background-color: blue;
  }
  .contents:after {
    content: '저는 모바일입니다.';
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* tablet */
  .container {
    background-color: green;
  }
  .contents:after {
    content: '저는 태블릿입니다.';
  }
}

3. 반응형 웹에서 잘 사용되는 속성들 ⭐

max-width & max-height

:해당 요소의 최대 너비 or 최대 높이를 설정한다.  -> 너비 혹은 높이의 상한선을 그어주는 것

  • 보통 상대값을 가진 width값과 같이 쓰이지만 그럴 용도라면 아래의 max() 나 min()을 활용해주는 것이 좋을 거 같다. 굳이 하나로 뭉치지 않고 한 번에 이해하기 쉽게 코드를 작성하고 싶다면 따로따로 작성해도 될 거 같다.
width: 50%;
max-width: 1240px;

min-width & min-height

: 위의 max-width와 반대로 최소 너비 or 최소 높이를 설정한다. -> 하한선 설정

 

max() & min() // CSS 함수

:소괄호 안에 입력된 값 중 제일 높은 값을 속성값으로 출력하는 함수(CSS함수), min의 경우는 제일 낮은 값

  • 소괄호 안에 값은 여러개를 줄 수 있다. 띄어쓰기를 통해 구분
height: max(320px, 20%);

-> 예시를 보면 20%라는 상대수치가 viewport 혹은 부모 container 에 따라서 변동되기 때문에 사용자가 보는 화면에서 기본값 320px에 20%가 320px보다 커지면 20%를 값으로 쓴다. 

 

3-1. aspect-ratio ⭐

:요소의 크기를 일관되게 조정하는 속성으로 요소의 비율이 커지거나 줄어들 때 동일하게 유지할 수 있는 속성이다.

  • aspect-ratio: width/height 라고 간주한다. 값이 하나만 있을 경우는 width값을 지칭하며 height는 1의 비율이다.
  • 2021년 초에 지원을 시작, CSS Box sizing module level4에 자세한 내용을 확인할 수 있다. (구버전 web브라우저의 지원은 안될 수 있음)
  • 반응형을 기반으로하는 많은 웹에서 사용하고 있는 속성
  • height와 width가 이미 지정된 경우는 반영되지 않는다. (단순 지정 >aspect-ratio), min-xxx가 지정된 경우도 마찬가지
  • content가 요소를 넘는 경우도 반영되지 않는다. 요소의 내용이 너무 길면, 요소는 확장되는데 종횡비는 적용되지 않는다. 만약 요소의 길이에 상관없이 종횡비를 유지하고 싶다면 min-height:0값을 지정해주면 된다.
.box {
  width: 100px;
  aspect-ratio: 3 / 1;  /* 100, 33.333 */
  background: red;
}

3-1-1. 좋은 사용 예시 

1) 반응형 iframe (유투브와 같이 비디오를 표시하기 위해 iframe을 적용하는 경우) 

iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

2) grid의 각 요소 ⭐

Grid 사용시 내부의 항목의 너비가 조정되는 동안 높이가 동적으로 변경될 수 있어 사용하면 좋다.

img 태그가 내부에 있다면 img비율을 지키기 위해 img의 부모에 aspect-ratio를 지정하고 img에 object-fit:cover를 하면 이미지가 깨지지않으면서 종횡비로 지정할 수 있다.

.parent {
  width: 300px;
  aspect-ratio: 3 / 1;
  border: 4px solid red;
}
.img {
  display: block; /*img default display - inline-block*/
  width: 100%;
  height: 100%;
  object-fit: cover;
}

-> grid 레이아웃을 하면서  해당 속성을 처음 써봤는데 img 자체에 aspect-ratio를 먹혀도 원하는대로 잘 동작했던 거 같다. 

2023-03-05 추가

요소의 기본값을 모두 없애주는 방법( all: unset )

button {
 all: unset;
}
  • 기본적으로 적용된 css가 많을 경우 defalut CSS를 모두 없애주는 기능을 한다.
  • button 이나 a처럼 focus가 가능한 요소의 style을 reset시켰더라도 ouline-style: auto 를 써서 outline-style만 브라우저 기본 style을 따라가게 할 수있다. 
  • IE 제외 최신 브라우저 전부 지원

text input과 pattern

<form>
<input 
	type="text"
    inputmode="numeric"
    parttern="[0-9]+"
    />
    <button>제출</button>
</form>
  • 숫자 패드 표시: inputmode="numeric"
  • 양식 제출 시 값 검증: pattern="[0-9]+"

:is() pseudo class

is() CSS 유사 클래스 함수는 선택자 목록을 인자로 받아 해당 목록의 선택자 중 하나로 선택할 수 있는 모든 요소를 선택합니다. 이 함수는 큰 선택자를 보다 간결한 형태로 작성할 때 유용합니다.
  • 리스트 선택자(ul, menu, ol 등..)와 HTML 섹션과 헤딩에 같이 적용하면 아주 좋은 의사 클래스이다. 
  • 최신 브라우저 사용가능(IE 제외)

:is() 적용 전

/* Level 0 */
h1 {
  font-size: 30px;
}

/* Level 1 */
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}

/* Level 2 */
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
  font-size: 20px;
}

/* Level 3 */
/* don't even think about it! */

:is() 적용 후,

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:is(section, article, aside, nav)
  :is(section, article, aside, nav)
  :is(section, article, aside, nav)
  h1 {
  font-size: 15px;
}

 

📌단, 가상요소(e.g. :before :after)에는 적용되지 않는다.

has() 선택자

: 최신 CSS이며 특정 요소를 가지는 요소를 선택할 때 사용할 수 있다.

  • jQuery에서 제공하던 기능이나, 일부 브라우저에서 사용 가능(최신이라 호환성은 좋지않음)
  • 특정 자식 요소를 가지는 부모 요소를 선택할 때 유용 
p:has(span) {
  color: red;  /* span요소를 가지고 있는 p요소를 선택 */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

 

:has() - CSS: Cascading Style Sheets | MDN

The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a

developer.mozilla.org

overflow-wrap: 속성값

  • word-braek: keep-all을 사용하여 긴 텍스트가 상자 밖으로 빠져나가는 것이 문제라면 overflow-wrap: anywhere 을 고려

인라인 요소의 긴 단어가 넘칠 경우, 줄바꿈을 위해서 긴 단어 깨기 여부 지정

  • 기본값: normal
  • 상속여부: O
  • 애니여부: X
  • CSS ver: CSS3

인라인 요소에만 적용되며 word-break 속성과 달리, overflow-wrap은 전체 단어를 오버플로없이 한 줄에 배치할 수 없는 경우에만 나누기 한다. word-wrap 속성이 overflow-wrap 속성으로 이름이 바뀐 것이다. 최신 브라우저 모두 지원(IE 부분 지원)

 

[속성값] 

  • normal(defalut): 단어쪼개기 X  (즉, 단어 사이의 공백에서만 줄바꿈) 
  • anywhere: 단어쪼개기 O (즉, 넘치면 언제든 줄바꿈)
  • break-word: 단어쪼개기 O (즉, anywhere 결과와 대체로 같음, 다른 경우도 있음)
  • initial: 이 속성의 기본값으로 지정.
  • inherit: 부모 요소의 속성값 상속

 

 

all ref:

 

홈짱닷컴

홈페이지 제작, 그누보드 강의, 웹코딩, HTML, CSS, JAVASCRIPT, JQUERY, PHP, SQL

homzzang.com

 

:is() - CSS: Cascading Style Sheets | MDN

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

developer.mozilla.org

⭐좋은 참고 자료

https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

 

반드시 기억해야 하는 CSS 선택자 30개

여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 중에 다수가 CSS3 명세서에 있으며 모던

code.tutsplus.com

 

'Frontend > CSS, HTML' 카테고리의 다른 글

[CSS] SCSS란 무엇인가?  (0) 2023.04.08
[CSS] CSS의 흐름  (1) 2023.03.13
[CSS] position, transition, transform, animation  (0) 2023.02.01
[CSS] 절대 단위, 상대 단위  (0) 2023.02.01
[CSS] 배경  (0) 2023.02.01
댓글