이미지 모양이 타원이 된다.

문제점

: 각 요소가 원이 아니라, 타원으로 나온다.

상황

HTML은 현재 아래와 같다.

<div display='flex'>
	{
		['A','B','C'].map(it => (
			<div display='flex' flex-direction='column' key={it} width='33%' >
				<img border='1px solid #7353ea' border-radius='50%' width='100%' height='100%' />
				<p>{it}</p>
		</div>
		))
	}
</div>

div의 width = 33%속성을 제거하고, p태그를 제거하니, 정상적으로 원형이 된다.

원인 추정

width의 100%, 33%가 의미하는 것이 뭘까?

💡 width, height 크기 설정

width: 100% ; 쓸 수 있는 만큼 다 써라

margin, padding, border영역 모두 포함

포함하지 않으려면 box-sizing:border-box

width:auto, height:auto

블록 요소의 초기값으로 자동 설정된다.

margin, padding, border 영역 포함 X

display값에 따른 default값

block : auto = 100%

inline : width설정이 불가능하므로 항상 100%

100%는 현재 요소가 사용할 수 있는 너비 중 전체를 쓰는 것을 의미한다.

즉, 이미지의 너비를 100%, 높이도 100%로 설정하면 너비와 높이는 동일한 값을 가지는 것이 아니라 둘 다 쓸 수 있는 전체를 쓴다는 것을 의미한다. 이를 해결하기 위해서는, width와 height각각 최대로 확장하는 게 아니라 둘의 길이를 맞춰줘야 한다.

해결 과정

1안. aspect-ratio

aspect-ratio로 이미지 비율을 설정한다

💡 aspect-ratio

: width와 height의 비율을 설정할 수 있다.
aspect-ratio : 16/9;

2안. flex:1 1

display:flex의 자식들이 동일한 너비를 가지게 하기 위해서는, 자식 요소에 flex:1 1을 설정한다.
💡 flex: 1 1

flex뒤에 오는 숫자는 순서대로 flex-grow / flex-shrink / flex-basis를 의미한다.
1. flex-grow : 아이템이 필요에 따라 성장할 수 있는 정도
  - 1이라면 아이템이 가능한 공간을 나눠 가지겠다는 의미
2. flex-shrink : 축소될 수 있는 정도
3. flex-basis : 아이템의 기본 크기
즉 flex: 1 1은 flex:1 1 0을 의미하며 사용가능한 공간을 균등하게 나눠가질 수 있고, 필요에 따라 축소될 수 있으며, 기본 크기를 갖지 않는(flex-basis = 0) 것을 의미한다.

+ a

box-sizing:’border-box’로 border의 관계없이 동일한 크기를 가지도록 한다.

💡 box-sizing

: 요소의 전체 너비와 높이를 어떻게 계산할 지에 대한 속성

content-box : 기본값, width와 height속성의 내용을 포함하지만, padding, border, margin은 포함하지 않는다.

width:200px, height:200px 설정했을 때

width = width

padding, border, margin은 별개로 공간을 차지한다.

border-box : width와 height속성이 content, padding, border은 포함하지만 margin은 포함하지 않는다.

width:200px, height:200px 설정했을 때

width = width + content + padding + border

margin은 포함하지 않는다.

정리하자면 box-sizing:content-box은 기본값으로, 기본적인 너비와 높이만 해당 너비와 높이를 지칭하는 것을 말한다. box-sizeing:border-box는 말 그대로 border까지 포함하는 것을 말하며 기본 너비와 높이, 그리고 padding과 border까지 포함하게 된다.

💡 margin > border > padding

바깥에서부터 순서대로 margin, border, padding이다.

개발하다 겪은 이슈

border가 생기고 안생기고에 따라 img크기가 바뀐다.
- border이 생긴다 > box-sizing:border-box로 설정했기 때문에, border영역만큼 안의 크기가 작아진다.(content+padding+border의 값을 유지하기 위해)

해결 방법 : border은 항상 존재하고, 선택이 안되었다면 border-color을 transparent로 설정한다.

결론

width:100%, height:100%가 절대 width = height를 의미하지 않는다. 1:1의 비율로 만들고 싶다면 aspect-ratio : 1/1 를 사용하자.

만약 width:100%와 함께 이 속성을 사용한다면 아래와 같이 width:100%를 지키려다 높이가 무너진 것을 발견할 수 있으니, aspect-ratio만 사용하자.

문제점