✔ 강의 내용

display

• 요소를 화면에 어떻게 배치해서 보여줄지 레이아웃을 정하는 속성(inline, block 레벨 지정)
• inline이 디폴트
• 모든 element에 적용 가능하다.

1. display: none;
   : 화면에서 사라진다. 크기도 차지 하지 않음!

2. display: block; (한 줄에 한 박스)
   : 요소 블록 상자 앞,뒤에 줄바꿈을 생성

   <block 레벨 태그>
   <div>, <p>, <h>, <li>, <form> 등

3. display: inline; (한줄에 여러 contents)
   : 요소를 같은 줄에 배치, width나 height과 상관 없이 요소의 contents 크기에 맞춰 변경됨

   <inline 레벨 태그>
   <span>, <a>, <b>, <i>, <img> 등

4. display: inline-block; (한 줄에 여러 박스)
   : 요소 블록 상자를 같은 줄에 배치, contents 크기와 상관 없이 지정한 width나 height에 맞춰 나타남

Position

position은 static(html에 정의된 순서대로 브라우저 상에 자연스럽게 보여지는 것)을 기본값으로 가진다.

1. position: relative;
   : 요소를 자기 자신을 기준으로 top, right, bottom, left 값에 따라 오프셋 적용 즉, 원래 있던 자리를 기준으로 지정한 px값만큼 이동시킴

2. position: absolute;
   : 요소를 자기 자신과 가장 가까운 box(부모)를 기준으로 배치한다.

3. position: fixed;
   : 요소를 window 화면안에서 배치한다. (원래 위치에서 벗어나 페이지 안에서 움직인다.)

4. position: sticky
   : 요소를 원래 있던 자리에 배치하고, 스크롤을 내려도 그 위치에 고정되게한다. → <nav>태그 메뉴bar 고정할 때 응용 가능

참고 영상 : [드림코딩] CSS 레이아웃 정리 display, position 완성