with with

화면에 딱 맞게 디자인하다보면 가끔 padding을 줄 때 박스가 화면을 벗어나는 경우가 있다. width: 1000px의 body에 width: 1000px의 div를 넣는다고 가정해보자. 화면에 딱 맞게 디자인 되었을 것이다. 여기서 text를 가장자리에서 좀 띄어놓고 싶어서 padding: 100px를 주었더니, div가 화면 밖으로 빠져나가버렸다. 이를 해결할 방법은 box-sizing: border-box속성을 주는 것이다. 마법같이 해결된다. 이 마법(?)을 이해하려면 padding의 원리부터 알아야 한다. 1000px의 박스에 200px의 padding을 주면 css는 기존 박스의 크기를 유지하기 위해 200px만큼 박스를 늘리게 된다. 즉 전체 박스의 크기는 1200px가 되는 것이다. 이..

열심히 클론코딩 하며 공부를 하고 있었다. 그냥 똑같이 만드는건 식상하니까 좀 차별화 되게 만들어보고 싶었다. 하지만, 바로 문제가 생겨벼렸다... (2시간 넘게 고민해보고 안되서 그날은 공부 포기하고 쉬었던...ㅜ) 바로 원치않게 화면의 요소가 앞으로 튀어나온 나온 것이다! 분명 다른데에선 이런 문제가 없었는데 이 페이지에서만 이랬다. 결국 앞으로 나온 부분들의 css를 찾아 조사해본 결과 기존 잘 되었던 페이지들과 차이점이 있었다. 바로 opacity, position 속성을 준 것이다. 냉정하게 오류난 부분이 기존의 것과 뭐가 다른지 알아내니까 원인을 찾기 쉬워졌고, 결국 찾아냈다. z-index 속성과 관련된 natural stacking order 문제 때문이었다. 문제를 설명하기에 앞서 pos..