개발 개맛집

Flex Box를 배우려고 한 이유 Flex Box는 Box와 Item들을 행과 열로 자유롭게 배치할 수 있는 CSS의 꽃이라고 할 수 있다. 웹사이트의 레이아웃을 구성하는데 대부분을 Flex Box를 사용하면 좋다고 멘토님께 들었다. 그전에 내가 만든 웹사이트는 Flex Box를 쓰지 않고 죄다 position, float를 이용하여 때려 넣었는데 그러다 보니 하나의 아이템 수정 시 다른 부분이 틀어지는 일도 많았고, 코드 양도 많았다. 멘토님께서 Flex Box를 쓰면 코드를 줄일 수 있고, 자유롭게 배치할 수 있는 이점이 있어서 무조건 필수적으로 알아야 한다고 했다. 그래서 정리해보는 Flex Box 내용이다. Flex Box의 이해 1. container 박스에 적용되는 속성이 존재한다. 2. 각..

(1) display display: block: 가상의 가로 줄에 하나만의 상자만이 나타남 display: inline-block: 가로 줄에 여러 상자가 나타남, 지정한 사이즈 적용 됨 display: inline: 내용이 아무것도 없으면 나타나지 않음, 부모에서 정의해줬던 것은 무시하고 inline태그에서 설정한 내용을 표기 (2) position position은 기본적으로 static 역할을 한다. position을 이해할 때 어떤것이 기준이 되는가를 생각하면 이해하기 쉽다. posion: static : 기본이 되는 고정역할이다. 그래서 left:20px, top20px이 먹질 않는다! position: relative -> container에 포함된 박스 기준으로 20px, 20px이 적용 ..