반응형 CSS HTML5/css4 [css] height:100vh 세로 중앙 정렬하는 2가지 방법 1. height:100vh 세로 중앙 정렬하는 방법flexbox 사용하기display: flex;를 사용하면 부모 요소 안의 자식 요소를 세로로 중앙에 쉽게 배치할 수 있습니다. .container { display: flex; justify-content: center; /* 가로 중앙 */ align-items: center; /* 세로 중앙 */ height: 100vh; /* 화면 전체 높이 */ } align-items 속성 설명center: 중앙 정렬flex-start: 위쪽 정렬flex-end: 아래쪽 정렬 2. 요소를 가로, 세로 중앙 정렬하는 방법position 속성 사용하기position 속성을 활용하여 요소를 가운데에 정렬할 수 있습니다. .box { position: absol.. 2025. 6. 16. Flex CSS 완벽 가이드: Flexbox로 레이아웃 자유자재로 다루기 **Flexbox(Flexible Box Layout)**는 CSS3에서 도입된 강력한 레이아웃 모델로, 수평/수직 정렬, 간격 조절, 반응형 디자인 등을 보다 직관적으로 구현할 수 있게 도와줍니다. 이 글에서는 flex의 주요 속성과 예제를 한눈에 보기 쉽게 정리했습니다. 🔧 1. Flexbox의 기본 구조html복사편집div class="container"> div class="item">1div> div class="item">2div> div class="item">3div> div> css복사편집.container { display: flex; } display: flex;를 선언하면 flex container가 생성되며, 하위 요소는 flex item이 됩니다.📌 2. Flex Contai.. 2025. 6. 16. 버튼 스타일시트 버튼.btn1{display:inline-block;height:32px;background:url(../image/bg_btn3.gif) repeat-x;font-size:16px;line-height:32px;color:#373737;letter-spacing:-1px;text-align:center;font-weight:normal;border:1px #b4b4b4 solid;font-weight:bold;margin-top:0;} 2016. 11. 9. [css] css로 이미지 롤오버하기 2016. 11. 9. 이전 1 다음 반응형
