css 기본

[HTML&CSS]4. CSS: inline, block, inline-block

[HTML] CSS의 display level: inline, block, inline-block ​ ​ CSS에서 display 속성은 다른 엘리먼트들과 함께 배치시 가장 우선적으로 고려해야 하는 속성인 만큼 중요한 사항입니다. ​ 이번에는 가장 기본적이면서도 중요한 이 display 속성에 대해 알아보겠습니다. ​ ​ 1. block-level ​ display 속성이 block-level인 엘리먼트는 엘리먼트 혼자 한 줄의 공간을 차지합니다. 즉, 주변에 다른 엘리먼트들이 있다면 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지하는 것입니다. ​ display의 default값으로 block-level을 갖는 태그의 대표적인 예시로는 나, ,등을 들 수 있습니다. ​ 조..

[HTML&CSS] 3. CSS: Position

[HTML] CSS활용: 레이아웃 ​ 1. Position ​ 페이지의 레이아웃을 결정짓는 가장 기본적이고 유용한 속성으로 Position을 들 수 있습니다. ​ Position은 문서 상에서 특정 요소를 배치해주는 속성입니다. ​ position의 속성값들은 top, right, bottom, left 속성들의 값을 조절해줌으로써 배치할 위치를 변경 시킬 수 있습니다. ​ Position이 가질 수 있는 속성값들을 하나하나 살펴보며 Position에 대한 이해를 다지겠습니다. ​ ​ 1) static ​ ​ Position 프로퍼티의 default값이기에, Position 값을 지정해주지 않는다면 브라우저는 기본적으로 Position값을 static으로 인식합니다. ​ 그렇다면 static값은 어떤 방..