실습코드 깃허브 링크 :)

레이아웃

박스모델

: 웹사이트를 만들 때 레이아웃 구조를 빠르게 파악할 수 있도록 도와주는 일종의 옵션

박스 모델의 구성 요소 : margin / padding / border / content

margin

padding

:새롭게 생긴 공백에 의해 밀려남, 선택한 영역이 주체적으로 움직이는 것이 아니라 타의에 의해 옮겨짐 /padding값에 의해서 원래 설정했던 크기보다 달라질 수 있다.

content : ex) body 태그 기준으로 div는 컨텐츠가 된다.

tip)

css 코드 분량이 늘어날 수로 가져오는 시간이 늘어난다.
코드분량을 줄여야 불러오는 시간이 빨라짐.

위 코드에서 초록색 코드처럼 작성하기보다는 빨간색 코드로 작성하면 분량이 줄어든다.

margin : 100px 0 0 100px;
padding : 100 px 0 0 100px;

한줄로 요약해서 작성할 시 방향은 top부터 시작해서 시계방향으로 생각하면된다.

ex) margin : 100px(top값) 0(right값) 0(bottom값) 100px(left값);

border-box

* box-sizing: border-box;

속성을 적용한 영역의 크기를 기준으로 크기 안쪽으로 border와 padding 값이 적용된다.

margin 병합현상

• 형제간에 발생하는 margin병합
  margin-bottom & margin-top : 마진값을 공유하여 겹쳐지는 현상 / 숫자가 큰값이 작은 값을 병합

• 부모-자식간에 발생하는 margin병합

  margin병합현상 정리글 참고

margin 병합현상 해결방법

1. 부모 요소에 padding: 1px을 준다
2. 부모 요소에 border에 1px solid transparent를 준다.
3. 부모 요소에 overflow hidden을 준다 (best)
4. 자식 요소에 display를 inline-block로 준다
   (출처 :https://darrengwon.tistory.com/801)

Block & Inline

Block

Block

Block

InlineInlineInline

block 은 단어 그대로 블록처럼 쌓여가는 구조
inline 은 block과 다르게 옆으로 정렬

Block : 공간을 만들 수 있다 (margin,padding값 적용 O)

Inline : 공간을 만들 수 없다 (margin,padding값 적용 X)

블록 성격을 가진 h1 > display : inline; 값을 주면 inline성격을 가진다.
인라인 성격을 가진 span > display : block;값을 주면 block 성격을 가진다.

태그는 태생적으로 갖고있는 고유의 성격이 있더라도 css의 display로 속성값 변경이 가능하다.

Inline-block

블록과 인라인 성격 둘다 갖고있는 display

display : inline-block;

(메뉴 만들 때 많이 사용됨)

vertical-align

inline 형제들을 같은 기준에서 위치 정리
: vertical-align : top/middle/bottom ex)카카오톡 친구 리스트
*vertical-align 요소는 inline에서만 사용한다.

카카오톡 친구 리스트

이름과 상태메세지가 프로필사진의 이미지와 가운데 정렬한 것을 볼 수 있다.

vertical-align : middle;