display display는 HTML요소들을 어떻게 보여줄지를 결정하는 속성으로, 꼭 알아야하는 속성 중 하나입니다. display속성에는 none, block, inline, inline-block 그리고 grid, flex 등의 다양한 값들이 있습니다. class 이름이 속성값-setting으로 되어있는 모든 요소들은 오른쪽 코드처럼 width와 height의 값을 각각 300px, 200px로 설정해주겠습니다. 코드를 실행하면 다음과 같습니다. block 기본적으로 가로의 길이가 100%로 설정이되며, 한 줄의 하나만 div만 배치됩니다. block-setting이라고 적힌 div를 보면, 우리가 설정했던 길이와 높이의 값이 적용이 되어 표시되는 것을 알 수 있습니다. inline inline값은..
position position 속성은 웹 문서 상에 요소를 배치하는 방법을 지정합니다 static 오른쪽에 보이는 파란화면을 우리가 보는 웹페이지 라고 가정하겠습니다. 모든 웹 요소들은 기본적으로 postion값이 static 입니다. static의 경우, css를 다음과 같이 작성하면, 노랑 파랑 초로순서로 쌓입니다. relative position 값이 static 일 때의 위치를 기준으로, 웹 요소들의 위치를 변경하고 싶을 때, 값을 relative로 설정합니다. right 50px이 적용된 노랑 div는 static 속성일 때의 상태를 기준으로 오른쪽으로 50px 만큼 떨어져 있고 left 50px은 왼쪽으로 50px만큼 떨어져 있고 bottom 50px은 아래에서부터 50px만큼 이동된 것을 ..
일반적으로 웹 페이지의 레이아웃은 CSS의 display, float, position 등과 같은 속성을 사용해 구현한다. 하지만 이속성을 사용하면 구현방법이 복잡하고 레이아웃을 표현하는데 많은 한계가 있습니다. 구현이 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다. flex box를 사용하면 요소의 크기와 순서를 유연하게 배치할 수 있습니다. flexbox란? flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식입니다. flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수..
