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

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

position

이 때까지의 스터디에서는 static한 녀석들이 Normal Flow방식으로 위치가 계산되어 화면에 배치되었습니다.
하지만 Normal Flow와는 다른 길을 가는 녀석들도 있습니다.
static이 Normal Flow라는 일반적인 길을 가는 모범적인 녀석이라면, 소심한 성격 탓인지 그 길에서부터 조금 벗어난 채 가는 녀석도 있고, 길을 무시한 채 가는 가는 반항아 같은 녀석도 있고, 누가 길을 가던 말던 주저 앉아 가만히 있는 녀석, 가만히 있다가 엄마따라 가는 녀석도 있습니다.

이번 스터디의 내용은 바로 이렇게 자신만의 위치를 정해 가는 녀석들이 무엇을 기준으로 어디로, 어떻게 가는지를 알아보았습니다.

난 나만의 길을 간다 마이웨이 absolute!

css 속성 중 하나인 position은 HTML 엘리먼트들의 위치를 설정할 수 있습니다. 이 속성을 잘 활용할 수 있다면 엘리먼트를 원하는 위치에 배치할 수 있어서 복잡한 레이아웃도 잘 만들 수 있을 것입니다. 하지만 잘 알고 사용한다면 약, 대~충 알았다 싶은 상태로 사용하면 독이될 것 같습니다. 그래서 position 속성에 어떤 값들이 있을까요?
position에는 5가지의 값이 있습니다.

• static
• relative
• absolute
• fixed
• sticky

static은 엘리먼트가 기본적으로 가지고 있는 position 값입니다. 자신의 위치를 Normal Flow대로 계산되어 정해지도록 되어있죠. 이제 static 이외의 값들에 대해서도 알아봅시다!

relative

relative는 어떤 특징이 있을까요?

• Normal Flow에 소속됨
• position으로 위치를 조정할 수 있음
• position이 지정된(offset) 요소의 부모가 될 수 있음
• table elements에는 적용되지 않음

엘리먼트의 position에 relative를 설정하면 Normal Flow에 소속되어 배치가 되지만, 위치를 조정하는 값(top, left, bottom, right)을 주어 기존 위치(Normal Flow에 소속되어 배치된 곳)를 기준으로 움직이게 됩니다.
예가 적당한지는 잘 모르겠지만.. 저는 이 속성 값이 살짝 건들면 길에서부터 벗어난 채 가는 녀석으로 보였습니다. ‘나만 이렇게 생각되는 건가ㅠㅠ?’

그럼 이제 직접 top, left 값을 주어 relative 요소를 움직여 보겠습니다. <<예제 코드 링크>> 클릭!
input 박스 안의 값으로 조정할 수 있어요.

absolute

이번엔 absolute의 특징에 대해 알아보도록 하겠습니다.

• Normal Flow에 소속되지 않음
• 가장 가까운(상위) non static element(static이 아닌 요소)로 부터 위치가 지정됨
• 가장 가까운(상위) non static element(static이 아닌 요소)가 없다면 initial container로 부터 위치가 지정됨

엘리먼트의 position에 absolute를 설정하면 Normal Flow와 상관없이 위치를 조정할 수 있습니다.
그래서 저는 이 속성값이 길을 무시한 채 가는 가는 반항아 같은 녀석으로 보였습니다. 위치를 조정하는 값을 주면 다른 녀석들이 어떻게 배치되건 상관하지 않고 자유롭게 제 갈길 가버려서요.
그런데..relative는 Normal Flow로 배치된 위치를 기준으로 움직인다면, absolute는 어디를 기준으로 움직일까요?

바로 가장 가까운(상위) non static element(static이 아닌 요소)를 기준으로 하거나, 없다면 initial container(body)를 기준으로 위치를 계산하게 됩니다.

‘가장 가까운(상위) non static element(static이 아닌 요소)를 기준으로 한다‘라는 특징을 들었을 때, 아마 저는 ‘아~ 그렇구나~’하고 넘어갔을지도 모르겠습니다. 하지만 이 특징을 이용하면 absolute 요소를 Normal Flow 속의 특정한 영역안에서 자유롭게 배치할 수 있다는 사실을 알게되었습니다. 역시 쉽게 넘어가면 안된다는 것을 또 한번 느끼게 되네요ㅠㅠ

위의 relative 특징 중 ‘position이 지정된(offset) 요소의 부모가 될 수 있음’이 있었습니다.
그렇습니다!!! relative를 이용해 Normal Flow에 소속된 영역을 주고, 그 안에 absolute를 넣어주어 위치 기준을 잡을 수 있습니다. 이를 relative bridge(absolute in normal flow)라고 합니다.

이제 top, left 값을 주어 absolute 요소를 움직여 보겠습니다. <<예제 코드 링크>> 클릭!
input 박스 안의 값으로 조정할 수 있어요.

fixed

fixed의 특징에 대해 알아보도록 하겠습니다.

• Normal Flow에 소속되지 않음
• viewport(display area) bound를 기준으로 배치됨
• 상위 non static element(static이 아닌 요소)의 z-index에만 영향이 있음

엘리먼트의 position에 fixed를 설정하면 Normal Flow와 상관없이 위치를 조정할 수 있습니다. 그리고 기준은 display area bound를 기준으로 offset이 설정되죠. 그러다보니 스크롤이 이동해도 display area에서 움직이지 않고 가만히 있습니다. 우리가 요즘 웹 페이지에서 흔히 보는 navigation bar가 fixed의 대표적인 예입니다. yeah~~~~~~
그래서 저는 이 속성값이 누가 길을 가던 말던 주저 앉아 가만히 있는 녀석으로 보였던 것입니다.

스크롤이 이동해도 움직이지 않는 이녀석. 그럼 fixed의 위치 기준을 바꿀 수는 없는걸까요ㅠㅠ?
가능합니다. viewport의 영역을 지정하면 되는 것이죠!
그래서 실장님이 알려주신 방법으로 iframe 태그를 이용해서 fixed 예제를 만들어보겠습니다. <<예제 코드 링크>> 클릭!
input 박스 안의 값으로 조정할 수 있어요.

위의 예처럼 fixed 값을 가진 요소는 다른 요소들과 겹쳐질 때가 있는데, 그 땐 무조건 fixed가 보일까요??
겹쳐졌을 때 누가 보일지는 요소들의 z-index의 값에 결정이 됩니다.
z-index란, 요소의 z축 상의 위치를 나타냅니다. 즉 이 요소가 화면을 보고 있는 사용자에 누가 더 가깝게 있느냐를 설정해 주는 값입니다.(참고 : MDN문서)

sticky

이번엔 저에게 생소했던 sticky의 특징에 대해 알아보도록 하겠습니다.

• relative + fixed
• relative로 살아있을 수 있는 시간 = viewport bound에 걸리기 전까지
• fixed으로 살아있을 수 있는 시간 = 부모가 살아있는 동안(부모와 공동운명체)

엘리먼트의 position에 sticky를 설정하면 relative position 처럼 동작하다가 viewport bound에 도달하면 fixed position 처럼 동작합니다. 그리고 스크롤되어 자신의 부모 요소가 viewport상에서 사라지면 relative position으로 되돌아갑니다.
백문불여일견! 어떤 것인지 한번 보시면 다들 ‘아~~~’ 하실거에요.
position sticky 보러가기! 클릭!
우리가 핸드폰의 연락처나 사전에서 한번쯤은 볼 수 있었던 레이아웃인데, 이 것이 css만으로 손쉽게 된다는 것이 너무 신기했습니다.

relative와 fixed가 섞인 이 녀석.
이제 요소에 relative와 sticky 값을 주어 어떻게 다른지 직접 보겠습니다. <<예제 코드 링크>> 클릭!
버튼을 클릭 해 요소의 position을 변경할 수 있어요.

꺼야 꺼야 잘할거야 혼자서도 잘할거야~

이번 스터디도 역시 어려웠습니다. 하지만 무엇인지를 알고 실습을 해보는 재미는 다른 스터디때와는 비교도 안될 정도로 즐거웠던거 같습니다. 저만의 생각이지만 position의 값들이 뭔가 각자의 성격을 가진 사람들을 보는 것 같았습니다.
신기했던 sticky도 움직이지 않고 가만히 있길 좋아하지만, 부모가 밖을 나가면 끌려가는 사람을 상상했었죠.

position에 관한 간단한 고찰

총 6회의 스터디 중 벌써 4회가 지나갔습니다. '2번 밖에 남지않았다니ㅠㅠ!!!'
컴퓨터가 화면을 어떻게 그리는지에 대한 내용부터 시작해 staitic한 녀석들이 어떻게 위치를 잡는지, 들어본적은 있지만 잘 알지 못했던 반응형이 무엇인지, position 값에 따라 요소의 위치가 어떻게 전해지는지 등을 배웠습니다.
이번 스터디가 얼마 남지 않았다는 느낌때문인지, 스터디를 시작할 때 가졌던 저의 목표에 얼마나 가까워졌는지를 생각해보게 되었습니다. 목표가 '퍼블리싱을 잘 할거야!'라고 너무 막연하게 잡아놓아서 얼마나 가까워졌는지 알 수가 없었습니다. 조금 더 구체적인 목표가 필요합니다.

예전에 저는 이 책(모던 웹사이트 디자인의 정석)을 읽고 예제를 따라하기에 급급했고, 책과 똑같이 만들어지는 화면을 보며 '오! 할만한데???'라는 자만을 가졌었습니다. 예제 코드를 보고 따라 써놓고 마치 제가 할 줄 알게되었다고 생각했던거죠.
이번에 이런 자만도 할 수 없도록 구체적인 목표를 생각했습니다. 디자인 파일만을 준비해 예제를 보고 따라하는 것이 아닌 저 혼자서 퍼블리싱을 해보는 것입니다. css의 모든 속성을 알고 있지는 않지만, 이미지를 디자인과 동일한 위치에 배치할 수 있게되는 것을 저의 목표로 잡았습니다. 앞으로 남은 스터디에도 열심히 집!중!해서 목표달성을 해보도록 하겠습니다!!

꺼야 꺼야 잘할거야??

---S68 스터디 4회차 스터디 자료 공유(클릭! 클릭!)
스터디 교안 링크

스터디 영상 1/2

스터디 영상 2/2

---

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