플러닝 Flearning

아이스크림으로 배우는 CSS 포지셔닝 본문

최신 기술 트렌드/HTML & CSS

아이스크림으로 배우는 CSS 포지셔닝

플러닝 2016.08.31 18:46

아이스크림으로 배우는 CSS 포지셔닝





이 글은 "CSS Positioning Explained By Building An Ice Cream Sundae" 기사를 번역한 것입니다.


(출처: https://medium.freecodecamp.com/css-positioning-explained-by-building-an-ice-cream-sundae-831cb884bfa9#.1a0edeb7k)













아이스크림 선데이를 만들어 본 적이 있나요? 


그렇다면 CSS를 배우는데 문제 없을 것입니다!


CSS 포지셔닝은 처음에는 이해가 안되더라도 몇 번의 시도와 실수를 겪고나면 어렴풋이 이해할 수 있습니다.



이 글을 읽고나면 헷갈렸다고 느꼈던 것들을 완전히 해결될 것입니다.


CSS 포지셔닝은 아이스크림 선데이를 만드는 것과 명백하게 관련이 있기 때문에,


아이스크림 선데이에 비유해서 설명해보겠습니다.



다음 포지션 특성들에 대해서 다뤄보도록 하겠습니다


  • Absolute

  • Static (default)

  • Fixed

  • Relative












좀 더 명확한 설명을 위해서, 아이스크림 선데이는 4가지 요소로 이루어져있습니다.


  • 유리컵 (glass)

  • 아이스크림 스쿱 (ice cream scoops)

  • 휘핑 크림 (whipped cream)

  • 체리 (cherries)






HTML과 아이스크림 선데이


아이스크림 선데이의 구조를 HTML로 써보면, 아래처럼 나타낼 수 있습니다.












혹은 그림 형식으로는 아래처럼 나타낼 수 있습니다.













CSS 설명으로 바로 들어가기 전에 우선 몇 개의 특징을 얘기해보자면,


아이스크림 스쿱의 개수는 유리병의 높이에 제한되어있습니다.


그렇기 때문에 아이스크림 스쿱을 무한으로 쌓아올릴 수는 없습니다.



체리는 원하는 위치에 어디든 넣을 수 있습니다. 


체리는 쌓아올린 아이스크립 스쿱의 위치나 규칙에 따르지 않아도 됩니다.


크기가 작기 때문에 구석구석에 아이스크림이 없는 위치에도 넣을 수 있습니다. 


그리고 많은 체리를 넣어도 아이스크림 스쿱의 순서에는 영향을 주지 않습니다.



휘핑크림은 아이스크림 스쿱의 개수와 상관없이 항상 맨 위에 올려집니다.


중간에만 휘핑크림이 들어간 아이스크림 선데이는 없으니까요.







Position Relative / Static: 유리컵과 아이스크림 스쿱



사진에서 본 것처럼, 아이스크림 스쿱은 다섯개까지만 쌓아올릴 수 있습니다.


예를 들어서, 그 높이가 500 픽셀이고 아이스크림 스쿱은 각각 위에 쌓아진다고 해보겠습니다.


fullSundae div의 높이는 500px입니다. 


이를 통해서 아이스크림 스쿱은 5개까지만 허용된다는 것을 알 수 있죠.


이것이 바로 default position, static의 예시입니다.


높이는 유리컵 div와 관련되있지 않다는 것을 나타낼 때 사용합니다.



다음으로는 iceCreamScoop의 높이를 100px로 지정하는 것입니다.


그렇게 했을 때 fullSundae div의 높이에 맞기 때문입니다.


glass div는 300px입니다.


5개 중 3개의 스쿱이 들어있고 모든 스쿱은 그 높이가 일정하기 때문에,


glass div는 fullSundae div높이의 60%라는 것을 알 수 있습니다.


여기서 position relative를 줍니다!


glass div를 position relative를 줘서 높이를 60%로 설정할 수 있습니다.


퍼센트는 500px로 설정된 container div의 높이에 상대적인 수치입니다.


여기서 더 나아가서 glass div안에 각 iceCreamScoop을 position relative를 주면, 


각 scoop은 glass div의 높이를 기준으로 그 높이가 계산됩니다.


glass는 3개의 scoop이 들어가기 때문에, 각 scoop의 높이는 33.3%가 됩니다.


이걸 코드로 보여드리겠습니다.













Position Fixed: 휘핑 크림 (Whipped Cream)



Position fixed는 가장 쉬운 요소로, 다른 것들에 상관없이 항상 위치가 정해져있습니다.


아이스크림에서 보면, 휘핑 크림이 position fixed 요소입니다.


아이스크림 스쿱의 개수와 상관없이 휘핑 크림은 항상 그 맨 위에 있습니다.


휘핑크림은 containing div가 아니라 전체 body를 기준으로 합니다.













휘핑 크림은 아이스크림 스쿱과 독립적인 요소입니다. 


휘핑 크림의 양은 스쿱의 최대 개수에 영향을 주지 않습니다.



머리글과 꼬리말이 position fixed인데요, 


페이지나 div를 스크롤해도 항상 그 자리에 고정되어 있습니다.







Position Absolute: 체리 (Cherries)



이걸 제일 마지막에 설명하는 이유가 있는데요,


너무 자주 사용하면 코드를 유지하기 힘들기 때문입니다.


체리를 예를들어 설명해보겠습니다.



체리는 아이스크림 선데이에 아무데나 넣을 수 있습니다.


맨 위에 여러개를 올려도 아이스크림은 무너지지 않습니다.


혹은 유리병안에 넣든 안넣든 똑같은 양의 ice cream을 담을 수 있습니다.


체리는 position static과 position relative 요소와는 다른 규칙을 따릅니다.


또한, 다른 요소에 영향을 주지 않고도 없앨 수 있습니다.



이것이 바로 position absolute의 주요 특징들입니다.


Position absolute 요소는 다른 요소의 위치에 방해를 하지 않지만, 그 위치를 분명하게 정해야합니다.


그렇지 않는다면, body의 왼쪽 상단으로 가게 됩니다.


혹은 둘 중 하나의 parent가 position relative라면, 그 div의 왼쪽 상단으로 가게 됩니다.













여기 체리가 들어있는 선데이가 있는데요,


체리를 유리컵 안 이곳 저곳에 넣었지만, 다른 요소의 흐름에는 방해가 되지 않습니다.


하지만 체리는 아이스크림 스쿱과 다르게 쌓아올릴 수 없습니다.


반드시 각 위치를 분명하게 정해주어야 합니다.



Position absolute는 가장 가까운 position relative인 parent를 기준으로 계산이 됩니다.


만약 position relative인 parent가 없다면, 전체 body를 기준으로 계산이 됩니다.


그래서 위에 경우, 유리병 안에 체리는 fullSundae div가 아닌 glass div의 높이에 따라 위치가 정해지는 것입니다.



이제 가서 연습해보세요! 그럼 조금 더 익숙해지실 것입니다.


저작자 표시
신고
0 Comments
댓글쓰기 폼