수직정렬

[CSS] 수직 정렬의 3가지 방법(padding, line-height, position)

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 수직정렬에 대해 알아보자! 수직정렬에는 3가지 방법이 있다. padding 속성 사용 line-height 속성 사용 position 속성과 transform 속성 사용 전체적으로 사용할 예제 제목 내용 부모 를 간단하게 컨테이너라고 지칭하겠다. 1. padding 속성 사용 .padding { width: 400px; background-color: orange; padding: 100px 0; } padding-top 과 padding-bottom 에 동일한 값을 준다. (예시에서는 padding: 100px 0; 으로 한 번에 top과 bottoom 값 설정) 장점 - 컨테이너의 높이값이 정확하지 않을 때 간단하게 사용할 수 있다. 단점 - 내가 설정한 ..

[TIL] CSS 정렬, 반응형

✍ Today I Learned 오늘도 내비게이션 바와 아웅다웅하며 알게 된 것들 내비게이션 바 오른쪽 정렬하면 콘텐츠 내용 계속 바뀌던 거 에 display: inline; 설정으로 해결 내비게이션 바의 height이 정해져 있으면 line-height 똑같이 설정해서 수직정렬 높이를 굳이 지정하지 않았으면 padding으로 수직정렬 에 vertical-align: middle; 설정 vertical-align은 오로지 inline과 table-cell element에만 적용된다. (block level element에 사용 X) 예를 들면, img element를 text element 라인 속에서 정렬할 때 쓰인다. (참고자료) float으로 한쪽 정렬을 하지 않으면 아주 미세한.. 이상한 마진이 ..