라떼시절, 레이아웃의 모든 것

사실 모든 것은 아니죠.

1.position

2.inline, inline-block, block

3.float

에 대해서.

01. position

position은 나의 애정을 받는 속성이다.
그렇게 복잡시럽지 않으면서도 필요한 기능은 마구 뿜뿜해주기 때문이다.

1. position
2. relative
3. absolute
4. fixed
5. sticky
6. 요소 쌓이는 순서
7. display 수정	

1. position
   요소위치 기준만들기( 직접 배치하는 거 아냐, 기준!이지)

   • position : static(기본값) relative absolute fixed sticky
   • static: 기준없음. 배치 불가
   • relative: 요소 자신을 기준
   • absolute: 부모요소를 기준으로 (그럼 당근 부모가 있어야겠네. 부모는 position: 얼굴을 가져야 부모임. 없으면 fixed와 마찬가지로 뷰포트(브라우져가 기준)
   • fixed 브라우져 뷰포트 기준
   • sticky는 스크롤 영역 기준
   • top, left bottom right는 position지정되있을 때만 쓸수 있어
   • px,em,cm, % (부모 너비비율로, 음수값도 가능)

2. relative

   • position:relative 써진건, 배치될 준비완료되었다는 뜻!
     (자기 자신이 기준)
   • top:100px;
     left:20px;
     • relative는 원래 자리에서 요소가 이동해도, 홀로그램처럼 요소의 원래자리는 존재한다는..
     • relative는 형제요소가 사라지면, 그게 빠지면서 같이 자리이동이 생겨. 그래서 relative는 배치사용 잘 안해. absolute나 fixed로 하지

3. absolute
   -absolute 한 순간, 배치가 완료되면, 위로 붕 뜨게 돼.

   • position:~블라블라 가 있으면 무조건 부모야.
     물론 static은 제외. 배치불가니까.
     relative는 자기 자신이니까 보통 이게 기준됨
     postion블라블라가 없다면 브라우저(뷰포트)기준으로 배치돼

4. fixed
   : 부모가 브라우져(뷰포트야)

5. sticky
   - top:0 이게 1개이상 있어야해.
   - ie지원 안해
   - h1{ position: sticky;
   top:0; } 이런식으로 글자예제에 하시던데, 보통 글자로 하나?
   
   
   

6. 요소 쌓이는 순서
   position -> z-index -> 마지막 코드
   

• static제외, 포지션 속성값 있으면 가장 위
• 모두 포지션 보유라면, z-index로 결판
• 다 z-index있다면, 마지막 코드로 결판
• z-index:0 이 기본값, 1,2 높을수록 좋지. 포지션 있을때만 동작하고
  (제트기는 숫자가 높을수록 높은 항공..ㅋㅋ)
  

7. display: block 으로 수정
   - static relative sticky는 안되고
   - absolute fixed는 inline이 block으로 변환되.
   - 물론 flex가 있다면 변환 안되고.
   (float도 그랬는데, 요소가 block이 되어 span이 너비를 갖을 수 있게 돼)
   (왜 그런지는몰겠음)

02. inline,inline-block, block

1. 블럭요소 : div h1 p
   • 가로 지정 안해도 , 최대 가로너비사용
   • width 가능
   • 기본값 width=100% height=0 (height는 내용포함만큼 늘어남)
   • 아래로 쌓임
   • 레이아웃 위한 것

2. 인라인 span img
   • 내용물 글씨만큼만 사용
   • widht 불가능
   • 기본값 width=0 height=0으로 시작
   • 옆으로 쌓임 (요소끼리 띄어씌기 자동적용 되면서)
   마진 패딩 옆은 가능( 위아래는 안됨) (??패딩은 아래도 되는디?)

03. float

1. float

   • 요소를 띄우는건데, 대체로 수평정렬에 이용해
     (css3부터는 flexbox로 대체되었지)
     그림 옆에 텍스트가 좌르륵 흐르는것처럼

   • 속성값
     float: none(기본값) left both
     (컨테이너가 아닌 아이템에다 넣는 듯..)

2. display

   • float 속성이 추가된 요소는 대부분 속성값이 block으로 바뀜
     (span태그로 가로세로 지정해도 소용없잖아.
     근데 float되면, 가로세로 적용돼)
   • but, display:flex가 되있는 요소는 float가 적용되도 block으로 안 바뀜.

3. clear _float 적용해제

   • float를 멈추고 싶을 때, clear:left ;
     (요소가 우측에 있으면 right도 있지만 보통 both로 씀)

   • 클리어 해제안하면 문제발생. 무조건 해제해야지. 아니면 float다음요소가 겹쳐서 엉망이 되.

   • 새롭게 만드는 요소에 적용해제 clear를 써주는 것

   • float해제법 3
     1) 현재요소에 : clear:both(left,right)
     문제점 : 다음형제 요소가 없으면,, 망,,
     2) 부모요소에 : overflow: hidden (,auto)
     부모를 만들고, 그 안에서만 사용하는 식인데
     float랑 overflow는 아무상관없는 걸로 해결하는 편법
     3) 부모요소에 : clearfix 클래스 추가
     부모를 만들고 해결

   • clearfix::after {
     content="";
     display:=block; (table도 있음)
     clear=both; }
     ::은 가상요소 선택자로 정의하는 거
     내부의 뒤쪽에 뭔가를 추가하는거야. 가상요소 쓰면 content는 필수
     (마지막 형제 끝에 가상의 막내를 만들어주는 것)

클리어픽스 부모의 자식들은 무조건 float성씨만 와야,

04. 생각정리

태그 위치와 상관없이 원하는 곳으로 이동할 수 있는 position
쓰는 방법도 너무 간단해 맘에 쏙 든다..(물론 속썩일 날이 곧 오겠지)

레이아웃의 모든것이라는 제목은 형편없다.
css3의 새로운 레이아웃 방식인 flex와 grid는 다루지 않고 있으므로.
그래서 라떼시절이라는 말을 덧붙였다.

수평정렬 레이아웃을 하려면 예전에는 display:inline-block or float를 이용했다고 한다. 여전히도 쓰이겠지만, inline-block은 요소간 띄어쓰는 기본값이 생기고(텍스트 특화 특성) float는 해제할때 정확한 해제법이 있는게 아니었다.
즉, 제대로된 수평정렬 레이아웃은 없었다.
그래서 css3에서 flex와 grid를 들고나온것이다.

개인적으로 flex도 애정하는데, 다음번에 또 만나자