디스플레이 속성 <section>, <article> flex-grow, flex-shrink

1. 디스플레이 속성

section태그는 섹션(부분, 구역, 영역)들을 그룹화 해서 분리하는 역할

➡️ section은 주제별로 구분한 그룹이다.

논리적으로 관계 있는 요소 또는 문서를 분리할 때 사용

 

article 태그는 문서내에서 그룹화해서 분리하는 역할

➡️ article은 내용이 독립적이다.

article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용, 좀 더 구체적으로 사용

 

2. flex item의 팽창과 수축 flex-grow, flex-shrink

플렉스박스의 유연한 레이아웃을 가능하게 하는 속성 2가지 : flex-grow, flex-shrink

아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능

 

flex-grow 사용 예

기본 너비가 "100px" 이기 때문에 기본 너비로 고정되면서 너비 "600px" 인 레이아웃

 

.item:nth-child(1){flex-grow: 1;}
.item:nth-child(2){flex-grow: 1;}
.item:nth-child(3){flex-grow: 0;}
.item:nth-child(4){flex-grow: 2;}

flex-grow 사용해서 버튼 크기 키움!

 

flex-shrink 사용 예

.item:nth-child(1){flex-shrink: 1;}
.item:nth-child(2){flex-shrink: 0;}
.item:nth-child(3){flex-shrink: 1;}
.item:nth-child(4){flex-shrink: 2;}

 

 

 

 

출처 : https://blogpack.tistory.com/863