css 배치에관해 공부
normal-flow : 자동 배치가 되는 공간 / 데이터가 왔다갔다 하는 공간이라서 유동적일 필요가 있음 .
오늘은 float에 관하여 공부를 한번 해보려고 합니다 .
요즘은 레이아웃을 잡는데 flex 나 grid로 하지 , float을 잘 사용하지 않는 말을 들어서 flex, grid만 공부해 왔는데 ,
검색을 해보니 여전히 현업해서 float를 사용하는 경우가 종종 있다고 하여 ( 예전홈페이지를 유지 보수 할때 )
이번 기회에 float 을 한번 확실하게 잡아야 겠다고 생각 했습니다 .
우선 float은 세 가지 property 밖에 없습니다 .
left, none , right 입니다 .
left는 말그대로 왼쪽으로 흐르게 하는것이고 , right 는 오른쪽 , none은 default값입니다 .
가운데로 배치하고 싶으면 margin: auto로 배치하면 됍니다. ( **margin auto는 block요소만 중앙으로 보냄 **)
float을 주는순간 그 요소는 뜬다는 개념으로 생각합니다 .
그 요소가 뜨면 떠있는 float층 밑에는 inline이 올수 없습니다 . 따라서 p 같은 요소는 이미지 옆에 글이 흘려집니다 .
예를들어 이런 레이아웃을 잡는다고 생각 해보면 ,
왼쪽에 있는 border 1px짜리 , 오른쪽에 있는 border1px짜리 상자를 float층으로 우선 띄워야 합니다 .
즉 , .left { float: left ; } .right { float:right } 을 하게 되면 ,
각 상자가 float 층으로 떠버려서 바깥쪽에있는 border: 1px black 이 자동 높이 계산을 실행 하게 되어 저 상자들을 포함하지 않는다고 인식하고 쪼그라저 버립니다 .
이 현상을 해결하기 위해 여러가지 방법이 있지만 쉽게말해 css 재 랜더링을 시키면 다시 계산하여 저 상자들을 감싸게 되는데 ,
저는 보통 overflow: hidden을 주거나 ::after 가상 클래스를 생성하여
.grandmother ::after {
content :'' ;
display:block ;
clear:both ;
}
를 생성하면 css 재 렌더링을 통해서 다시 계산하여 상자를 감싸게 됩니다 .
clear : left // 왼쪽으로 배치된 float 속성 상속을 해지
clear : right // 오른쪽으로 배치된 float 속성 상속을 해지
clear : both // 왼쪽 또는 오른쪽으로 배치된 모든 float 속성 상속을 해지
float 값을 주게되면 display 속성이 inline-block으로 변경됩니다.
HTML 요소가 왼쪽에 있다고 float: left가 기본값이 아닙니다 . 기본값은 float: none; 입니다 .
display 속성에 대해서
inline 요소 :
span , a , small , big , em , u ,ins ,i ,s ,del ,br ,q ,b ,strong , mark , sub , sup , label , mpa, cute ,avvr , time
=> 글자를 개별적으로 꾸미는 서식에 관련된 태그들
기본 너비 값 : 컨텐츠의 너비 값 / 한줄에 여러 개 배치 / 크기 값을 가질 수 없음 / 상하 마진은 가질 수 없음
block요소 :
div , p , table , blockquote , ul , ol ,li ,dl ,td ,dd , table , tr, td ,th ,form ,hr ,h1~h6 , header ,nav , footer , main ,section ,article , aside ,figure , figcatopn , summary ,details ,address
=> 레이아웃에 관련된 태그들 , 목록 태그 , 제목 태그 , 테이블 관련 , 시맨틱 태그들.
기본 너비 값 : 100% / 한줄에 하나만 배치 / 너비 값 , 높이 값 가질 수 있음 / 상하 좌우 마진 가질 수 있음
inline-block 요소 :
img , inout ,button , textarea , select , 대부분의 font-icon tag , video , audio , iframe
=> 이미지를 비롯한 대부분의 폼 요소 ( label 은 인라인요소 )
기본 너비 값 : 컨텐츠의 너비 값 / 한줄에 여러개 배치 / 너비 값 높이값 가질 수 있음 / 상하좌우 마진 가질 수 있음
마진 겹침 현상 :
상하 마진이 겹쳐서 큰 마진값만 적용이 됌 .
가로 배치하는 2가지 방법
1. float 와 overflow 를 사용해 배치
2. display: inline-block으로 배치
position
position속성을 준 요소는 포지션 층에 뜨게 됩니다 .
땅 => float층 => 포지션 층
position 프로퍼티는 3개가 있습니다 .
static , relative , absolute 입니다 .
relative 를 주게되면 absolute 를 준 요소의 부모 요소 ( 기준점 ) 이되어서 , 그 기준점을 기준으로 top , right, left ,bottom
속성을 주어 움직이게 할 수 있습니다 .
static은 기본 값 입니다 .
position값을 주게되면 block으로 바뀝니다 . ( relative는 바뀌지 않음 !! )
fixed 값을 주게되면 viewport를 기준으로 배치를 하게 됩니다 .
요소 쌓임 순서
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임 ( 기본값 tatic 제외 )
2. 1번 조건이 같은경우 , z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
3. 1번과 2번 조건까지 같은경우 , HTML 의 다음 구조일 수록 위에 쌓임 .
z-index
숫자가 높을수록 위에 쌓임