[초보자들] S68 스터디 1회차 후기

디기딩~디기딩~? 제대로된 HTML과 CSS를 이해를 위한 스터디! 초보 개발자도 잘하고 싶다 퍼블리싱!!
S68 스터디를 참여한 dimanche는 무엇을 느꼈을까요?

너 자신을 알라, css고자의 법칙

하루종일 핸드폰과 컴퓨터를 통해 많은 웹사이트를 보게됩니다. 그리고 ‘이 정도 디자인은 따라할 수 있겠다’ 라고 생각을 합니다.
‘자, 이제 심플하고 간지나는 웹사이트를 만들어볼까?’

‘하하하하하!!!!! 하……..
사실 이때까지 간단하다 생각한 디자인 조차 마음대로 그려진 적이 없었습니다. 그럴 때마다 컴퓨터 탓을 하고 있었습니다. ‘얘가 이상한거야.’라고.. 하지만 저는 알고 있습니다.

‘내가 css 고자구나.’

제 코드는 일관성 있게 엉망이었습니다. css고자인 저에겐 엄청난 법칙이 있었으니…

• 법칙 1, 엄청난 개수의 〈div〉 태그 남발. 일단 공간을 쓴다 싶으면 〈div〉부터 사용!
• 법칙 2, 복붙을 통한 모르는 css 속성 남발. 뭐가 뭔지는 모르겠지만 제대로 나오는 것 같으니 일단 복사!
• 법칙 3, 작은 수정에도 무너져버리는 구조. 하나만 바꿨을 뿐인데 왜 모든게 바뀌는거지?(나비효과?)

이제 이 스터디를 통해 cssnist(?)가 되어보려합니다.

컴퓨터야 잘 좀 그려봐..

‘컴퓨터야. 예쁘게 그리면 돼… 왜 이걸 못하니?’

‘아.. 그렇구나…ㅠㅠ’

컴퓨터는 화면을 어떻게 그리는 걸까요?
컴퓨터 그래픽스는 화면에 점을 찍어 표현을 합니다. 그래서 우리는 컴퓨터에게 점의 좌표 값과 가로, 세로 크기와 색상 등의 수치를 주고 점을 찍을 수 있습니다. 하지만 이렇게 하나하나의 수치를 확정지어 그리게되면 수정을 해야할 상황에 울고 싶어집니다.

그리하여 css는 context 상태에 따라 변화할 수 있도록 추상적인 개념들(%, left, right, top, block, inline, float 등..)과 컴포넌트(button, img, div, textarea 등..)를 제공해주고, 컴퓨터는 알아서 척척 복잡한 계산을 하고 화면에 그려줍니다.
이런 여러가지의 기능을 제공하고 있는데 왜 제가 그린 화면은 엉망이 될까요?

컴퓨터는 우리가 작성한 텍스트를 해석해 영역을 나누고 그 영역을 채워나갑니다. 그리고 html과 css는 이를 손쉽게 할 수 있도록 많은 것들을 제공해 줍니다. 하지만 저는 이를 제대로 알지 못한 채 작성된 코드를 컴퓨터가 알아서 잘 해석해주길 바라며 코드를 작성해왔습니다.
더 이상 컴퓨터에게 제 생각을 읽어달라고, 제 마음을 알아달라고 바라지 않겠습니다.

네가 있어야할 곳은 여기야~? (feat.god)

원하는 화면을 구성하기 위해서 첫 번째로 해야하는 것은 무엇일까요? 바로 Geometry입니다.
Geometry란 영역을 확보하는 행위를 말합니다. 즉 내가 원하는 컨텐츠를 배치할 영역을 잡는 것입니다.

html 코드를 작성할 때 우리는 여러가지 태그를 사용합니다. 그 태그마다 얼만큼의 영역을 잡는지를 알기 위해 display 속성에 대해 배웠습니다.
display 속성의 값 중 block과 inline이 있습니다.
display 값이 block인 대표적인 태그는 제가 자주 쓰던 〈div〉입니다. 이는 부모가 허용하는 가로의 공간(가용공간)을 다 차지합니다. 그래서 여러개의 〈div〉 태그를 사용하면 한줄 한줄 그려집니다.

display 값이 inline인 대표적인 태그는 〈span〉입니다. 이는 자식 요소나 내용에 대해 공간을 차지합니다. 그래서 가용공간에 들어갈 수 있는한 일렬로 나열되어 그려집니다. 지금 제가 쓰고 있는 이러한 텍스트처럼 말이죠.

책의 예제와 실장님의 설명을 통해 ‘아하!!’하고 있는 것도 잠시 float가 나타납니다.
float는 둥둥 떠있다는 뜻입니다. 이게 도대체 무슨 말인가요…….?
block과 inline는 geometry상의 공간을 점유하고 있어서 실체가 있다고 얘길합니다. 그에 비해 float 속성은 geometry상의 공간을 차지하지 않아 실체가 없이 둥둥 떠있다는 것입니다.
그렇다면 block과 float을 같이 쓴다면 어떻게 될까요? block은 float를 인식하지 못하고 같은 가용공간에 둘을 아래의 그림과 같이 나타나게됩니다.

하지만 inline은 좀 다릅니다. block은 float에 대해 모르쇠로 일관하고 있는 반면 inline은 float의 영역을 가이드 영역으로 판단하게되고 inline이 그려지는 가용공간에 변화가 생깁니다.

이 것이 영역을 잡아가는 기본적인 내용일 것입니다. 이를 제대로 알지 못하고 넘어간다면 앞으로 더더욱 어렵겠죠…?
이렇게 배운 내용을 통해 앞으로 영역을 나누는 연습을 많이 해야겠습니다.

나는 개자이너가 될거야!

이번 스터디에서는 제가 글을 통해 언급한 내용뿐만 아니라 semantic tag, style sheet, Ruleset, selector, class, cascading 등의 많은 개념들에 대해 알려주셨습니다.
스터디를 듣기 전의 저의 css 공부 깊이는 수박 겉핥기식이라고 표현하는 것보다 더 얕은 수준이었음을 알았습니다. 누군가가 작성해 놓은 코드들을 복사해서 쓰며 어쩌다보니 그럴싸하게 그려진 화면을 만들었으니까요.

컴퓨터 사이언스의 정보는 점진적입니다. 앞을 알지 못하면 뒤를 알 수 없습니다. 그래서 기본적인 부분부터 누구에게나 설명가능한 수준으로 알아야합니다. 이를 자꾸 잊어버리고 어려운 순간 그냥 지나쳐가는 실수를 반복하지 않기를 바랍니다.
그리고 언젠가는 개발뿐만 아니라 퍼블리싱도 잘하는 개자이너(개발자+디자이너)를 욕심내봅니다.

‘빠밤빠빠밤빠빠밤빠 빠바바밤 그래 결심했어!’

dimanche | bsidesoft 신입사원
좋은 개발자가 뭔지도 모르고 좋은 개발자가 되고 싶은 초보 개발자입니다.
회사에서는 열심히 교육받고 발전하는 운 좋은 개발자로 일하고 있습니다.