잘 모를 수 있는 CSS 속성

place-Items: center, diplay: grid 조합

두 개 속성을 조합하면 요소를 가로 및 세로로 가운데에 맞출 수 있습니다.

<!-- HTML -->
<div class="hero">
    <div class="hero-wrapper">
        <h2>CSS is awesome</h2>
        <p>Yes, this is a hero section made for fun.</p>
        <a href="#">See more</a>
    </div>
</div>

/* CSS */
.hero {
    display: grid;
    place-items: center;
}

place-items 속성 브라우저별 지원 현황

 

margin: auto, display: flex 조합

이 방법도 마찬가지로 가로 및 세로 가운데에 맞출 수 있습니다.

<!-- HTML -->
<div class="parent">
    <div class="child"></div>
</div>

/* CSS */
.parent {
    width: 300px;
    height: 200px;
    background: #ccc;
    display: flex;
}
 
.child {
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto;
}

 

text-align 속성

CSS flexbox 및 grid의 인기가 높아짐에 따라 CSS를 처음 시작한 사용자는 현대식 대신 센터링 및 정렬 방법을 사용하는 것이 일반적입니다 text-align. 그러나 이전 방법은 여전히 ​​작동합니다.

를 사용하면 text-align: center문제를 빠르게 해결할 수 있습니다. 다음 예를 고려하십시오.

내용을 중앙에 배치해야 합니다. flexbox 또는 grid를 굳이 사용할 필요가 없습니다. 또한 text-align 속성은 브라우저 지원에 대해 설명할 필요가 없습니다. 

 

column-rule 속성

CSS 열은 요소를 열로 나눌 수있는 레이아웃 방법입니다. 일반적인 사용 사례는 단락 텍스트 내용을 두 줄로 나누는 것입니다. 그러나 덜 일반적인 점은 열 사이에 테두리를 추가할 수 있다는 것입니다. 

/* CSS */
p {
    columns: 3;
    column-rule: 2px solid #222;
}

column-rule 속성 브라우저별 지원 현황

 

[ 출처 ]

• uncommon css