[코드]

[배운내용]

▒TIP▒
웹표준에 맞게 작성하기위해서는 p, span 등과 같은 글을 입력하는 태그 안에 글을 작성해야한다. div는 공간을 만드는 태그이므로 위와 같이 작성하면 웹표준에는 적합하지 않다.

flex-wrap

: 나열된 요소들의 총 너비가 부모 너비보다 클 때, 이 요소들을 한 줄에 강제로 넣을지 다음줄로 줄바꿈하여 나열할지 결정하는 속성이다. (flex-wrap의 기본값은 nowrap)

(1) nowrap일 경우

(2) wrap일 경우

게임페이지 인기랭킹 섹션

-두 줄인 글자를 하나를 기준으로 중앙정렬하기

위와 같은 섹션을 구현하려고 한다. 제일 앞쪽에 랭킹을 표시하는 숫자와 그 아래 등락을 표시하는 숫자가 있다.
이 때 중앙 정렬을 위해서 flex를 지정해 줄 수 있는데,

그렇게 하면 이런 식으로 두 줄을 기준으로 중앙정렬 하게 된다. 하지만 이때 랭킹이 중앙에 정렬되고, 등락표시는 그 아래에 하고싶을 경우, 아래의 등락표시를 position:absolute;로 3차원 성질을 주어 분리시키면, 적용한 flex가 랭킹 숫자에만 적용되어 랭킹숫자를 기준으로 중앙 정렬된다.

그 다음 등락표시에 대한 좌표를 설정해 위치를 조정해주면 된다.

#popular_section .right_section_body .count_wrap .up_down_wrap{
	position: absolute;
	left: 6px;
	bottom: -13px;
}

[어려웠던 점]

[학습소감]

오늘 배운 게임 페이지에서 랭킹섹션에 대한 부분은 실무에서도 잘 활용될 것 같다. 이럴 때 z축을 잘 활용해주는 것이 매우 중요한 것 같다.