CSS 레이아웃 (Float, Position, Display, Box Model)

Float

• float를 가지면 붕 뜨기때문에 다른 요소가 float을 가진 div를 무시함.
• float를 가진 div끼리는 겹치지 않음.
• but absolute와 다른점 : top, left가 아닌 margin으로 위치를 잡아줘야함

<div container>
	<div first>
	<div second> 
</div>

.first{ 
	float : left;
}
.second{
	float:right; or left;
}

issue

1. float를 가진 div(first)의 부모(container)는 붕 뜬 float(first)를 자식이라고 생각하지 않음. ⇒ 부모에 overflow : auto; or hidden;
2. float와 같은 위치에 있고 float가 없는 div는 float를 가진 div를 무시함. float가 있는 요소와 float가 없는 요소가 겹치지 않게 하려면?

       ⇒ float속성을 clear를 해줘서 float를 인정해줘야함.

           clear: left; or both;

 

---

[참고]

https://www.edwith.org/htmlcss/lecture/16618?isDesc=false

 

 

 

 

Position

• position : static;         => 기본 값  
• position : relative;      => 원래 있던 위치에서 상대적인 위치(top, left)를 조정하여 움직임.
• position : absolute;

position : absolute;

 

 

=> 이 속성을 가지지 않은 다른 div(second, third)들이 이 속성을 가진 div(first)를 무시함. 나머지애들이 absolute를 완전히 무시(없다고 생각)하고 새로운 layer를 만듦.

=> absolute를 가진 div(first)는 static이 아닌 div를 기준으로 top, left로 조정하여 움직임.

first{
	top :20px;
	left:20px;
}

 

• position : fixed;

position : fixed;

 

=> 스크롤 내렸을 때도 위치 고정

=> 나머지 div가 fixed를 무시하고 static아닌 것을 기준으로 top, left로 움직인다는 점은 absolute와 비슷하지만 fixed는 scroll이 생겼을 때도 내리거나 위로 올릴때 역시, 고정됨.

 

third{
	position: fixed;
	top:100px; 
	left:200px;
}

 

 

 

Display

• display: none;         => 화면에서 사라지고 크기 자체도 차지하지 않는다
• display: block;

=> 일반적으로 설정하지 않아도 div가 갖게되는 기본값. (태그에 따라 기본값이 다를 수 있음.)

=> 기본적으로 width 가 자신의 컨테이너의 100% 가 되게끔 한다. 쉽게 말하자면, 가로 한 줄을 다 차지하게 된다.

 

• display: inline;

=> 컨텐츠를 딱 감쌀정도의 크기만 갖게된다. block태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 되며, 크기를 변화시킬 수 없다. 예시 css에서도 width를 임의로 500px 로 바꾸어줬지만 크기는 여전히 글의 길이 만큼이다.

 

• display: inline-block;

=> inline과 block의 특성을 합쳐놓은 속성이다. 기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있다.

참고) Explorer 7  이하에서는 사용할 수 없다

 

 

---

[참고]

https://programming119.tistory.com/97

 

 

 

Box Model

인접한 두개의 block element가 서로 다른 margin을 가지면 큰 값을 가진 margin값이 공유되어 사용됨.

 = 10px+20px = 20px

 

인접한 두개의 inline element가 서로 다른 margin을 가지면 각각의 margin의 합으로 표현된다.

 = 10px+20px=30px