| position 속성

• position 속성을 통해 해당 태그를 웹사이트 내 원하는 위치에 지정 할 수 있다.
• position 속성은 5가지 값을 갖습니다.
  • static, absolute, relatives, fixed, inherit

[position의 값들에 대해서 알아보장]

• static(기본값): 위치를 임의로 지정할 수 없으며, 다른 태그와의 관계에 따라 자동으로 위치된다.
• absolute : 위치를 잡을 때 부모의 position을 기준으로 위치를 잡는다.

.absolute {
  position: absolute;		# ".absolute"클래스의 position은 absolute
  right: 0;			# 부모의 오른쪽으로 부터 0만큼 떨어졌다는 뜻
  bottom: 0;			# 부모의 밑쪽으로 부터 0만큼 떨어졌다는 뜻
}

• relative : 원래 있던 위치를 기준으로 조정

.relative {			
  position: relative;		# ".relative"클래스의 position은 relative
  top: -20px;			# 위로 20px 이동 (마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라감)
  left: 30px;			# 왼쪽으로 30px 이동
}

• fixed : 스크롤과 상관없이 항상 웹 사이트 최 좌측상단을 기준으로 위치를 조정

.coupon {
  position: fixed;		# ".coupon"클래스의 position은 fixed
  right: 0;			# 웹사이트의 오른쪽으로 부터 0
  bottom: 0;			# 웹사이트의 밑쪽으로 부터 0
}

• inherit : 부모 태그의 속성값을 상속받아 위치

---

| block, inline, inline-block

> block

• 옆(좌우측)에 다른 요소를 붙여넣을 수 없음
• 항상 새 줄에서 시작하며 좌우로 최대한 늘어남
• <header>, <footer>, <p>, <li>, <table>, <div>, <h1>

****즉, 텍스트를 길게 쓰건, 짧게 쓰건,중간에 쓰건, 어디다 쓰건간에 텍스트를 쓴 row전체를 의미하는 한다

• 위의 태그들을 쓰면 default가 block임

> inline

• inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻
• 딱 텍스트만큼의 영역만 차지
• <span>, <a>, <img>

****즉, 텍스트를 길게 쓰건, 짧게 쓰건,중간에 쓰건, 어디다 쓰건간에 딱 텍스트를 부분만을 의미한다

> inline-block

• 대부분 inline, block 성질은 어떤 태그를 사용해도

► CSS를 통해 얼마든지 성질을 바꿀 수 있어요 걱정 노노 !!!!!!!

• inline 과 block 의 특징을 모두 가지고 있다.
• 텍스트 영역 만큼만 의미(inline) + 너비와 높이 설정이 가능(block).

p {
  display: inline-block;	# block요소인 <p>를 inline 요소처럼 사용할꺼얀
  float: left;			# inline 요소가 되서 float를 사용할수 있는거야 
}

---

| float

> float

• float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 property이다.
• float 속성의 값은 left, right, none 만 존재하고 중앙정렬(center)은 없다. (**중앙정렬은 margin:auto; 사용)

• float 속성을 부여하지 않은 나머지 객체 overflow: hidden 속성을 써줘야한다.
  (overflow: hidden 속성은 내용물이 객체보다 클 경우, 넘치는 부분을 안보이게 해주는 역할을 하기 떄문)
• 또는, float 속성을 부여하지 않은 나머지 객체에 float 속성을 선언해줘야 한다.

> float 사용법

• 위쪽 <div>(파란 블록)에 float: left를 걸어보자
  • 한줄 모두 차지하는 block속성 태그는 width: 100% 가 기본
    
  • 여기에 float: left를 추가하면 -> 자신의 넓이(폭)을 최소화 시킨다
    
  • 그런 후 나머지 밑의 <div>(빨간 블록)가 옆으로 올라옵니당
    
  • float 속성이 없는 객체(빨간 블록)는 나머지 공간을 모두 차지하고, float 속성이 부여되면 자신의 너비가 최소 너비로 바뀝니당
    

[float 사용 예제]

> clear

float는 속성이 다음 요소로 상속되기 때문에 적절한 위치에서 clear 해줘야 한다

• float요소 옆에 채워지는 요소들(텍스트나 이런것들)에게 적용하는 property 이다.
• clear는 left, both, right 등의 값을 줄 수 있다
• clear는 '취소하다' 라는 뜻으로,
  • clear: left는 float:left 값을 취소
  • clear: right는 float:right값을 취소

clear:none; 	# 기초값. clear를 설정하지 않은 것과 같다 
clear:left; 	# 왼쪽을 취소(왼쪽에 아무것도 두지 않는다) 
clear:right; 	# 오른쪽 취소(오른쪽에 아무것도 두지 않는다) 
clear:both; 	# 양쪽을 취소(왼쪽 오른쪽에 아무것도 두지 않는다 

---

| float 문제점과 해결방법

float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어나는 경우가 발생할 수 있다

어뜨케 해야해 ?

• 바깥 div(.container) 마지막에 아무태그나 넣고 clear 속성을 적용하기.

  • 이 기법을 사용할 때에는 HTML코드를 더 입력해야 하는 부담이 있다.

• 바깥 div(.container)에 overflow: hidden; 을 주기. (주로 많이 사용하는 방법)

• 바깥 div(.container)를 float시킨다. 그러면 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 된다.

  • 하지만 float이 되어버려 block 요소의 성질이 없어지게 된다. 이러면 width를 100% 추가하거나 해야한다.