210810_[32]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_10_NAVER_game_4_end

홍연수·2021년 8월 10일

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일때

회색 박스 만들기

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-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