Chap 4. Layout(레이아웃) 기본

* 인라인 vs 블럭 레벨

태그에 따른 줄바꿈이 일어남 

<h1> Hello world </h1>
안녕하세요. <a href="#">링크</a>입니다.

inline => 안에 들어가면서 줄바뀜이 일어나지 않는 것 ex) a

block => 혼자 공간을 차지하는 것 ex) h1

물론 다음과 같이 바꿀 수 있음!

element{ display:inline/block; }

* Box-Model

박스 모델 중요함! 

margin 및 padding 등과 관련된 모든 것들이 박스모델

부피감과 여백, 위치, 크기 등을 결정하는 것

사각형의 박스와 같은 형태를 띄고 있어서 박스모델이라고 표현

element{ border: 10px solid red; /* (한번에 표현/ font와 같은 원리) */}

padding은 내부 간격

margin은 외부 간격

width를 통해 너비만 지정해주는 것이 일반적

BUT, 인라인 방식은 Block과 달리 width와 height 안먹음!

* Box-Sizing

크기를 예측하고 처리하기

width 값은 내부의 크기 값

Element 크기를 지정할 수 있는 방법 -> box-sizing

box-sizing 속성의 기본 값은 content-box

border-box로 바꿀 시 보더의 경계의 값으로 수정

element{ box-sizing : content-box/border-box; }

모든 콘텐트에 대해 속성 지정하기 * 로 지정

* 마진 겹침(Margin-Collapsing)

연속된 element가 둘다 margin을 가지게 되면 중간의 마진부분이 겹쳐지게 됨!

li element를 생각해보면 margin:30px를 줬을 경우 li로 나열시 요소 간 서로 60px이 떨어지게 되므로 조금 과해질 수 있어서 이럴 때 마진겹침을 통해 해결이 되는 것임

부모>자식 div 사이간 margin을 주게 되면 무조건 일어나는 것은 아님

단, 부모 element가 아무것도 없는 값(빈 공간)이 되게 되면 마진 겹침이 발생하게 된다(부모/자식 간 큰 margin 값이 자식 margin 값으로 쓰이게 된다)

* 포지션 (position) - relative VS static

Element가 어디에 위치할 것인가를 지정할 수 있는 것

offset 위치 -> left/right/top/bottom

그렇지만 바로 적용되지 않음

position:relative 를 통해야만 적용가능

기본적으로 position이 static이라서 이러함

* 포지션 (position) - absolute

지정된 위치에서 얼만큼 이동할 것인가 -> relative(상대적)

html 화면 전체에서 어느 곳에 위치 시킬 것인가 -> absolute(절대적)

(absolute로 지정하게 되면 바로 변하는 것이 아니라 absolute로 바꿔도 지정되어있는 위치가 left top으로 지정되어 있음)

! 물론 부모의 position 값에 따라서 시작 기준 점이 달라진다

* 포지션 (position) - fixed

position:fixed; 

위치를 계속 고정시킨 상태에서 내려도 계속 유지 됨

absolute와 상당히 유사한 점이 있지만 스크롤을 내려도 고정되어 있느냐와의 차이

element{ position:relative/static/absolute/fixed; }