그럼에도 불구하고

오늘은 플렉시블 박스 레이아웃에 대해 알아보자 [ 플렉시블 박스 레이아웃 ] 플렉시블 박스 레이아웃(flexible box layout)은 그리드 레이아웃을 기본으로 하고, 각 박스가 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 플렉시블 박스 레이아웃은 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치한다. 예를 들어 아래의 그림처럼 주축을 수평으로 정하면 박스를 왼쪽에서부터 오른쪽으로 순서대로 배치하는데, 화면 너비를 넘어가면 수직으로 이동해서 다시 순서대로 배치한다. ( 플렉시블 박스 레이아웃을 플렉스(flex) 박스 레이아웃이라고도 한다. 아래부터는 플렉스 박스 레이아웃으로 지칭하겠다.) 플렉스 박스 레이아웃에 ..

오늘은 display 프로퍼티 / block / inline / inline - block 레벨 요소를 배워보자 [ display 프로퍼티 ] display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. 프로퍼티값 키워드 설명 block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HTML 요소는 block 또는..