베이스캠프 7일차

flex-wrap

flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정합니다.

만일 줄바꿈을 허용하지 않을 경우, item이 아무리 많아져도 무조건 한줄에 들어가도록 합니다.

flex-wrap : nowrap (기본값)

item의 줄바꿈을 허용하지 않습니다.

따라서 item이 아무리 많아져도 무조건 한줄에 들어가게 됩니다.

flex-wrap : wrap

item의 가로 사이즈가 container의 가로 사이즈를 넘겼을 때, 자연스럽게 다음 줄로 넘어갑니다

 

 

 align-items는 flex-items이 한 줄일 때 우선 적용

item이 두 줄 이상인 상태에서 정렬을 원하시면,align-content라는 속성을 이용해주시면 됩니다.

flex-item 속성들

지금까지는 flex-container에 적용하는 속성들을 flex-item에도 줄 수 있었습니다.

flex-container란 display:flex가 적용된 요소를 뜻합니다.(즉 부모 박스가 되겠죠?)

flex-item이란 flex-container가 안의 각각의 아이템을 뜻합니다.

 

 

 

flex-item의 속성에는 여러가지가 있습니다.

order : item의 순서를 지정합니다.

flex-basis : item의 기본사이즈를 지정합니다.

flex-shrink : 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item요소의 크기가 축소됩니다.

flex-grow : flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.위의 속성 이외에도 flex-item에는 여러가지의 속성이 있습니다.

CSS 상속

HTML 요소의 부모, 자식 관계

CSS의 상속?

기본적으로 css는 부모 요소에 지정한 속성값을 자식 요소에게도 상속해서 적용합니다.

어떻게 상속이 되는지는 아래 예시를 통해 알아보도록 하겠습니다.

<div class="container">

	바깥에 있는 박스입니다.

			<div class="inner-box">

				<p>안쪽에 있는 박스입니다.</p>
			
			</div>

</div>

.container{
	color : red
}

 

 

 

 

분명 부모 요소인 .container에만 속성을 줬는데 자식에게까지 속성이 상속되어 color:red 가 적용된 모습을 볼 수 있습니다.

이 처럼 css는 기본적으로 부모요소에 지정된 속성값이 자식요소에도 상속되어 적용됩니다.

 

다른 예를 들어보면

 

위의 사지처럼 div 안에 p태그가 있는데 container안에 속성을 주면

안에 div에 상속이 안되는걸 볼수 있습니다 이처럼

모든 속성이 상속되는 것은 아닙니다. css에는 상속 되는 속성이 있고 아닌 속성이 있습니다.

상속 되는 속성, 상속 되지 않는 속성

상속이 되는 속성과 상속이 되지 않는 속성에는 위와 같은 것들이 있습니다.

그렇다면, 수많은 CSS의 상속 여부를 전부 외워야할까요?

**그럴 필요 없습니다!**CSS를 사용하면서, 그때 그때 직접 속성을 적용해보며 눈으로 익히는 것이 가장 좋은 방법입니다.

 

 

CSS 상속의 우선순위 - Cascading

CSS는 기본적으로 부모 요소의 속성을 상속한다는 점을 배웠고, 속성마다 상속 유무가 다르다는 점도 알아보았습니다. 그렇다면, 여러개의 상속 속성이 겹쳤다고 할 때, 어떤 속성이 우선적으로 적용될까요?

이때는 Cascading이라는 이름의 규칙이 우선순위를 결정합니다.