개인 공부를 위해 작성했습니다
레이아웃 제어를 위한 가장 기본적인 속성.
대부분의 요소는 기본값으로block
,inline
속성을 가지고 있다
🚩집중! 레이아웃의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것.
block
새 줄의 왼쪽에서 시작하여 오른쪽으로 확장된다. div
, p
, form
, header
, footer
, section
등block
요소에 width
값을 지정하면 가장자리까지 늘어나지 않는다margin
값을 auto
로 설정하면 가운데 정렬이 가능하다width
보다 max-width
를 사용하면 요소 너비가 브라우저 너비보다 크면 가로 스크롤바가 만들어지는 것을 방지할 수 있다inline
해당 단락의 흐름을 방해하지 않고 단락 내에서 위치함 span
, a
/* 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이다
inline level
은 적용 불가)inline level
은 적용 불가)inline level
은 원하는 대로 적용 불가 span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)✅ 목표!
display
키워드