[UXUI 디자인 1기] 240222 TIL.

240222 목

 

오늘은 코딩 데이

 

 

Q. 블록 레벨 요소와 인라인 요소가 무엇인가?

**블록 레벨 요소(block-level element)**

블록 레벨 요소(block-level element)는 HTML 문서의 구조를 형성하는 요소 중 하나입니다. 블록 레벨 요소는 새로운 줄에서 시작하고, 요소의 너비는 부모 요소의 가로 폭 전체를 차지하며, 세로로는 자신의 높이만큼의 공간을 차지합니다.

일반적으로 블록 레벨 요소는 다음과 같은 HTML 태그로 표현됩니다:

• <div>
• <p>
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• <ul>, <ol>, <li>
• <table>
• <form>

블록 레벨 요소의 특징은 다음과 같습니다:

1. 새로운 줄에서 시작: 블록 레벨 요소는 항상 새로운 줄에서 시작합니다.
2. 전체 너비 차지: 블록 레벨 요소는 부모 요소의 가로 폭 전체를 차지합니다.
3. 세로 정렬: 블록 레벨 요소는 자체의 높이만큼의 공간을 차지합니다. 만약 높이가 지정되지 않았다면, 내부 콘텐츠의 크기에 맞게 높이가 결정됩니다.
4. 자식 요소: 블록 레벨 요소는 다른 블록 레벨 요소나 인라인 요소를 포함할 수 있습니다.

블록 레벨 요소는 웹페이지의 구조를 정의하고 레이아웃을 형성하는 데 주로 사용됩니다. 따라서 <div>, <p>, <h1>, <ul>, <table> 등의 요소는 블록 레벨 요소에 속합니다.

**인라인 요소(inline element)**

블록 레벨 요소(block-level element)와 반대로 인라인 요소(inline element)가 있습니다. 인라인 요소는 새로운 줄에서 시작하지 않고, 요소의 너비와 높이가 내부 콘텐츠의 크기에 따라 결정됩니다. 이러한 특성 때문에 인라인 요소는 텍스트나 이미지 등과 같은 내부 콘텐츠를 포함하는 데 주로 사용됩니다.

일반적으로 인라인 요소는 다음과 같은 HTML 태그로 표현됩니다:

• <span>
• <a>
• <strong>, <em>, <b>, <i>
• <img>
• <input>
• <button>
• <label>
• <abbr>, <cite>, <code>, <mark>, <small>, <sub>, <sup>, 등

인라인 요소의 특징은 다음과 같습니다:

1. 새로운 줄에서 시작하지 않음: 인라인 요소는 텍스트의 일부로 간주되어 새로운 줄에서 시작하지 않고, 텍스트 흐름을 유지합니다.
2. 내용의 크기에 따른 너비와 높이 결정: 인라인 요소의 너비와 높이는 내부 콘텐츠의 크기에 따라 동적으로 결정됩니다.
3. 부모 요소의 일부분만 차지: 인라인 요소는 자신의 내부 콘텐츠만큼의 공간을 차지하며, 부모 요소의 일부분에만 표시됩니다.
4. 다른 인라인 요소 포함 가능: 인라인 요소는 다른 인라인 요소를 포함할 수 있지만, 블록 레벨 요소를 직접 포함할 수는 없습니다.

이러한 특성 때문에 인라인 요소는 텍스트 스타일링이나 링크, 이미지, 버튼 등과 같은 작은 요소들을 만들 때 주로 사용됩니다.

[정렬 방식]

1. 블록 레벨 요소 정렬:

블록 레벨 요소는 기본적으로 너비를 부모 요소의 가로 폭 전체로 확장하므로, 가로 정렬과 관련하여 추가적인 CSS 속성을 사용할 필요가 없습니다. 세로 정렬은 margin, padding, position, top, bottom 등의 속성을 사용하여 수행할 수 있습니다. 일반적으로 블록 레벨 요소의 수직 정렬은 부모 요소에 대해 **display: flex;**나 **position: absolute;**와 함께 top, bottom, transform 등의 속성을 사용하여 수행됩니다.

예를 들어, 부모 요소에 대해 **display: flex;**를 사용하여 자식 요소들을 수직으로 가운데 정렬할 수 있습니다:

cssCopy code
.parent {
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
}

1. 인라인 요소 정렬:

인라인 요소는 기본적으로 텍스트 흐름에 따라 표시되며, 너비와 높이가 내부 콘텐츠의 크기에 따라 동적으로 결정됩니다. 따라서 인라인 요소의 가로 정렬은 text-align 속성을 사용하여 수행할 수 있습니다.

cssCopy code
.parent {
    text-align: center; /* 가로 중앙 정렬 */
}

수직 정렬의 경우, 인라인 요소는 텍스트 흐름에 따라 표시되므로 부모 요소에 대해 line-height 속성을 사용하여 수직 정렬할 수 있습니다. 또는 부모 요소에 대해 **display: flex;**를 사용하여 수직 가운데 정렬을 수행할 수도 있습니다.

이러한 방법들을 사용하여 블록 레벨 요소와 인라인 요소를 정렬할 수 있습니다. 요구 사항에 맞게 적절한 방법을 선택하여 사용하면 됩니다.

 

과제를 공부하면서 기본적으로 모르는 부분에 있어서 디깅 후 정리했다. 코딩 2일찬데 너무 재밌는데 너무 어려웠다...