07. Front의 영원한 적, Media-Query

프로젝트를 진행하다보면 만연한 Front 혐오를 느낄 수 있는데, 그 이유 중 하나는 바로 CSS라고 생각한다. 사실 전체적인 화면을 구성하고, API를 연결하는 부분은 충분히 매력적이지만, CSS는 언제나 그리고 늘 어려운 문제이다.

세상에 참 많은 디바이스들이 나타나기 시작하면서 여러 화면의 사이즈와, 해상도가 만들어졌고,, 그에 따른 Web Publisher들이나 Front-End Designer들이 해야할 일들은 너무나도 많아졌다. 시간은 한정되어있지만 CSS는 끝이 없다. 그 중 한 축을 담당하는 Media-Query에 대해 알아보자. 추가로 Grid와 100% 요소들에 대해서도 알아본다. 이 프로젝트에 사용되었던 Vanilla-Extract-CSS 예시 구문을 확인하고 공부해본다.

Media-Query
: CSS에서 특정 조건에 따라 스타일을 적용할 수 있게 하는 기능
주로 화면의 크기, 해상도, 디바이스 유형에 따라 다른 스타일을 적용할 때 사용된다.

/* 기본 스타일 */
body {
  background-color: white;
  color: black;
}

/* 화면의 너비가 600px 이상일 때 적용 */
@media (min-width: 600px) {
  body {
      background-color: lightblue;
  }
}

/* 화면의 너비가 900px 이상일 때 적용 */
@media (min-width: 900px) {
  body {
      background-color: lightgreen;
  }
}

CSS Grid
: Css 그리드는 레이아웃을 구성할 때 매우 유용한 도구.
행과 열을 기반으로 요소들을 정렬할 수 있다.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3개의 열을 동일한 비율로 생성 */
    gap: 10px; /* 그리드 아이템 간의 간격 */
}

.item {
    background-color: lightgrey;
    padding: 20px;
    text-align: center;
}

CSS에서 100%의 의미
: 주로 요소의 너비 또는 높이를 설정할 때 사용되며, 부모 요소의 크기에 따라 상대적으로 설정됨. 부모 요소의 너비가 500px이라면 자식 요소의 너비도 500px

.parent {
    width: 500px;
    height: 300px;
    background-color: lightcoral;
}

.child {
    width: 100%;
    height: 100%;
    background-color: lightseagreen;
}

내가 이 프로젝트에서 사용한 media Query는 최소 넓이 / 최대 넓이 일 때 다르게 Style을 주는 방식으로 설정했다. 아래와 같음

'@media': {
  'screen and (min-height: 463px)': {
    height: constants.MAX_FRAME_HEIGHT,
    aspectRatio: '33 / 19',
    backgroundColor: vars.colors.background,
    borderRadius: vars.borderRadius['2x'],
    outline: '1px solid black',
    top: '50%',
    transform: 'translate(-50%, -50%)',
  },
},


'@media': {
  'screen and (max-height: 463px)': {
    height: '100%',
    width: '100%',
    backgroundColor: 'black',
  },
},

여기서 aspectRatio 속성은 CSS에서 요소의 너비와 높이의 비율을 설정할 수 있는 속성이다. 이 속성을 사용하면 요소의 너비나 높이가 변경될 때 자동으로 다른 치수가 비율에 맞게 조정된다. 주로 컨텐츠의 비율을 유지하기 위해 사용됨. <width> / <height> 의 비율을 지정한다.

다음은 grid 다.

export const gridBox = style({
  display: 'grid',
  gridTemplateColumns: '35% 65%',
  gridTemplateRows: '15% 1fr',
  gridTemplateAreas: `
    ". a"
    "b c"
  `,
  height: '100%',
  overflow: 'hidden',
});

------

export const characterWrapper = style({
  gridArea: 'b',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'flex-end',
});

• display: 'grid': 그리드 레이아웃을 활성화합니다.
• gridTemplateColumns: '35% 65%': 두 개의 열을 정의하며, 첫 번째 열은 너비의 35%, 두 번째 열은 65%를 차지합니다.
• gridTemplateRows: '15% 1fr': 두 개의 행을 정의하며, 첫 번째 행은 높이의 15%, 두 번째 행은 남은 공간(1fr)을 차지합니다.
• gridTemplateAreas: 그리드 영역을 지정합니다. "."은 빈 공간을 의미하며, "a", "b", "c"는 각기 다른 그리드 아이템을 의미합니다.

또한 이 characterWrapper 는 grid Area를 통해 b의 구역에 위치하게 된다.

이 gridBox 정렬을 통해

이 화면에 보이는 스킨 창을 디자인 할 수 있었다.
b 부분에는 스킨 리스트들을 놔두어 디자인 했음.

끝인데,, 마무리를 어떻게 하면 좋을까,,
CSS는 끝이 없다.