[CSS][Layout][Flow Layout : 블록 요소와 인라인 요소]

CSS에는 총 7 종류의 레이아웃이 있음.

ex) Flexbox, Grid, ect.

그중 Default는 Flow Layout임.

모든 엘리먼트는 inline 엘리먼트, box 엘리먼트, inline-block 엘리먼트 중 하나임.

block 엘리먼트는 문단, 레이아웃을 위해 사용됨.

 

인라인 엘리먼트는 특정 텍스트, 단어를 강조하기 위해 주로 사용됨.

인라인 요소는 레이아웃에 영향을 주지 않는다.

참고: 인라인 요소는 새 줄에서 시작하지 않고 필요한 만큼만 너비를 차지합니다.

즉, 블록 관점에서 크기는 변하지 않는다.

margin-left, margin-right로 좌우 조절은 가능함.

height같은 속성으로 블록 height에 영향을 주지는 않음.

• 인라인 요소의 높이는 컨텐츠의 높이
• 인라인 요소의 너비는 컨텐츠 너비
  • CSS로 높이와 너비 조절 불가능.
• <br/>과 같은 명백한 줄바꿈이 없으면 왼쪽에서 오른쪽으로 계속 흐른다.

 

예외 : 아래 요소들은 인라인 엘리먼트지만 자체적인 디멘션을 가질 수 있어, 레이아웃에 영향을 준다.

인라인 wrapper 내부 객체의 demension이라고 생각하자.

• <img />
• <video />
• <canvas />
• <button/>

블록은 인라인 공간을 공유하지 않는다.

참고: 블록 수준 요소는 항상 새 줄에서 시작하고 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 확장).

• 기본 블록 요소의 높이는 컨텐츠 높이
• 기본 블록 요소 너비는 페이지 너비
  • CSS로 수정 가능
• 레이아웃, 섹션 구성을 위해 사용됨
• 인라인, 블록 요소를 자식으로 가질 수 있음.
• 명백한 줄 바꿈 없이 항상 새로운 줄에서 시작함. 위에서 아래로 흐름.

글자를 위해 150px만 필요하지만, 일단 블록은 최대한 공간을 다 차지하려 한다.

fit-content로 최소 공간만 갖게 해도 한 줄을 다 차지한다.

인라인 요소의 마법의 공간

이미지는 정확하게 300*300이지만 div 아래에 공간이 좀 남아있음.

이미지, 버튼, 비디오, 텍스트 등의 인라인 요소를 위해 브라우저는 약간의 공간을 예약해둔다.

이는 line-height에 비례하는데, 단락 내 행간이 너무 빽빽한걸 막기 위함이다.

해당 현상을 피하려면,

• 이미지를 display:block으로 설정하기
• div의 line-height를 0으로 설정하기

인라인 요소 사이의 줄바꿈과 띄어쓰기

브라우저는 단락 내 줄바꿈과 공백을 구분할 수 없다. 따라서 뭐가 있던 간에 요소 사이의 줄바꿈은 space처럼 취급한다.

해당 문제를 해결하려면 아래의 링크를 참조하거나, float, flexbox를 사용한다 (후자를 훨씬 많이 사용)

이미지 사이에 띄어쓰기가 있다.

줄바꿈을 없애면 달라붙는다.

ideas on CSS Tricks

Fighting the Space Between Inline Block Elements | CSS-Tricks

인라인 요소의 line-wrap(줄바꿈)

인라인 요소는 상자 외의 모양을 가질 수 있음

인라인은 줄바꿈이 가능

 

테두리를 추가해보면 명확해짐

이 특성 때문에 패딩을 적용하면 재미있는 일이 일어남

양쪽 끝에만 패딩이 적용됨.

<p>
  <strong>
    These words are broken up across many lines.
  </strong>
</p>
<style>
strong {
  padding-left: 8px;
  padding-right: 8px;
  background: peachpuff;
}

p {
  max-width: 125px;
}
</style>

각 라인별로 패딩을 적용할 순 없을까?

라인별 패딩 적용

box-decoration-break 애트리뷰트를 적용한다.

• slice (default)
  • 스시롤처럼 하나
• clone
  • 각 쪼개진 세그먼트에 각각 스타일 적용

<style>
strong {
  /* Our obscure magic trick: */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  
  padding-left: 8px;
  padding-right: 8px;
  background: peachpuff;
}

p {
  max-width: 125px;
}
</style>
<p>
  <strong>
    These words are broken up across many lines.
  </strong>
</p>

참고 : -webkit 접두사와 결합하면 Chrome, Firefox, Edge 및 Safari에서 작동합니다.

인라인 블록

부모는 인라인 블록을 인라인처럼 취급하지만(internally), 자기 자신은 블록처럼 스타일을 적용함.(externally)

모든 스타일을 적용할 수 있고, 인라인처럼 쓸 수 있다.

함정 : 줄바꿈이 적용되지 않음

따라서 링크가 단락의 일부가 아닌 경우에만 이와 같은 효과를 사용해야 한다. (예: 탐색 링크).

 

참고 :

CS193X: Web Programming Fundamentals (stanford.edu)

CS193X: Web Programming Fundamentals