TIL #HTML&CSS - position / float / block& in-line block

1. Position

css에서 position 은
각 엘리먼트가 놓일 절대적, 그리고 상대적 위치를 지정하는 것을 말한다.

예를 들어

<div class="wecode"> 
	<ul class="curriculum">
    		<li>html</li>
    		<li>css</li>
    </ul>
</div>

이런 코드가 있다고 가정해보자.
그리고 나는 curriculum 이라는 리스트를 wecode 라는 구역의 오른쪽에서 안으로 20px정도 띄워진 곳에 놓고싶다.

그 말인 즉슨 나는 div라는 부모요소의 위치에 상대적으로 50px정도 들여넣은 부분에 리스트를 위치시키고 싶다는 말이다.

그럴경우,

div {
position: relative; (ul의 상대적 위치를 잡기 위해)
}

ul {
position: absolute; (div 내의 ul의 절대적 위치)
right: 20px
}

이런식으로 ul이 절대적 위치를 잡고 div(부모요소)에게 상대적 위치를 부여함으로서 

이렇게 원하는 결과를 도출 할 수 있다.

1-1. position - fixed

fixed는, 말 그대로 화면을 이동해도 지정된 자리에 엘리먼트가 고정되어있는 것을 말한다.
예를 들어 웹사이트의 고정 배너, 혹은 화면이 움직여도 고정되어있는 메뉴, 헤더 등에 이 효과가 쓰인다.

2. inline-block & block

인라인블럭 요소와 블럭 요소의 차이점은, 옆에 다른 요소가 올 수 있는가 없는가 이다.
inline-block 요소의 경우, 바로 옆에 다른 요소들이 올 수 있게끔 하지만,
block 요소 같은 경우 옆에 다른 요소들이 오지 못하고 아래로 내려가게 된다.
간단한 예시로는 p 와 span 을 예로 들 수 있다.

<p>블럭요소와</p><span>인라인블럭요소의</span><span>차이점을 알아보자</span>

이 코드의 결과값은?

이렇게 나오게 된다.
인라인 요소의 경우, 자신의 크기 만큼만의 자리를 가지며, 그 옆에 다른 요소들이 올 수 있게 하지만,
블럭요소는 한 블럭을 자신이 가지게 되며 그 옆에 다른 요소를 허락하지 않는다.

3. float

float은 레이아웃에서 아주 중요한 요소로 쓰인다.
float 같은 경우, 크게 힘 들이지 않고 위치를 잡을 때에 요긴하게 쓰인다.

float 에는 left, right, none의 값이 쓰인다
내가 요소를 화면의 오른쪽에 배치하고 싶다면 float:right; 를 주면 되고.
왼쪽이라면 float: left를 주면 된다.

다만 문제는 float같은 경우, 부모요소가 float의 높이를 가늠 할 수 없어 부모요소의 통제를 벗어나는경우가 있다.

해결방법

1. float을 하고자 하는 요소의 아래쪽에 clear (html에서)을 주어서 해결할 수 있다.
   단점: html에 추가적으로 작성해야 하고, 일일히 clear을 주며 차후 유지보수에 어려움이 있을 수 있음.

2. float된 요소를 감싸고 있는 요소 (부모요소)에도 float을 준다.
   단점: 부모요소의 display가 float으로 바뀌면서 block 성질이 없어지므로 width 를 추가해야함. (width:100%; 로 해결)

3. 감싸고 있는 요소 (부모요소) 에 overflow:hidden; 을 주어서 해결한다.
   자주 사용되는 해결법.