오늘은 CSS의 flex와 grid에 대해 알아보겠다!
flex와 grid가 필요한 이유?
html 태그를 분류하는 기준에는 여러가지가 있다. 여러 방법들 중 블록 태그와 인라인 태그로 나눌 수 있는데 블록 태그란 html 요소 하나가 요소가 있는 width를 100% 차지하는 것을 말하고 인라인 태그란 그 태그의 크기 만큼만 차지하는 것을 말한다. 
위 사진은 아래 코드를 실행한 결과이다. 블록 태그는 좌우 공간 전체를 차지하고, 인라인 태그는 text가 차지하는 공간 만큼만 차지하는 것을 볼 수 있다.
<h1>h1 : 블록 태그</h1>
<span>span: 인라인 태그</span>
<button>button: 인라인태그</button>
<p>p: 블록 태그</p>만약 여기서 이 태그들을 한 줄에 보여주고 싶다면?
flex를 사용하는 경우
한 줄에 요소들을 보여주고 싶은 경우 flex를 사용하는 것이 좋다. 가로로 한 줄, 세로로 한 줄 모두 가능하며 정렬 또한 가능하다. 이 때까지 여러 미션을 하면서 가장 많이 사용한 css 중 하나일 것 같은데 여러모로 편리하고 깔끔하게 배치가 가능해서 한 번 익혀두면 쉽게 쓸 수 있다. 위 속성들을 한 줄로 정렬해보도록 하겠다.
1. flex만 적용
편하게 보기 위해 전체 요소에 대해
margin: 0을 값을 주고 span태그에<svg>요소를 추가했다.
flex적용을 위해 위 코드들을 감싸는 <div> 태그를 추가했다. 그리고 그 div 태그에 스타일로 display: flex를 추가해주었다. css적으로 부족한 디자인이지만 눈에 심히 거슬리는 것이 있다. 바로 <span>태그의 집모양 아이콘은 상단에 <button>태그의 텍스트는 중앙에, <p> 태그의 텍스트는 상단에 위치한 것이다. 이 부분을 flex 적용 시 사용할 수 있는 속성들로 조절해보겠다.
2. 관련 속성 사용
속성 사용에 앞서서 작성 중이던 web의 개발자 도구에서 style로 이동해보면, flex를 적용한 해당 style 속에 아이콘을 발견할 수 있다. 아이콘을 클릭하면 여러가지 속성들을 미리 적용해 볼 수 있는 버튼들이 나오는데 이 버튼을 통해 코드 상에는 적용되지 않는 여러가지 값들을 편리하게 넣었다 뺐다 해볼 수 있다. 이 곳을 통해서 어떻게 정렬할 수 있는지 확인할 수 있다.
나는 모든 글자, 아이콘이 같은 높이에 위치하게 하기 위해 align-items: center 을 적용했다. 이 속성은 아래처럼 flex 아래에 작성할 수 있다.
div {
display: flex;
align-items: center;
}grid를 사용하는 경우
만약 위의 경우처럼 한 줄이 아니라 여러 줄이면 어떻게 할까?
이 그림의 파란색 상자 안 영역처럼 여러 줄, 여러 칸에 일정하지 않은 형태로 나열되어 있다면?
왼쪽 4칸을 위 아래로 나누고 그 나눈 두 영역을 을 하나의 태그로 감싸고 4칸을 모두 감싼 하나의 태그와 promotion 영역을 하나로 감싸 각 영역마다 flex를 주는 방법도 생각해볼 수 있지만 grid는 그것을 좀 더 쉽게 만든다.
grid는 간단하게 영역을 내 마음대로 조각조각 쪼개는 것이다. 어떻게 할 수 있을까?
위 그림은 로고로 둘 그림 하나와 grid로 영역을 나눠줄 부분을 크기와 색, 테두리 속성만 정한 것이다. 이 부분을 grid로 나누기 위해서는 먼저 가로 세로가 몇 줄이 되야하는지 생각을 해봐야한다. 1번부터 4번까지의 영역은 각 100px * 100px이며 promotion 영역은 400px * 200px이다.
제일 처음 보여준 그림처럼 나누려면 가로로 3등분, 세로로는 2등분을 하는 것이 적절해보인다.
grid를 적용하려면 우선 이 태그들을 포함하는 부모 요소가 있어야한다. 그리고 그 부모 요소의 스타일로 display: grid 를 설정한 후 가로와 세로에 몇 칸씩 필요한지 지정을 해준다. 설정을 위한 속성은 아래와 같다.
.parent {
display: grid;
grid-template-rows: 100px 100px; /* 세로 칸 수 및 넓이 */
grid-template-columns: 100px 100px 1fr; /* 가로 칸 수 및 넓이 */
}fr이란?
fr은 지정한 영역을 제외한 나머지 영역을 할당받게 된다. 만약 여기서100px 1fr 2fr로 값을 주게 되면 100px을 제외한 나머지 공간을 1:2의 비율로 나누어 할당한다.
이 상태에서 내가 원하는 대로 칸 수에 알맞게 들어간다면 여기까지 해도 좋지만, 만약 내가 원하는 더 디테일한 위치를 잡고 싶다면 grid-template-areas 속성을 이용할 수 있다.
지금 내가 grid 속성 값을 준 부모 태그에 2차원적으로 어떤 값을 할당하고 싶은지 그려주면 되는데, 그러려면 공간을 차지할 태그의 고유한 이름이 있어야한다. 그 이름은 grid-area로 설정할 수 있다. (필요없는 css 속성들은 생략했다.)
.parent {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 1fr;
grid-template-areas:
"p1 p2 pm"
"p3 p4 pm"; /* 2X3 배열에 원하는 영역의 grid-area 값을 넣어준다 */
}
.p1 {
grid-area: p1;
}
.p2 {
grid-area: p2;
}
.p3 {
grid-area: p3;
}
.p4 {
grid-area: p4;
}
.pm {
grid-area: pm;
}이렇게 설정해주면 아래와 같은 결과가 나온다.
원하는대로 공간이 잘 나누어졌다! grid에서도 flex와 마찬가지로 개발자 도구의 style에 들어가 여러가지 속성들로 정렬 및 간단한 배치를 할 수 있다.
마치며
오랜만에 css 관련 글을 쓰며 공식 문서에 들어가 살펴보니 몰랐던 내용도 있고 가물가물하던 기억들도 있어서 복습을 잘 한 것 같아 뿌듯하다. 내가 조작하는대로 바로바로 화면으로 결과가 출력되는 것에 재미를 느끼는 편이라 새삼 frontend 하길 잘 했다는 생각이 든다 🤗
