HTML DOM 스타일 flexGrow 속성이란?
HTML DOM의 flexGrow 속성은 플렉스(flex) 컨테이너 내부에서 요소가 남은 공간을 얼마나 차지하며 크기를 확장할지 그 비율을 설정하는 데 사용됩니다. 이 속성은 단위가 없는 숫자 값을 받으며, 값이 클수록 다른 요소에 비해 더 많은 공간을 할당받게 됩니다.
문법
flexGrow 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.flexGrow = "number|initial|inherit"
각 값의 의미는 아래와 같습니다.
- number: 다른 요소들에 비해 해당 요소가 얼마나 성장할지 비율을 지정합니다. 기본값은 0입니다.
- initial: 속성 값을 기본값으로 되돌립니다.
- inherit: 부모 요소의 속성 값을 상속받습니다.
flexGrow 속성 예제
다음 예제는 버튼을 클릭하면 홀수 번째 div 요소의 flexGrow 값을 3으로 변경하여, 짝수 번째 요소보다 3배 더 넓게 확장되도록 만드는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 100px;
border: 3px groove navy;
display: flex;
text-align: center;
line-height: 90px;
}
div div {
box-shadow: inset 0 0 4px indigo;
}
#demo div:nth-of-type(even) {
flex-grow: 1;
background-color: lavender;
}
#demo div:nth-of-type(odd) {
flex-grow: 1;
background-color: thistle;
}
</style>
<script>
function changeFlexGrow() {
for(var i=1;i<6;i+=2)
document.getElementsByTagName("div")[i].style.flexGrow="3";
document.getElementById("Sample").innerHTML="홀수 번째 div 요소들이 이제 짝수 번째 요소보다 3배 더 크게 확장됩니다";
}
</script>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div>DEMO</div>
<div></div>
<div></div>
</div>
<p>아래 버튼을 클릭하면 위의 홀수 번째 div 크기가 변경됩니다</p>
<button onclick="changeFlexGrow()">Flex Grow 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
코드를 실행하면 5개의 자식 div가 플렉스 컨테이너 안에 균등하게 배치된 것을 확인할 수 있습니다.
Flex Grow 변경 버튼을 클릭하면 홀수 번째 div 요소들의 flexGrow 값이 3으로 설정되어, 짝수 번째 요소보다 3배 더 많은 공간을 차지하게 됩니다.
정리
flexGrow 속성은 반응형 레이아웃을 구성할 때 특정 요소가 남은 여유 공간을 더 많이 차지하도록 조절하는 강력한 도구입니다. JavaScript를 통해 동적으로 이 값을 변경하면 사용자 인터랙션에 따라 유연하게 레이아웃 비율을 조정할 수 있습니다.