개인 공부를 위해 작성했습니다

display

레이아웃 제어를 위한 가장 기본적인 속성.
대부분의 요소는 기본값으로 block, inline 속성을 가지고 있다
🚩집중! 레이아웃의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것.

●block

• block 새 줄의 왼쪽에서 시작하여 오른쪽으로 확장된다. div, p, form, header, footer, section 등
• block요소에 width값을 지정하면 가장자리까지 늘어나지 않는다
  • ✨참고✨ 이 때, margin값을 auto로 설정하면 가운데 정렬이 가능하다
  • 🚩집중! 반응형 웹을 제작할 때엔 width 보다 max-width를 사용하면 요소 너비가 브라우저 너비보다 크면 가로 스크롤바가 만들어지는 것을 방지할 수 있다

●inline

• inline 해당 단락의 흐름을 방해하지 않고 단락 내에서 위치함 span, a

●display: none;

• 요소를 삭제하고 다시 만들지 않고도 요소를 숨기고 표시하기 위해 JavaScript와 함께 일반적으로 사용됨

/* legacy values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

✨참고✨ display: inline-block;

block과 inline의 짬뽕. 제일 중요한 성질 자체는 inline과 비슷. 동일 라인에 여러 태그를 붙일 때 쓸 수 있다. 다만 위 inline의 단점들을 커버하는 것이 inline-block이다

• width/height 적용 가능 (↔ inline level은 적용 불가)
• margin/padding-top/bottom 적용 가능 (↔ inline level은 적용 불가)
• liine-height 적용 가능 (↔ inline level은 원하는 대로 적용 불가 span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)

---

✅ 목표!

• 요소들이 화면에 어떻게 보이는가를 설정하는 display
• 웹페이지를 제작할 때 레이아웃을 위한 가장 기본적인 키워드
• 원할 때 언제든지 적용할 수 있도록 이해하고 익혀두자

CSS_사전스터디
CSS 레이아웃 배우기
MDN_display