Baseline2 HTML/CSS] vertical-align으로 수직 정렬하기 vertical-align 속성은 수직 정렬을 지정하는 속성입니다. 수직 정렬을 해야하기 때문에 inline이나 inline-block 또는 table-cell 엘리먼트에만 적용됩니다. block에는 쓸 수 없다는 건 안 비밀~ 먼저 간단하게 표를 이용해서 기준선을 옮겨 보겠습니다. 대표적인 기준선은 다음과 같습니다. baseline 셀의 기준 선에 내용의 기준선을 맞춤 top 패딩의 위쪽에 내용의 기준선을 맞춤 middle 패딩의 중앙에 내용의 기준선을 맞춤 bottom 패딩의 아래쪽에 내용의 기준선을 맞춤 vertical-align의 기본값은 baseline입니다. baseline으로 해주면 부모의 기준선에 맞추어서 해당 엘리먼트의 기준선을 정렬해줍니다. TEST TEST TEST TEST table.. 2021. 8. 19. HTML/CSS] baseline이란? vetical-align 속성을 사용하려면 baseline을 알아야하는데요. baseline은 기준선이라는 의미로 정렬을 할 때, 중요한 기준이 됩니다.쉬운 내용이지만 헷갈릴 수 있으니 한번 알아두면 좋습니다. baseline 아래 그림처럼 글자의 마지막을 주욱~ 그엇을 때 이어지는 선이 baseline입니다. 알파벳이 조금 삐져나오긴 하지만 저 빨간 선을 기준으로 글자가 쓰여졌다는 걸 알 수 있습니다. 그런데 조금 헷갈릴 때가 있습니다. overflow를 써서 예시를 들어보겠습니다. 1. overflow : scroll 이런 경우에는 요소의 margin 끝이 기준이 됩니다. 2. overflow : visible 글자가 보이는 경우에만 글자의 끝이 baseline으로 설정됩니다. 3. overflow .. 2021. 7. 9. 이전 1 다음
