Daily Pogle

로그인 화면을 보면 전체 웹사이트 중앙에 위치해 있다. 이를 구현하기 위해 필요한 옵션들은 다음과 같다. 1. display: flex 2. justify-center: center 3. align-item: center flex 는 flexible box 를 의미합니다. flex 는 안의 요소의 크기가 불분명하거나 동적인 경우에도, 사용자가 편하게 각 요소들을 정렬할 수 있는 효율적인 방법을 제공한다 flex 는 container 와 item 이라는 두 가지 개념으로 나누어진다 container 는 item 들을 둘러싸고 있는 부모 요소입니다. 따라서 각 item 들을 정렬하기 위해서 container 가 필요하다.. 또한 container 에서만 적용되는 속성이 있고 item 에서만 적용되는 속성이 ..

CSS 에서 다양한 요소를 수직으로 배치하는 것이 아닌 수평적으로 배치하기 위해서 2가지 방법을 사용합니다. 첫번째는 display: inline-block; 을 사용하여 block 요소를 inline-block 요소를 변환합니다. 두번째는 float: left 등을 사용하여 각 요소에 float 속성을 부여하는 것입니다. 이를 이해하기 위해서 display 의 속성들과 float 속성에 대해서 정리하고 비교하려 합니다. [ display 속성 ] HTML 의 요소들은 모두 display 의 속성을 가지고 있습니다. 각 HTML 요소들은 두가지 display 속성을 가지고 있습니다. 1) display 속성 : block , , , , , 등 block 은 말그대로 '블럭'의 의미를 가지고 있어서 요소들..