첫 강의의 두 번째 이론인 CSS 작업 우선 순서이다.
이 글에선 이전 글처럼 배운 이론을 증명하거나 참조할만한 사이트를 공유하긴 어렵다. 본인이 이해한 내용은 어떠한 이론을 기반하여 설명했다기 보단 강사님의 실무 경험에 의한 이론 같다.
본인은 기존에 작업할 때는 레이아웃(마크업)을 전부 만들고 위치를 잡아가면서 작업했다면 강의에서는 가장 큰 레이아웃부터 만들기 시작한다. 그전에 어떤 결과를 만들어야 하는지 알아야 이해하기 쉬울 것 같다.
위와 같은 이미지를 만들 때의 작업 순서라 생각하면 될 것 같다.
1. 큰 틀부터 시작하기
강사님께서 과제 이미지를 보여주시며 본인에게 물으셨다.
저런 웹 사이트를 만들려면 무엇을 먼저 작업해야 하나요?
본인은 당연히 기존에 코딩했던 방식처럼 body 요소의 background-img부터 작업해야 한다.라고 답했다. 강사님은 가장 큰 틀부터 시작해야 한다. 말씀하셨는데 처음엔 이해가 안 됐다.
왜냐하면 본인 기준에 가장 큰 틀은 body 요소라 생각했기 때문인데 강사님 기준에선 body의 background-img는 세부적인 내용이고 가장 큰 틀은 프로필 내용을 감싸고 있는 가운데 정렬된 컨테이너(container)라 하셨다. 이해하기 난해할 수 있으니 이미지를 첨부하겠다.
위 이미지처럼 가장 큰 틀을 만들고 가운데 정렬까지 하는 게 제일 먼저 해야 하는 작업인 것이다.
-- 생략 --
<body>
<div class="wrap">
</div>
</body>
-- 생략 --참고로 이다음 작업으로 넘어가기 전에 css 관련 내용을 엄청 이야기했지만 css는 별도로 포스트 하기 때문에 지금은 레이아웃에 집중하겠다.
2. 큰 구역을 나누기
다음으로 할 작업은 큰 구역을 나누는 것이다. 강사님은 본인에게 질문을 했다.
과제 이미지를 보면 크게 나눌 수 있는 구역이 몇 개일까요?
본인은 2개라 했지만 답은 3개였다.
이건 작업하기 나름이라며 실무에서 겪는 trade off(트레이드오프)라 하셨지만 본인은 설득당했다. 그 이유는 header, body, footer처럼 세 개의 큰 구역을 나눈 후 작업하는 게 좋다.라는 말씀을 반박하기 어려웠다. 궁금해서 어느 웹 사이트를 참조해도 큰 구역을 세 개로 나누는 게 두 개로 나누는 것보다 많은 것 같다.
-- 생략 --
<body>
<div class="wrap">
<header></header>
<div></div>
<footer></footer>
</div>
</body>
-- 생략 --3. 나눈 구역을 시각적으로 표현하여 힌트 얻기
강사님께서 세 번째 작업에 대한 질문을 하셨을 때 본인은 답변을 못 했다. 사실 답변을 못 한 게 아니고 세부적인 작업을 시작하면 되지 않을까?라는 생각이 들었지만 고민해보다 답변을 못 한 거다. 이건 뭔가를 설명하기보단 제목과 똑같기 때문에 이미지로 끝내겠다.
4. 나눈 구역을 하나씩 완성하기
3번까지 만든 후 세부작업을 시작하면 된다. 이론은 여기까지고 이제 월요일 오후 6시 전까지 본인 스스로 과제를 완성해 가야 한다. 리뷰는 과제 끝나고 피드백받은 후 하겠다.
갑자기 끝나서 어이없을 수 있지만 저걸 만들기까지 3시간 약간 넘게 걸렸다. 어떻게 보면 그래서 뭘 배운 거야? 할 수 있겠지만 본인 생각은 다르다. 그 이유는 물고기를 잡아주는 게 아닌 잡는 법을 가르쳐 주기 위해선 그만큼 시간이 들기 때문이다. 앞으로 더 진행해 봐야겠지만 개인적으로 이런 공부 방법을 좋아하는 본인은 좋은 방식인 것 같다. 얼른 과제 만들러 가야지 ㅎㅎ;; 참고로 과제 끝난 후 css 관련 글을 작성하겠다.
'web publishing > CSS-veamcamp' 카테고리의 다른 글
| CSS 첫걸음 - 첫 번째 강의(3) [수정] (0) | 2022.10.09 |
|---|---|
| CSS 첫걸음 - 첫 번째 강의(1) (0) | 2022.10.09 |
