웹프로그래밍 (25) vertical-align

🔥오늘의 목표🔥

인라인 요소나, 인라인 블럭요소에 대해 적용할 수 있는 vertical-align에 대해서 알아보자.
vertical-align은 텍스트를 수직,수평정렬하게 해준다.
그 전에 블록, 인라인, 인라인 블록 요소에 대해 간단하게 다시 알아보자.

📖 블록 요소

• 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 사용가능한 최대 너비를 가진다.
• 한 줄에 하나의 블럭요소만 위치할 수 있다.

🔸예시 : <div>, <h1>, <p>

🔹크기 지정

• width, height로 크기를 지정할 수 있음
• padding, margin으로 상하좌우 여백을 지정할 수 있음

🔖 블록요소는 너비를 아무리 작게 설정해도 가로 영역을 모두 차지하기 때문에 다른 요소가 옆으로 올 수 없다.

📖 인라인 요소

• 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
• 너비와 높이를 내부 컨텐츠 크기만큼 설정된다.

🔸예시 : <span>, <img>

🔹크기 지정

• width, height로 크기를 지정할 수 없음
• padding, margin으로 좌우에만 여백을 지정할 수 있음 (위, 아래는 안됨)

📖 인라인 블록 요소

• 인라인 요소처럼 전후 줄바꿈없이 한 줄에 다른 엘리먼트들과 나란히 배치되면서 크기조정과 여백 조정이 가능하다.
• 기본 동작은 인라인 요소처럼 너비와 높이가 내부 컨텐츠크기만큼 설정된다.
• 이후 블록요소처럼 크기와 여백 지정을 할 수 있다.

🔸사용방법: css의 {display: "inline-block";}으로 스타일을 적용해야 함

🔹크기지정

• 블록 요소처럼 width와 height로 너비와 높이를 설정할 수 있음
• 블록 요소처럼 padding과 margin으로 상하좌우 여백을 지정할 수 있음

📕 vertical-align

• 인라인 요소, 인라인 블록,table-cell box에서의 수직 정렬을 지정한다.
• 블록레벨 요소를 수직 정렬할 수 없다.

vertical-align: keyword | length | percent | initial | inherit ;

📒 인라인 요소의 속성값
✍️ 부모에 대해서 상대적인 속성 값

• keyword : baseline, sub, super, text-top, text-bottom, middle
• length : 해당 엘리먼트의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬합니다. (음수값 사용 가능)
• percent : 해당 엘리먼트의 baseline을 부모의 baseline에서 주어진 퍼센트만큼 위로 정렬합니다. (음수값 사용 가능)

➕ 키워드 추가 설명

• baseline
  부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬합니다. 몇몇 replaced elements의 베이스라인은 예를들면<textarea>은 HTML 명세에 정의되어 있지 않으므로, 이 키워드는 브라우저마다 다른 결과를 보여줍니다.

• sub : 해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬합니다.

• super : 해당 엘리먼트의 baseline을 부모의 superscript-baseline으로 정렬합니다.

• text-top : 해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬합니다.

• text-bottom : 해당 엘리먼트의 bottom을 부모 엘리먼트 폰트의 bottom으로 정렬합니다.

• middle : 해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬합니다.

✍️ 선에 대해서 상대적인 속성값

• Baseline이 없는 엘리먼트에 대해서는 bottom margin edge가 baseline을 대신하여 사용됩니다.
  - keyword
  • top : 해당 엘리먼트의 top과 이것의 자손들의 top을 전체 라인의 top으로 정렬합니다.
  • bottom : 해당 엘리먼트의 bottom과 이것의 자손들의 bottom을 전체 라인의 bottom으로 정렬합니다.

📒 테이블 셀 속성값

• baseline (sub, super, text-top, text-bottom, <length>, <percentage>)
  셀의 baseline을 같은 행의 다른 cell들의 baseline과 정렬합니다.

• top
  셀의 top padding edge를 행의 top으로 정렬합니다.

• middle
  셀의 padding box의 중심을 행에서 중앙 정렬합니다.

• bottom
  셀의 bottom padding edge를 행의 bottom으로 정렬합니다.

😣오늘의 배운 점😣

모르겠는데..?

더 알아보기