css position : static 프로퍼티로 박스 정적 배치 하기

css position : static 프로퍼티로 박스 정적 배치 하기

네 안녕하세요, 이번 포스팅에서는 css를 이용하여 박스를 배치하는 방법에 대하여 알아보도록 하겠습니다.

전에도 말씀드렸다시피, html 태그에서 배치는 정말 중요한 요소들 중 하나입니다.

그 이유는 우리가 웹 페이지를 작성을 할 때 기능뿐만 아니라 디자인도 중요하기 때문입니다.

그리고 그러한 디자인은 배치가 기본입니다.

그래서 이번에는 이러한 배치를 어떻게 하는지 한 번 알아보도록 하겠습니다.

그럼 같이 보시죠.

 

1. 박스 배치하기(position)

브라우저에서는 개발자가 배치를 한 html 태그의 순서대로 태그를 배치를 하여 나타냅니다.

이를 normal flow라고 부릅니다.

그리고 이러한 배치를 무시를 하는 방법이 있는데, 그게 바로 position 프로퍼티를 사용을 하는 겁니다.

그렇게 하면 개발자의 재량대로 배치를 하여 웹 페이지에 출력을 할 수 있게 됩니다.

그리고 이 프로퍼티를 이용하는 속성은 5가지 입니다.

• position : static; = 정적 배치(기본값)
• position : relative : 상대 배치
• position : absolute : 절대 배치
• position : fixed : 고정 배치

이 외에 float이라는 프로퍼티도 존재하는데, 이는 나중에 있을 포스팅에서 다루도록 하겠습니다.

반응형

 

1 - 1. 정적 배치하기(position : static)

제일 처음에 알아볼 배치는 정적 배치입니다.

정적 배치는 html 태그의 출력 위치를 웹 페이지가 작성이 된 순서대로 짜는 것입니다.

그리고 이는 제가 위에서 말씀드렸듯이, 브라우저가 채택하는 기본 배치입니다.

그래서 정적 배치에서는 위치를 지정하는 속성 값들은 영향을 줄 수 없습니다.

그 이유는 그냥 기본값으로 고정을 하겠다는 뜻이니까요.

사용법은 이렇습니다.

position : static;

html에서 취급하는 가장 기본적인 배치 형태이므로,

그냥 우리가 박스를 만들면 저 상태로 됩니다.

그래서 정적 배치는 굳이 선언을 하지 않고 쓰는 경우가 많습니다.

 

여기까지 박스 배치 방법 중 정적 배치에 대하여 알아보았는데요,

다음 포스팅에서는 상대 배치를 하는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~