8.10 AI SCHOOL css(29)-네이버 실습

네이버 게임 3

#visitor-section .text-wrap .input-wrap input:focus {
	outline: none;
}

인풋에 왜 포커스일때 아웃라인을 넣지 않느지 확실히 이해하기

#visitor-section .text-wrap .input-wrap input {
	width: calc(100% - 44px);
	height: 100%;

	padding: 10px 16px;
	border: none;

	font-size: 15px;
	background-color: transparent;
}

#visitor-section .text-wrap .input-wrap button {
	width: 44px;
	height: 100%;
	background-color: grey;
}

인풋에 백그라운드 색상을 넣지 않아야, 인풋의 색상이 제대로 나온다.

하나 완성할때 마다 검사-개발자도구로 제대로 영역에 들어갔는지 확인하기

인풋과 버튼사이에 플렉스 넣기

a태그를 사용하지 않았는데도 페이지 이동이 되고 마우스가 활성화되길래 구글링하니 html만이 아닌 js만으로도 페이지 이동이 가능하다는 걸 알았다.
a태그 없이 이동하는 것을 크롬 개발자도구 콘솔로 통에js로 페이지 이동하는 것을 확인
... 수업 끝쪽에 a태그 넣는 게 맞았음....

#popular-section .ringht-section-body li .count-wrap .up-and-down-wrap span:before{
	content: ''; 넣지않으면 출력이 안된다.
	display: inline-block; 스팬은 인라인이라 바꿔야함
    position: relative; 중앙으로 옯기기위해 설정
	width: 7px;
	height: 3px;
	background-color: red; 제외  모든 비포에 적용이 되기 때문
    
    top:-4px 중앙으로 위치변경
    
} 

업 다운 이콜 모두 적용되기 위해서 span으로 정의

text-align: center;

text-align 은 인라인 -블럭과 인라인요소에만 적용이 되는 css 속성

<div id="popular-section" class="ringht-section ">

<div id="popular-section" class="ringht-section rank-section">

id는 한 문서안에 유일무일하기 때문에 다른영역에도 적용하고자 하는 디폴트css로는 적합하지 않다.

클래스를 하나 더 만듷어서 디폴트css 수정한다.

a태그 영역 활성화
디스플래이 블럭을 사용하낟.
width 100%?안됨 속성 불류할 주 알기!!!