[TIL]position , inline , block , float

Byunghoon Lee·2020년 6월 23일

CSS block float html inline position

HTML , CSS , SCSS

목록 보기

2/6

● position 이란?

👉 html에 코드를 작성한 순서대로 페이지가 그려졌지만, CSS의 position을 이용하면 ,html 순서와 상관없이 원하는 위치에 요소를 그릴 수 있습니다.

position에 사용 되는 값은 아래와 같다.


● static : (거의 사용X)
● relative : 원래 있던 위치를 기준으로 좌표를 지정 합니다.
● absolute : 절대 좌표와 함께 위치를 지정 합니다.
● fixed : 스크롤과 상관없이 항상 좌표를 고정 합니다.

위의 position속성의 좌표를 지정해주기 위해선 (left,right, top, bottom)속성이 필요합니다.

예제와 함께 보도록 하자.

<html>
<head>
	<style>
		.box-container{
			width: 350px;
			border: 2px solid #e91bf5;
		}
		.box-container div{
			padding: 10px;
			border: 1px solid green;
			background-color: #e3ffe0;
		}
		#box1 { position: static; top: 20px; left: 30px; }
		#box2 { position: relative; top: 20px; left: 30px; }
		#box3 { position: absolute; top: 20px; right: 30px; }
		#box4 { position: fixed; top: 20px; right: 30px; }
	</style>
</head>
<body>
	<div class="box-container">
		<div id="box1">static 박스</div>
		<div id="box2">relative 박스</div>
		<div id="box3">absolute 박스</div>
		<div id="box4">fixed 박스</div> <!-- '출력 결과' 란이 아닌, 전체 페이지에서 고정되어 보여짐 -->
	</div>
</body>
</html>

● 결과

● absolute 와 relative

👉 relative인 범위 내부에 absolute인 객체가 있으면 좌표를 계산할 때 , relative 범위를 기준으로 잡게 됩니다. (없다면 전체문서(body)를 기준).

예제와 함께 보도록 하자.

<html>
<head>
	<style>
		#box-container{ position: relative; height: 90px; margin-top: 40px; border: 2px solid red; }
		#box-inner{ position: absolute; top: 30px; left: 20px; border: 2px solid blue; }
	</style>
</head>
<body>
	<div id="box-container">
		컨테이너
		<div id="box-inner">absolute 박스</div>
	</div>
</body>
</html>

●결과

👉 출처 ofcourse.kr

●block 과 inline

block: 이 요소의 의미는 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.

  - height와 width값을 지정 할 수 있습니다.
  - margin과 padding을 지정 할 수 있습니다.

<대표적 태그>
<header>, <p> ,<li> ,<div> ,<h1> 등

inline: 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치. 
  
  - width와 height를 명시 할 수 없습니다.
  - margin은 위아래엔 적용 되지 않습니다.

<대표적 태그>
<span>, <a>, <img> 등

👇 아래 내용을 보자.👇

첫번째~네번째 줄까지 <p>태그 같은 'block' 요소 입니다.
텍스트가 짧아도 그 줄의 영역을 다 차지합니다.

마지막 줄은 'inline'요소인 <span> 태그를 사용했으며 , 딱 텍스트만큼의 영역만 차지 합니다.
이 이후 'inline'요소가 더 추가되면 밑에 새로운 줄이 생기는게 아니라 오른쪽에 이어져서 나오게 됩니다.

● inline-block

👉 'inline-block'은 말 그대로 'inline'의 특징과 'block'의 특징을 모두 가진 요소입니다.

  - 줄바꿈이 이루어지지 않는다.
  - 'block'처럼 width와 height를 지정 할 수 있다.
  - width와 height를 지정하지 않을 경우 , 'inline'과 같이 텍스트만큼 영역이 잡힙니다.

아래 그림으로 확인해보자.

👇html

👇css

👇결과

결과창에 왼쪽 화면은 일반 <span>, 오른쪽은 display:inline-block;을 한 <span> 입니다.

출처 wecode ,
https://seungwoohong.tistory.com/

● float

 👉 'float'는 요소를 띄워서(float) 왼쪽이나 오른쪽에 배치할 수 있도록 만들어줍니다.
 
  'float'의 속성
  - none : 기본속성 , 요소를 띄우지 않습니다.
  - left : 요소를 왼쪽으로 띄웁니다.
  - right : 요소를 오른쪽으로 띄웁니다.