[css] 레이아웃

bingwen·2021년 10월 7일

position (static, relative, absolute, fixed) 의 속성

position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다

position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다.

position 속성 사용법

static (기본값) :위치를 지정하지 않을 때 사용한다.

relative : 위치를 계산할때 static의 원래 위치부터 계산한다.

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

기본 html 소스

코드를 입력
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
      div {
          width: 100px;
          height: 100px;
        }
      div#a {
          background: #52D4FF;
          }
      div#b {
          background: #FF63EA;
          }
      div#c {
          background: #C5FF63;
          }
</style>
</head>
<body>
   <div id="a">a 영역
   </div>
   <div id="b">
   b영역
   </div>
   <div id="c">
   c영역
   </div>
</body>
</html>

실행 결과

이제부터 위의 html 문서에서 position 속성을 적용해 보자.

1. position: static

div#a {
background: #52D4FF;
position: static;
     }
div#b {	
background: #FF63EA;
position: static;
     }
div#c {
background: #C5FF63;
position: static;
     }
``

position: static 속성은 설정 전과 후가 같다.

2. position: relative

div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: relative;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: relative;
top: 0px;
left: 200px;
}

position: relative 속성은 static의 원래 위치부터 계산한다.

위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정할 수도 있다.

아래 그림과 같이 b영역은 원래 위치에서 위 0px, 왼쪽 100px 로 위치시켰고,

c 영역은 원래 위치에서 위 0px, 왼쪽 200px 로 위치 시켰다.

3. position: absolute

div#a {
background: #52D4FF;
position: static;
}
div#b {
background: #FF63EA;
position: absolute;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: absolute;
top: 0px;
left: 200px;
}

position: absolute 속성은 static이나 relative 와 다르게 바깥 쪽에 공간이 생기지 않는다.
여기서 absolute는 상위 요소인 static 위치를 기준으로 위치가 결정 된다.

div#a {
width: 300px;
height: 300px;
background: #52D4FF;
position: relative;
top: 100px;
left: 100px;
}
div#b {
background: #FF63EA;
position: absolute;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: absolute;
top: 0px;
left: 200px;
}
<body>
<div id="a">
a 영역	
<div id="b">
b영역
</div>
<div id="c">
c영역
</div>
</div>
</body>

위와 같은 경우는 relative (a영역) 안에 설정된 absolute (b영역, c영역) 은 a영역부터 시작해서 위치가 결정됨을 알 수 있다.

4. position: fixed

div#a {
width: 300px;
height: 300px;
background: #52D4FF;
position: relative;
top: 100px;
left: 100px;
}
div#b {
background: #FF63EA;
position: absolute;
top: 0px;
left: 100px;
}
div#c {
background: #C5FF63;
position: fixed;
top: 0px;
left: 200px;
}
<body>
<div id="a">
a 영역	
<div id="b">
b영역
</div>
<div id="c">
c영역
</div>
</div>

position: fixed 속성은 브라우저 화면의 상대 위치이다.

따라서 화면이 바뀌어도 고정된 위치를 설정 할 수 있고, 상위 요소에 영향을 받지 않는다.

ie7, ie8 브라우저 환경에서는 position: fixed 속성이 적용되지 않으므로 문서 타입을 규정해 주어야 한다.

display 속성: inline, block, inline-block

inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 <span>이나 <a>, <em>
태그 등을 들 수 있습니다.

예를 들어, 여러 개의 inline 엘리먼트 다음과 같이 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 됩니다.

inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 엘리먼트로

<div>이나 <p>, <h1>

태그 등을 들 수 있습니다.

예를 들어, 여러 개의 block 엘리먼트 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.

block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.

inline-block
display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.

대표적인 inline-block 엘리먼트로

<button>이나 <select>

태그 등을 들 수 있습니다.

inline-block 엘리먼트는 위와 같이 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 합니다. inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.

float

float은 이미지에 텍스트를 둘러 감싸기 위해 만들어진 속성입니다.
자연스러운 배치가 가능하기 때문에 페이지 전체의 레이아웃을 구성할 때에도 중요하게 사용됩니다.
float 속성에는 총 3가지를 사용할 수 있습니다.

left : 요소를 왼쪽 방향으로 띄움
right : 요소를 오른쪽 방향으로 띄움

float: left

<body>
	<img style="float:left" src="game.jpg" width="250" height="200">
  <div>
  	중국이 넷플리스 오리지널 '오징어게임'.........
  </div>
</body>

float 속성에 left를 적용한 모습입니다. 이미지가 자연스럽게 왼쪽으로 정렬이 되고 텍스트는
그 이미지를 자연스럽게 따라서 줄바꿈되는 모습입니다.

float: right

<body>
	<img style="float:right" src="game.jpg" width="250" height="200">
 <div>
 	중국이 넷플리스 오리지널 '오징어게임'.........
 </div>
</body>

이번에는 반대로 float 속성에 right 적용한 모습입니다. 당연히 이번엔 오른쪽으로 이미지가
자연스럽게 배치되고 텍스트도 그에 따라 바뀐 모습입니다.

bingwen

MOONMOONY

이전 포스트

Semantic Web과 Semantic Tag 이해

다음 포스트