CSS-Study

CSS 레이아웃 기술은 저마다 용도가 있고, 장단점이 있으며, 어떤 기술도 독립적인 용도를 갖추도록 설계되지 않았다. 각 메서드가 어떤 용도로 마련된 것인지 이해한다면 해당 작업에 가장 적합한 도구가 어떤 것인지 파악하는데 유리해진다!먼저 내가 페이지 레이아웃을 1도

이번 글에서는 normal flow, 즉 내가 요소의 레이아웃을 변경하지 않았을 시 웹페이지 요소가 자기 자신을 스스로(?) 배치하는 방법에 관해 알아볼 것이다!(대충 스폰지밥이 보통흐름을 설명 하는 짤로 시작하겠다.)보통 흐름은 웹 페이지의 '순정' 이라고 생각하면

이번 글에서는 flexbox를 다뤄보겠다.flexbox는 행과 열 형태로 항목을 배치하는 일차원 레이아웃 메서드이다.flexbox가 없던 시절에 우리는 floats와 position을 가지고 CSS 레이아웃을 대부분 작성했다. 이 둘은 잘 작동했지만, 어떤 면에서는 너

포지셔닝의 큰 개념은 일반적인 문서 흐름을 벗어나 흥미로운 효과를 낼 수 있도록 만들어준다. 예를 들면, 박스의 위치를 보통 흐름 에서 벗어나 위치를 약간 변경한다거나, 박스 위에 박스를 겹치게 한다거나, 스크롤 해도 항상 브라우저 창 동일한 위치에 놓이게 하고 싶다든