레이아웃에 대해 알아보자
< display >
* inline 요소 : ex) span..
- 영역의 크기가 내부 콘텐츠 크기로 정해진다. -가로배치
* block 요소 : ex) div..
-영역의 크기를 width, height 지정할 수 있다.
- width를 지정하지 않으면 가로 전체를 차지한다. -세로배치
* inline-block 요소 : ex) input ..
- 영역의 크기를 width , height 를 지정할 수 있다.
- 여러 요소가 가로 배치가 된다
'
< 요소를 없애는 방법 2가지>
* display: none
ㅡ 코드는 존재, 레이아웃에서 사라짐
* visbility: hidden
ㅡ 문서의 레이아웃을 변경하지 않고 , 숨김
ㅡ 레이아웃에서 숨기지 않고 나옴 ( 요소의 빈 부분만 나옴)
< float > 한 요소가 보통흐름 (normal flow) 에서 빠져 나와서 별도로 감싸는 흐름 방향이 생김
ㅡ 부모 영역 내에서 이동됨
* float: left ;
ㅡ 요소의 왼쪽으로 흐르게함
* float: right;
ㅡ 요소의 오른쪽으로 흐르게함
< position >
ㅡ Normal Flow : 요소의 레이아웃을 변경하지 않을 시 웹 페이지 요소가 자기 자신을 배치하는 방법.
ㅡ posiont: static; : 기본값
ㅡ position: relative; : 자기 자신을 기준으로 이동된다.
ㅡ position : absolute; : 일반적인 문서 흐름을 제거한다. 가장가까운 조상 기준으로 돌아온다
- position static 이 아닌 요소를 찾아 부모요소를 타고 올라가면서 기준점을 찾는다. ( 아예 없으면 조상 body기준 )
- position:relative 를 기준점으로 잡을 수 있게 부모에게 relative를 준다. ( 그러면 relative기준으로 배치된다)
- float 처럼 붕 뜬다.
ㅡ position; : fixed; : 뷰포트 기준으로 배치한다. (고정) relative상관없음. ( ex, flutting버튼, 네비게이션바, 메뉴바)
ㅡ position:sticky; : 일반적인 문서흐름 , 스크롤을 하면 어느 시점에 가장 가까운 스크롤이 되는 조상을 찾아 fixed처럼 기준이 됨. 스티커처럼 붙어 있음..
- 스크롤 되는 조상의 바로 하위에 적용 해야한다. 스크롤 ( body의 하위 요소에 적용시킴.)
< overflow > 요소의 컨텐츠가 너무 커서 요소의 블록 서식 밖으로 넘칠 때 사용
overflow: hidden; : 넘치는 부분 잘라서 안보임
overflow: scroll; : 스크롤과 함께 박스 생성됨.
overflow:outo; : 자동으로 스크롤이 생김.
< z-index > z축의 순서를 지정한다. (브라우저 기준 입체적으로 위아래 순서로 쌓인다.)
- position:static; 이 아닌 position이 설정 되면 앞 순서로 가게된다. 그걸 다시 조정 하고 싶을때 z값을 준다.
- z-index: 1; < z-index: 3; / 뒤로 가고 싶으면 -1 로 지정. / 최상위는 99 값으로 주기.
