금요일 그리드를 배우고 그리드를 활용한 실습문제 두 문제를 받았다.
그냥 무작정 따라하며 깨닫기 보단 조금 더 늦더라도 좋은 코드를 치고 싶어
충분히 습득한 뒤 과제를 보고 코드를 구상해 페이지를 만들었다.
항상 느끼는거지만 HTML이고 CSS고 이해하고 나면 이렇게 쉬운 것일 수가 없다,,,
낯선 단어들과 보충설명을 위한 코멘트 속 혼돈으로 인해 괜시리 어렵게 느껴질 뿐
사실은 정말 쉽고 재미있는 것이다.
이번에 보충 강의 없이 강의 자료 및 실시간 필기를 참고하여 1차례 복습 겸 정리를 하고, 구글링을 겸해가며 문제를 풀었다.
< 1번문제 >
▼▼▼ 하단은 1번 문제에 대한 나의 코드 ▼▼▼
[ HTML ]
<!DOCTYPE html>
<html lang="en">
<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>그리드 라인을 이용한 레이아웃 배치</title>
</head>
<body>
<div class="parent">
<div class="child one">1</div>
<div class="child two">2</div>
<div class="child three">3</div>
<div class="child four">4</div>
<div class="child five">5</div>
</div>
</body>
</html>그리드는 목요일날 배운 flex와는 달라 부모 자식으로 반복해 묶어주지 않는다. 많은 학우들이 그 부분을 헷갈려 했다. 나또한 그랬다. 어제 막 flex를 익혔기에, 습관처럼 세로 정렬 안에 가로 정렬이 있기에 차일드 2, 3, 4번을 한 디브로 묶었다.
flex는 자식요소 정렬 배치, 그리드는 말 그대로 그리드다. 가로 세로 줄 나눠 레이아웃 짜고 아이템들 위치 지정하는 것.
둘 다 레이아웃에 활용된단 이야길 들어 엇비슷한 이미지로 얽혀 헷갈렸던 것 같다.
전혀 다른 요소이다.
[ CSS ]
* {
margin: 0;
padding: 0;
}
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 8fr 1fr;
height: 100vh;
}
.child {
display: flex;
justify-content: center;
align-items: center;
}
.one {
background-color: pink;
grid-column: 1/4;
}
.two {
background-color: orange;
}
.three {
background-color: skyblue;
}
.four {
background-color: yellow;
}
.five {
background-color: yellowgreen;
grid-column: 1/4;
}그리드로 레이아웃을 짜놓고 그 공간을 배정하는 방법엔 크게 두가지가 있었다.
1. 그리드 라인을 이용한 레이아웃,
2. 그리드 아레아를 이용한 레이아웃!
실습 2번이 그리드 아레아를 이용해 푸는 문제이기에,
배운 것을 골고루 활용해보고자 1번 실습은 그리드 라인을 이용해 레이아웃 배치를 하였다.
[ 결과물 ]
확대축소시 마다 너비와 높이가 각각 같은 전체 비율로 줄었다 커진다.
fr단위를 사용해 전체 비율에 맞게 화면이 조정된다.
[ 아쉬운 점 ]
파일을 다시 한번 확인해보니 스타일 시트를 css파일로 따로 분리하지 않고 html파일에 style태그로 스타일을 입혀 제출했다. 짧은 코드였지만 그래도 css는 html과 따로 분리해 작성하는 것이 더 좋다고 들었기에 의식적으로라도 분리해 작성하고 있었는데, 코드가 짧아 가벼운 마음으로 치다 제출 전 분리하려 한 것을 까먹은 것 같다.
-> 다음부터는 처음부터 폴더 내부에 css 폴더를 만들고, html을 생성할 때에 css 파일까지 미리 같이 생성해야겠다.
< 2번문제 >
▼▼▼ 하단은 2번 문제에 대한 나의 코드 ▼▼▼
[ HTML ]
<!DOCTYPE html>
<html lang="en">
<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>grid-area 속성을 이용한 레이아웃 배치</title>
</head>
<body>
<div class="grid">
<div class="item header">Header - 높이 150px</div>
<div class="item menu">Menu - 너비 300px</div>
<div class="item main">Main</div>
<div class="item top">Top - 너비 200px</div>
<div class="item middle">Middle - 너비 200px</div>
<div class="item bottom">Bottom - 너비 200px</div>
<div class="item footer">Footer - 높이 100px</div>
</div>
</body>
</html>그리드는 이게 간편 하다.. HTML에서 생각할게 딱히 없다. 그냥 부모자식 컨테이너 뭐시기 같은 것 없이 그냥 들어갈 아이템들 잔뜩 만들고 나중에 css에서 배치한다.
모두 같은 색상과 폰트 정렬, 폰트 굵기를 가지고 있기에 item이란 클래스로 묶어줬다.
개별로 설정된 높이와 너비 값이 다르기 때문에 각각의 클래스도 따로 주었다.
id와 class의 호출 방법이 달라 혼돈이 생길까 간편하게 모두 class로 통일 하였다.
나중 큰 프로젝트를 들어가게 되면 id와 class를 구분해 혼용하게 될지는 아직 잘 모르겠다.
[ CSS ]
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
height: 100vh;
grid-template-rows: 150px repeat(3, 1fr) 100px;
grid-template-columns: 300px 1fr 200px;
grid-template-areas:
"header header header"
"menu main top"
"menu main middle"
"menu main bottom"
"footer footer footer";
grid-gap: 5px;
}
.item {
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.header {
grid-area: header;
}
.menu {
grid-area: menu;
}
.main {
grid-area: main;
}
.top {
grid-area: top;
}
.middle {
grid-area: middle;
}
.bottom {
grid-area: bottom;
}
.footer {
grid-area: footer;
}
웹페이지에 꽉 들어차 있어 일단 padding과 margin을 0으로 설정하여 초기화를 해주었다. margin만 해주어도 됐겠지만 혹시몰라 일단 둘 다 넣었다. 그래야 브라우저의 기본 값을 리셋하여 원하는 결과물을 내는데에 혼동이 없을 것 같았기 떄문이다.
먼저 상위 태그인 그리드에 높이를 주어 화면을 가득차게 만들어 주었다.
세로 화면을 가득 차게 할 때에는, %보단 vh의 단위를 사용하는 것이 더 좋다고 한다.
이유는 잘 모르겠으나 애초에 vh가 그런 용도의 단위이니 더욱 적당하겠단 생각이 들긴 한다.
사실 이 부분에서 시간을 많이 잡아먹었다.
조건에 repeat 활용이 있었고, 분명 탑 미들 바텀이 세개이고 값도 같아 거기가 repeat을 활용하는 곳 같은데,,,
높이도 아니고 너비가 같으면 repeat을 넣을 필요가 없는데?! 하며
글만 읽고 높이 비율이 같은 그림은 못읽어서 예상보다 오랜 시간을 헤멨다.
초반 repeat을 대체 어디에 쓰란건지 모르겠어서 template areas에 첫 줄 head가 세개라 그걸 repeat으로 작성하려 하는 등
repeat의 기능만으로 연상되는 이상한 방법들로 다양하게 활용해 보다가 다른데는 먹히지도 않고 그리드의 비율이 자꾸만 이상하게 나오길래 혹시 rows와 columns를 헷갈린건가 싶어 계속 값을 다시 바꿔보고, 중간 값에 minmax 부터 별의 별 것 다 넣다가 다시 fr로 돌아왔다.
알고보니 repeat을 rows가 아닌 columns에 작성한 것과, repeat을 잘못 활용한 것이 복합적으로 작동해
일어난 문제였다.
초반 rows와 columns을 혼동한 줄 알고 값을 뒤바꿨는데, 뒤바뀐 것을 되돌리지 않은채 repeat이 잘못 들어가게 되어 뭘 바꿔도 이상한 결과가 나왔던 것이다 ㅋㅋㅋㅋㅋㅋ,,, 허망하고 웃기고 재밌다.
애초에 repeat의 위치가 잘못들어가 이상했던것을 repeat에 들어간 값의 문제인줄 알고 리핏되는 횟수를 적는 칸의 숫자를 하나 줄였는데, 그것 때문에도 다시 뒤 바꾼 rows의 값에도 원하던 결과가 나오질 않았던 것이다.
이런 사소한 실수 두개도 복합적으로 일어나면 정말 오류찾기가 괜히 복잡해 질 것 같다.
근복적인 이유는 사실 단순한데 표현은 다양하니까, 유추해내는 것도 컴퓨터의 작동원리를 이해하는데 도움이 되는 것 같다. 이런 상황에서 너는 이렇게 작동하는구나, 어떠한 것을 먼저 두는구나 하는 것을 알 수 있는기회가 되어 좋은 것 같다.
지금은 학생이니까 잔뜩 틀려보고 실험해봐가며 다양한 용법들을 깨우치고 컴퓨터와 친해지는 시간을 가져야 겠다.
실수를 통해 사람은 성장한다더니 오히려 더 많은 것을 알고 깨닫게 된 것 같아 재미있었다.
앞으로 헷갈릴 때는
1. 의심되는 코드들 주석처리를 통해 문제 부분 찾아내기
2. 개념 한번 다시 확인해보기 (mdn 참고)
3. 수정하기
이러한 루트로 진행해야 겠다.
[ 결과물 ]
1번의 경우에는 페이지를 확대 축소 시에도 비율이 유지되었지만 이번엔 확대 축소 시 일정 부분은 고정되어 변하지 않고 특정 부분만 유동적으로 값이 변하는 형태였다.
1번은 상대값인 fr로 설정한 비율로 값을 주어 전체 비율이 유지되었지만, 2번은 고정값인 px를 써서 상대값인 fr값을 준 부분만 유동적으로 값이 변했다.
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅