ProgramingTip

CSS 속성에서 '자동'값의 의미는 무엇입니까?

bestdevel 2020. 11. 5. 08:23
반응형

CSS 속성에서 '자동'값의 의미는 무엇입니까?


autoCSS 속성 값의 의미는 무엇입니까? CSS 속성의 값이로 설정되면 auto어떻게 검증?


속성 값의 해당은 요소의 내용 또는 컨텍스트에 따라 자동으로 조정 됩니다 .

예를 height: auto들어 있는 블록 수준 요소 는 더 많은 텍스트를 포함할수록 더 커집니다. 다른 예로, 블록 요소 margin: 0 auto는 뷰포트의 y 축을 따라 중앙에 위치 할 때까지 왼쪽 및 오른쪽 여백이 증가합니다.

값을 제공하는 속성에 따라 다르며 다른 속성은 콘텐츠와 따라 다르게 작동합니다.


자동은 자동으로 광고됨을 의미합니다. 내가 자동을 사용하는 가장 일반적인 이유는 다음과 같습니다.

margin: 0 auto;

요소를 중앙에 배치합니다.

참고 : 선언되지 않은 경우 작동하지 않습니다.

예 1 : div가 중앙에 있지 않고 자동이 작동하지 않습니다.

<style>
    .cont {
        margin: 0 auto;
    }
</style>
<div class="cont"></div> 

예 2 : div가 페이지 중앙에 배치됨

<style>
    .cont {
        width: 1000px;
        margin: 0 auto;
    }
</style>
<div class="cont"></div> 

예를 들어 블록 너비 설정 자동은 부모 요소의 전체 공간을 확장하지만 블록 높이 설정 자동은 콘텐츠의 필요한 공간 만 확장합니다.

<style>
    #outer{
        width: 500px;
        height: 500px;
        border: solid 2px black;
    }
    #inner{
        width: auto;
        height: auto;
        background-color: aqua;
    }
</style>
<div id="outer">
<div id="inner">content</div>
</div>

참고 URL : https://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property

반응형