HTML & CSS - [CSS] 요소의 크기와 위치 (width, height, left, top, right, bottom)

서론

HTML을 CSS를 통해 제어하고 디자인하는 데 있어 요소들의 위치와 크기는 중요합니다.

정렬하는 형태, 배치하는 방법, 특정 상황에서의 동작 등을 제어하고 디자인하기 전에 기본적인 위치와 크기를 어떻게 결정하고 사용할 수 있는지 알아보도록 하겠습니다.

 

요소의 크기 속성 - width 와 height 

HTML이 웹 브라우저에서 렌더링 되면 각각의 요소들은 width와 height속성을 가지게 됩니다.

각각의 요소마다 폭과 높이의 정보를 가지고 있다는 말입니다.

사용자는 이 width와 height속성의 값을 변경해서 요소의 크기를 결정할 수 있습니다.

See the Pen Width & Height by Gon (@gon-91) on CodePen.

요소의 크기보다 내용물이 크다면? - overflow 속성

위 예제를 보면 요소 안에 내용이 초과되어서 원하지 않는 결과를 가지고 오는 것을 확인할 수 있습니다.

이럴 때는 요소 안의 내용이 초과되는 경우 어떻게 할 것인가를 제어할 수 있는 overflow속성을 이용해서 해결 가능합니다.

 

See the Pen Untitled by Gon (@gon-91) on CodePen.

overflow 속성은 나중에 조금 더 자세히 다루도록 하겠습니다.

 

요소의 위치 속성 - top, left, right, bottom

요소의 크기를 제어할 수 있다면 그다음은 요소를 배치할 위치를 정해주어야 합니다. 

이때 요소에는 위치를 설정하는 좌표 개념 형태의 속성이 존재합니다.

 

See the Pen Untitled by Gon (@gon-91) on CodePen.

Position속성과 함께 써야 정확하게 쓸 수 있다.

좌표 개념의 속성 top, left, right, bottom은 position속성이 무엇이냐에 따라 사용하는 방법이 상당히 다릅니다.

간단하게 좌표의 기준점이 바뀐다고 생각하면 좋을 것 같습니다. 

다음 포스트에서 position속성과 좌표개념속성들을 이용해서 원하는 위치에 요소를 배치하는 방법에 대해 자세히 다루겠습니다.

 

Display속성 또한 중요하다.

html을 배웠다면 span과 div의 차이점을 알고 있으리라 믿습니다.

이 차이는 인라인과 블록의 차이인데요, 인라인 요소는 한 줄의 개념이기 때문에 크기 속성이나 위치 속성이 적용되지 않습니다. 

따라서 이런 display속성에 대한 이해 또한 필요합니다.