디기딩~디기딩~? 제대로된 HTML과 CSS를 이해를 위한 스터디! 초보 개발자도 잘하고 싶다 퍼블리싱!!
S68 스터디를 참여한 dimanche는 무엇을 느꼈을까요?
매의 눈
이번 스터디는 지금까지 배운 것을 토대로 chapter3의 예제를 해보는 것이었습니다.
<chapter3의 예제의 화면 디자인>
화면의 크기에 따라 변하는 레이아웃을 고려해 기본 구조를 만들고 내부를 채워나가는 방식의 퍼블리싱을 실습했습니다.
우리가 만들어야하는 페이지의 디자인을 살펴보니 화면에는 10가지의 컨텐츠가 있었습니다.
- 사이트 이름
- 내비게이션 메뉴
- 기사의 분류
- 기사
- SNS 공유 버튼
- [관련 기사] 메뉴
- [특집 기사] 메뉴
- [추천 기사] 메뉴
- [인기 기사] 메뉴
- 저작권
시력 9.0을 장착하고 좀 더 자세히 살펴볼까요???
상단에 있는 사이트 이름과 내비게이션 메뉴는 화면의 크기가 변해도 상단에 고정된 채로 있습니다.
기사의 분류에는 태그 형태로 내비게이션 메뉴와 기사 사이에 있고 기사에는 타이틀, 아이콘, 날짜, 이미지가 보입니다.
SNS 공유 버튼에는 twitter, facebook, google+가 있습니다.
관련기사는 4가지가 있는데, 화면크기가 작아지면 2가지씩 묶여 세로로 배치됩니다.
특집, 추천, 인기 기사는 기사의 오른쪽에 세로로 쪼르르..있는데, 화면이 좀 작아지니 관련기사 아래로 내려가고 2단으로 배치가 되었네요. 더 작아진 화면에서는 다시 1단 배치로 되구요.
마지막으로 화면의 최하단에는 저작권이 표시되었습니다.
저는 이 정도로도 ‘엄청 자세하다’라고 생각했습니다. 하지만 아직 제 눈은 아직 부족한지.. 놓친 부분들이 있더군요.
스터디를 할 때, 지금은 우리가 만들 것이 무엇인지를 볼 때 아주 중요한 점이 있습니다.
1회부터 지금까지 스터디에서 실장님께서 하시는 말씀! 그 것은 바로 매의 눈으로 바라봐야하는 것이죠.
그냥 눈은 안돼. 매의 눈 가동!
매의 눈을 가지신 실장님께서 놓친 부분을 채워주셨습니다.
바로 화면이 작아지면 SNS 공유 버튼의 SNS 명이 사라지는 것, 추천 기사 이미지 위의 타이틀, 기사 안의 서브타이틀 왼쪽의 파란띠 등이 더 있었습니다.
이렇게 하나하나 꼼꼼하게 보는 연습이 필요할 것 같습니다ㅠㅠ
우리가 만들 화면을 자세히 보았다면, 이제 레이아웃 기본 구조를 만들 차례입니다!
레이아웃의 기본 구조
화면에 요소는 박스모델로 공간을 확보하고 계산된 위치에 그려집니다. 그래서 요소들을 박스로 그룹지어 배치해보겠습니다.
<덩어리 만들기>
페이지의 요소들을 큰 덩어리로 분류했습니다.
사이트 이름과 내비게이션 메뉴는 각각의 덩어리로 box1과 box2로 보고,
기사의 분류, 기사, SNS 공유버튼, [관련 기사] 메뉴는 화면의 크기가 변해도 이들 사이의 배치가 변하지는 않아 한 덩어리 box3 분류했습니다.
[특집 기사] 메뉴, [추천 기사] 메뉴, [인기 기사] 메뉴도 한 덩어리 box4로 묶고, 마지막으로 하단에 고정된 저작권을 box5로 봅니다.
이렇게 총 5개의 box가 보여지게 되었습니다. 우리가 만들 화면 디자인을 봤을 때 box1, box2, box5는 화면의 크기가 변해도 각자의 위치를 지키고 있었습니다. 하지만 box3과 box4는 화면의 크기에 따라 둘의 위치가 달랐죠.
PC 화면(화면이 클 때)에서는 box3과 box4가 가로 정렬되고, 모바일 화면(화면이 작을 때)에서는 box3과 box4가 세로 정렬되어야합니다. 그래서 이 둘을 boxA로 그룹화 하여 상황에 맞게 가로/세로 정렬을 하도록 했습니다.
어떻게요??? 미디어 쿼리를 사용해 화면의 너비가 768px 이상일 때 box3, box4에 float 속성을 주는 것입니다!
<코드 링크> 클릭해보세요~
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chapter3</title>
<style>
.box1{background:#f00}
.box2{background:#0f0}
.box3{background:#00f}
.box4{background:#ff0}
.box5{background:#f0f}
@media(min-width:768px) {
.boxA:after {
content: '';
display: block;
clear: both
}
.box3 {
float: left;
width: 70%
}
.box4 {
float: left;
width: 30%
}
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="boxA">
<div class="box3">box3</div>
<div class="box4">box4</div>
</div>
<div class="box5">box5</div>
</body>
</html>
쨔잔~ 기본 레이아웃 구조를 완성했습니다. 이제 각 박스마다 내용을 넣고, css로 디자인을 완성하는 일만 남았습니다.
변화율
기본 레이아웃을 만들고 난 후 각 박스에 css로 하나씩 디자인을 입혀갔습니다. 그러다보면 css 코드 양이 어마어마하게 늘어나게될 것입니다.
그런데!! 디자인을 수정해야한다면? 레이아웃이 변경되어야한다면? 엄청나게 늘어난 코드들을 완벽히 기억하고 수정할 수 있을까요?
이러한 변화에 대응하기 위해 필요한 개념이 있습니다. 그 것은 바로 변화율입니다.
변화율이란 변화하는 정도, 빈도를 말합니다. 이 변화율이 비슷한 것들끼리 묶어놓게 되면 변화할 때 한꺼번에 관리할 수 있어서 유지보수가 쉬워질 것입니다.
.menu ul li{float:left;width:auto}
.menu ul li a{display:block;padding:5px;color:#000;font-size:14px;text-decoration:none}
.menu ul{margin:0;padding:0;list-style:none}
.menu ul li a:hover{background:#eee}
.menu ul:after{content:'';display:block;clear:both}
위의 코드는 예제의 css 코드 중 일부입니다. 보시다시피 .menu ul, .menu ul li, .menu ul li a 등 다양한 셀렉터들이 사용되었습니다. 이 코드를 관리가 쉽도록 작성한다면 어떻게 할 수 있을까요?
.menu ul{margin:0;padding:0;list-style:none}
.menu ul:after{content:'';display:block;clear:both}
.menu ul li{float:left;width:auto}
.menu ul li a{display:block;padding:5px;color:#000;font-size:14px;text-decoration:none}
.menu ul li a:hover{background:#eee}
위에서 언급한 변화율을 생각해 비슷한 셀렉터들끼리 묶어 격리를 시키고, 위에서 아래로 내려올 수록 복잡한 셀렉터들이 있도록 계층형으로 정리할 수 있었습니다.
변화율에 대한 설명을 들을 때, 실장님과 같이 코드를 정리할 때의 저는 ‘아하! 그렇구나! 변화율에 따라 격리시키는 거구나!’라는 생각이 들었습니다. 하지만 사실 변화율이 비슷한 것들끼리 묶어놓는다는 것이 어떤 것인지는 아직은 잘 모르는 것 같습니다. 관리를 위한 코드 작성을 위해 변화율을 항상 생각하고 인식하는 연습을 꾸준히 해보아야 할 것입니다.
원칙의 효과
스터디 중간 중간 실장님의 말씀을 경청하며 실습 코드도 작성하느라 정신이 없었습니다.
css를 작성하는 그 때 셀렉터와 중괄호 사이의 공백은 없애고, 속성의 키와 값을 구분하는 세미콜론은 마지막에 붙이지 않는다는 말씀을 해주셨습니다. 그렇게 작성하는 이유는 방어적 코딩, 즉 코드에 예외가 없도록 작성하기 위함이라고 하셨습니다.
하지만 정신없는 상황의 저는 이 것이 ‘사소한 것이니 일단 넘어가자’라는 생각이 들었습니다.
제 마음의 소리가 들리신 건가요? ‘사소하다 싶지만 사소하지 않다!’라고 하시는 말씀에 뜨끔했습니다.
개발 코드를 작성할 때 우리는 여러가지 통제를 받습니다. 사람이 코드를 작성하기 때문에 사람끼리의 약속으로 통제를 받죠.
그 중 하나가 원칙입니다.
원칙이란 무엇일까요? 검색을 해보니, 어떤 행동이나 이론 따위에서 일관되게 지켜야 하는 기본적인 규칙이나 법칙이라고 사전에 나와있네요. 무슨 말인지 한번에 이해하기가 어렵네요.
그래서 저와 같은 사람들의 이해를 돕기 위해 한가지 예를 들려주셨습니다.
교장 선생님의 훈화 말씀 시간입니다. 우리는 다들 운동장에 줄을 맞춰 서서 말씀을 듣습니다.비오는 날은 교실에서 방송으로 듣기도 했지만..
이 때 우리는 왜 줄을 맞춰 서서 있나요?? 이 것이 바로 학교 내에서 교장 선생님 훈화 말씀 하실 때의 원칙이기 때문입니다.
그렇다면 이 원칙을 다같이 지켰을 때 무엇을 얻을까요?
만약 교장 선생님 훈화 말씀 시간에 누군가 머리채를 잡혀 끌려가는 아주 긴급한 상황이 발생했습니다. 다들 원칙을 지켜 줄을 맞춰 서있다면, 긴급한 상황 또는 원칙에 어긋난 상황을 즉시 알 수 있게됩니다.
원칙을 지키지 않고 있었다면, 아마도 저 상황이 문제가 된다는 것을 몰랐거나 뒤늦게 발견했을 것입니다.
<긴급 상황 발생!>
코드를 작성할 때도 원칙이 있습니다. 이를 Coding Convention이라고 합니다.
어떻게 코드를 작성할 것인지 원칙을 만들어 놓는다면, 그 원칙에 어긋난 것을 보자마자 버그라는 것을 알 수 있을 것입니다.
사소하다 생각하고 넘기려 했던 것들이 사실은 저희 회사의 원칙이었습니다. 이 중요한 원칙을….. 다시는 무시하지 말아야겠습니다.
빈익빈부익부
스터디의 1~4회에는 거의 이론 수업으로 진행되어왔지만, 이번 5회차는 실습 위주였습니다. 이론 수업에서 용어를 알아가고 이해하는 것이 처음엔 어렵기도 하고 빨리 책장을 넘기고 싶은 마음도 들었습니다. 5회차에서 실습을 하면서 어려웠던 개념이 용어 하나로 설명이 되고, 이해할 수 있게 되는 순간 앞의 긴 이론 수업이 얼마나 중요한지 느끼게 된 듯합니다.
새로운 것을 학습할 때 우리는 기존의 지식들을 활용합니다. 만약 가진 정보가 빈약하다면 새로운 정보에 따른 연결도 힘들 수 밖에 없습니다. 기본 지식이 부족하면 잘 이해하지 못하고, 잘 이해하지 못하면 기억을 하기 힘들고, 기억을 못하면 지식이 줄어들고, 지식이 줄어들면 다음 것 또한 이해하지 못하게됩니다. 그래서 지식이 많은 사람은 자신이 가진 지식을 활용해 잘 이해하고 잘 기억하고 지식이 늘어나죠.
이것이 지식의 빈익빈부익부 현상입니다.
그래서 기초 지식이 부족한 초보인 저는 반드시 이를 극복해야 합니다. 그렇지 않은 상태로 다음 단계로 진입하는 경우 다음의 새로운 정보마저 습득하지 못하게 되니까요.
우리는 이번 스터디에서 변화율, 원칙의 중요성 이외에 노멀라이즈, 폰트, 박스모델을 이용한 공간 확보, TRBL, 중복 제거 등의 새로운 지식을 배웠습니다. 이를 꼭 이해하고 저의 지식으로 만들어야겠습니다.
—S68 스터디 5회차 스터디 자료 공유
스터디 영상 1/2
스터디 영상 2/2
dimanche | bsidesoft 신입사원
좋은 개발자가 뭔지도 모르고 좋은 개발자가 되고 싶은 초보 개발자입니다.
회사에서는 열심히 교육받고 발전하는 운 좋은 개발자로 일하고 있습니다.
recent comment