https://typeof-bong.tistory.com/13 (flex에 대한 심화내용)

1.학습한 내용

(1) 페이지 실습
네이버 게임 (https://game.naver.com/) 오른쪽 영역에 대한 작업으로 게임 페이지에 대한 마무리 작업을 하였다.

(2) 학습한 내용

최근 방문 css

#visitor-section .text-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

여기서 flex-wrap: wrap;을 flex-wrap: nowrap;으로 해버리면 resize가 일어난다.

flexbox.help site에서 속성을 보면 다음과 같다.

nowarp일때

wrap일때

인기 게임 라운지에서의 정렬

얼핏 보기에는 x축 중앙정렬로 배치되어 있는 것으로 보이나 각각의 요소들은 y축으로 정렬되어 있다.

HTML code

<li class="game-flex-start">
									<div class="count-wrap">
										<span class="count red">1</span>
										<div class="up-and-down-wrap">
											<!-- 순수하게 작대기만 들어가는 부분 -->
											<div class="equal"></div>
										</div>
									</div>

회색 박스 만들기

css code

/* 화살표( 회색박스 ) 만들기 */
.rank-section .right-section-body li:after {
 	content: '';	
 	width: 14px;
 	height: 14px;
 	background-color: grey;
}

숫자아래 등락을 나태난 css code

.rank-section .right-section-body .count-wrap .count {
	font-size: 17px;
	font-weight: 700 ;
	
}

.rank-section .right-section-body .count-wrap .count.red {
		color: #ff4c51;
	
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap {
	position: absolute;
	left: 6px;
	bottom: -13px;
	
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .equal {
	display: inline-block;
	width: 5px;
	height: 3px;
	background-color: grey;

	margin-left: 3px;
	
}

.rank-section .right-section-body .count-wrap .up-and-down-wrap .up {
	color: red;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .up:before {
		background-color: red;
}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .down {
	color: blue;

}
.rank-section .right-section-body .count-wrap .up-and-down-wrap .down:before {
	background-color: blue;

}
.rank-section .right-section-body .count-wrap .up-and-down-wrap span {
	font-size: 10px;
}


.rank-section .right-section-body .count-wrap .up-and-down-wrap span:before {
	content: '';
	display: inline-block;
	position: relative;

	width: 7px;
	height: 3px;
	
	top: -2px;
	margin-right: 1px;
	
}

game footer 부분 css code

#game-footer-section a {
	display: inline-block;
	font-size: 12px;
	color: #666;
}

#game-footer-section a:after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 1px 10px 0;
	background-color: #ddd;
	vertical-align: top;
}

a tag에 after 가상 클래스를 주어 세로 작대기를 만들었다.
이제 이정도는 책을 찾거나 웹을 찾을 필요없이 곧바로 나올정도가 되어야 할 것이다.

학습중에 궁금한것이 있어 추가적으로 남긴다.

가상엘리먼트 :before :after와 ::before ::after의 차이는?

(하코사에 올라온 질문 http://cafe.naver.com/hacosa/58441 에 제가 답변한 내용입니다.)

일단, 가상선택자(pseudo selector)에는 가상 클래스(pseudo class)와 가상 엘리먼트(pseudo element)가 있습니다.

엄밀히 따지면 가상 선택자는 없습니다만, 편의상 많이 사용되는 말입니다.

가상클래스에는 :link, :visited, :hover, :active, :first-child, :nth-child 등이 있고,
가상엘리먼트에는 ::first-letter, ::first-line, ::before, ::after 등이 있습니다.

CSS 2.1에서는 가상클래스, 가상엘리먼트 모두 싱글 콜론을 사용합니다.

하지만 CSS3 부터는 좀 더 명확히 분류하기 위해서, 가상 클래스에는 싱글콜론을, 가상 엘리먼트에는 더블콜론을 사용합니다.

브라우저 개발사들은 CSS2.1을 먼저 지원하고, CSS3도 지원을 계속 추가하고 있습니다.
CSS3에 대한 지원을 추가하더라도 이전 스펙에 있던 속성들도 함께 계속 지원합니다.

그래야 하위 호환성이 보장되기 때문입니다.
브라우저를 새버전으로 업데이트 했더니 예전에 잘 보이던 페이지가 안보이면 곤란하니까요.
표현에 치우친 네이밍이라는 이유로 HTML5에선 사라진(deprecated) font, center, strike와 같은 태그들을 여전히 브라우저에서 지원하는 것도 같은 이유에서 입니다.

이런 이유로 모던 브라우저들에서는 싱글콜론을 사용한 가상엘리먼트와 더블콜론을 사용한 경우를 모두 지원하고 있습니다.

하지만 IE8의 경우 CSS3를 지원하지 않기때문에 싱글콜론만 지원합니다.(IE6,7은 :before, :after를 지원하지 않습니다.)
따라서, IE8에서도 잘 동작하고 모던 브라우저에서도 잘 동작하는 가상엘리먼트를 만들려면 싱글 콜론을 사용해야합니다.

:before, :after 가상엘리먼트는 content 속성이 있을 경우에만 출력됩니다.
IE8에서 가상엘리먼트가 적용되지 않는 것 같다면 content 값을 확인해보시기 바랍니다.

출처 : https://tobyyun.tumblr.com/post/34698478144/%EA%B0%80%EC%83%81%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8-before-after%EC%99%80-before-after%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94

2. 실습

깃허브 소스코드:

naver 게임 -4 ( 오른쪽 - 전체 끝 ) 실습 HTML
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/57

naver 게임 -4 ( 오른쪽 - 전체 끝 )실습 css
https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/58

3. 어려웠던 내용 & 해결방법

어려운점이었던 것은 맨위에 초기로 설정했던 부분이 소실되어서 오른쪽 영역에 틀이 깨졌었는데, 개발자 도구로 찾아서 해결하였다.

4.소감

열심히!