[코드]

[배운내용]

네이버 오디오 페이지 오른쪽 실습

네이버 오디오 - 카테고리 페이지 실습

space-between 사용시 주의점

space-between의 단점

flex속성을 적용하여 justify-content: space-between; 속성값을 주면 해당 영역 안에서 동일안 간격을 가지고 배열되게 되는데, 이때 flex-wrap:wrap; 속성때문에 다음줄로 줄바꿈된다.
그런데 이때 남는 콘텐츠가 한줄을 채우는 갯수보다 모자랄 경우, 콘텐츠 사이의 여백이 달라지므로 정렬이 깨지게 된다.
이러한 특징때문에 space-between을 사용하는데 주의가 필요하다.

여기서 이부분을 해결하기 위해서 flex-start로 바꾸어주고, 하나의 리스트마다 오른쪽과 아래쪽에 margin을 준다. 그리고 한줄의 마지막인 여섯번째 요소에 margin-right때문에 다섯번째에서 줄바꿈이 일어나므로, 여섯번째마다 margin-right를 없애준다.

nth-child 활용하기

.audio_sub_main .audio_category .audio_category_lists .category_list:nth-child(odd) a{
	background-color: rgb(225, 187, 114);
}

.audio_sub_main .audio_category .audio_category_lists .category_list:nth-child(even) a{
	background-color: rgb(208, 140, 173);
}

nth-child()는 숫자 외에도 위와 같이 홀수, 짝수와 같은 특성도 입력할 수 있다.
아래 페이지에서 참고하자!

'nth-child' 참고페이지

[어려웠던 점]

없었다.

[학습소감]

마침 배열을 할때 float을 사용하기도 하고, space-between을 사용하기도 하는 것을 보면서 궁금증이 생겼었는데 오늘 숭버에서 다시한번 확인할 수 있었다. space-between을 사용하면 margin이나 padding을 하나하나 주지않아도 돼서 편하지만 오늘 배웠던 것과 같은 상황이 나타날 수 있으므로 주의해야겠다.