CSS를 사용한 양방향 센터링

반응형

때로는 요소를 웹 페이지의 세로 및 가로 가운데에 배치하고자 할 수 있습니다(따라서 양방향). 이 가이드에서는 이를 위해 사용할 수 있는 두 가지 간단한 CSS 기술을 살펴보겠습니다. 이러한 CSS 기술은 포지션과 플렉스박스입니다.

전제조건

이 안내서의 내용을 이해하려면 다음을 충족해야 합니다.

• 코드 편집기(Visual Studio Code 사용 중)
• HTML 및 CSS(특히 포지션 및 플렉스박스)에 대한 기본 지식
• 웹 브라우저(Google Chrome 사용 중)

 

위치 매개 변수 사용

양방향 센터링을 위해 위치 특성(및 변환 특성)을 사용하여 상위 요소 내의 어디에나 하위 요소를 배치할 수 있습니다. 상위 요소의 위치가 상대적인 경우, 직계 하위 요소는 그 치수, 즉 폭과 높이로 제한됩니다. 어떻게 작동하는지 살펴보겠습니다.

HTML 마크업:

<div class="container">
    <div class="element">Element to be centered!</div>
</div>

CSS 스타일시트:

 

.container {
    position: relative;
    height: 100vh;
}

.element {
    position: absolute;
    top: 50%;
      left: 50%;
        transform: translate(-50%, -50%);
}

위치: 절대; 속성이 .element {}에 적용되면 .container 내의 모든 위치에 .element를 배치할 수 있습니다.
맨 위: 50%와 왼쪽: 50%는 요소를 수직 및 수평으로 절대 중심으로 이동하고 변환: 변환(-50%, -50%)은 완벽한 중심에 놓이도록 수정합니다.
높이: 100vh;는 상위 요소의 높이, 즉 하위 요소를 중앙에 배치할 .container를 제어합니다.

Flexbox 기법 사용

양방향 중심 배치에 CSS Flexbox를 사용하여 다른 요소 내의 요소 배치를 제어할 수 있습니다. 화면표시: 플렉스 특성이 상위 요소에 적용되면 직접 하위 항목이 플렉스 항목이 되므로 선형 특성을 추가하여 하위 항목(플렉스 항목)을 제어할 수 있습니다. 작동 방식을 살펴보겠습니다.

 

HTML 마크업:

<div class="container">
    <div class="element">Element to be centered!</div>
</div>

CSS 스타일시트:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

정렬 항목: center; .container에 적용된 속성은 하위 요소를 수직으로 가운데에 놓고, 맞춤 내용: center; 수평 가운데에 놓습니다. 특정 경우 정렬 항목: 중심; 효과가 없어 보일 수 있습니다. 상위 요소에 높이 속성이 없기 때문일 수 있습니다. 이 가이드에서는 정렬 항목의 높이: 중심; 에 대한 높이: 100vh; .container {} 내에 포함시킬 것입니다.

 

유지관리성, 유연성 및 사용 편의성은 위치 기술에 비해 이 기술의 주요 장점 중 일부이다.

결론

양방향 센터링은 프런트엔드 개발의 필수적인 부분이며, 이 기사에서 학습한 바와 같이, 어떻게 작동하는지를 이해한다면 쉽게 처리할 수 있습니다. CSS를 중심으로 양방향을 구현하기 위한 두 가지 표준 기술은 이 문서에서 다루는 포지션과 플렉스박스 속성이다.

이 기사와 관련하여 질문이나 의견이 있다고 가정합니다. 그럴 때는 댓글창에 올려도 되고, 다른 프런트엔드 관련 주제가 있으면 주저 말고 트위터나 링크드인을 통해 연락 주세요.