HTML/CSS 강의 6일차(2) : div태그, overflow, position(absolute, relative), clear

overflow

 

 

 

div태그 사용시 overflow [hidden]은 스크롤 없이 영역밖은 걍 숨김, [scroll]은 스크롤 생김

 

 

 

 

내가 만들어본 연습

 

 

div:hover:nth-child(odd)했더니 div들 중 홀수div만 마우스 오버 됨 그리고 opacity넣어줌

 

 

 

 

 

red컬러인 사각형에 float:left를 줬더니 green사각형도 float가 적용이되어 수평이 됨!(but 둘다 float이 적용이 되어야함) 그리고 yellow사각형에 clear:both를 주면 float 무시함

 

 

[clear:both]앞에 div들에게 적용된 배치스타일을 나부터 끊겠다!!

 

 

 

 

 

실무에서 많이 쓰일것 같은 포지션 스타일~~~ 제일 중요하다고 생각

position의 두가지(아래)를 적용하고 [top],[left],[right],[bottom]으로 위치 변경

 

[absolute] 부모요소를 기준으로 위치를 변경할거임(근데 부모에게 position이 적용이 되어야함 없다면 body가 부모가 됨)

[relative]나는 나다!! 부모 말 안들을거임 날 기준으로 위치 변경 할거임

 

 

 

 

z-index는 숫자가 클수록 맨 앞에 옴

 

yellow사각형은 포지션 앱솔루트가 들어가있는데 부모(blue 사각형)을 기준으로 top, left가 100px이 적용되어 있음

orange사각형도 포지션 앱솔루트 적용되어 부모(blue 사각형)을 기준으로 top, left 300px 적용