중앙정렬

[CSS] 중앙 정렬의 3가지 방법(position, flex, table)

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 중앙 정렬에 대해 알아보자! 화면 정중앙에 요소를 정렬하는 방법은 크게 3가지가 있다. position 속성과 transform 속성 사용 flex 속성 사용 table 속성 사용 1. position 속성과 transform 속성 사용 [HTML] [CSS] .position-center { width: 400px; height: 300px; background-color: green; position: relative; } .position-center > div { width: 100px; height: 100px; background-color: lightgreen; position: absolute; top: 50%; left: 50%; transfo..

[TIL] CSS flex, table, 부트스트랩

✍ Today I Learned display: flex; display: table; 을 이용하면 중앙 정렬을 간단하게 할 수 있다. .flex-container { display: flex; justify-content: center; align-items: center; } .boxwrap { display: table; } .boxwrap .box { display: table-cell; table-layout: fixed; vertical-align: middle; text-align: center; } 쇼핑몰 페이지가 PC와 모바일 서버를 따로 두는 이유 트래픽 분산을 위해 기획적인 부분(노출되는 품목이 다름) 부트스트랩을 사용하는 2가지 방법 다운 받아서 사용 장점 - 내가 사용하는 버전으로..