7.28 AI SCHOOL css(21)-네이버 실습

네이버 블로그 2/3

<div id="blog-helper">
					<ul class="blog-hleper-lists">
						<li><a href="#">블로그 앱 간편설치</a></li>
						<li><a href="#">개발 가이드</a></li>
						<li><a href="#">블로그 글 권리 보호</a></li>
						<li><a href="#">블로그 스마트</a></li>
					</ul>
				</div>

이런 구조에서 li안의 빈여백도 커서를 올렸을때 마우스가 활성화되게 하는 방법

.blog-main #blog-main-content .blog-main-right #blog-helper li a{
	display: block;
}

백그라운드 사이즈
넣고
a 에 padding left를 넣으면 왼쪽으로 영역생기는데 영향을 받은 오버젝트는 글자
이미지는 영향을 받지 않는다.
background-size: 20px 20px; 백그라운즈의 이미지의 크기를 임의로 조절할 수 있다. 첫 수치는 상하 둘째 수치는 좌우

네이버 블로그 3/3
span 태그는 인라인요소라 공간을 만들어도 출력이 안된다
그래서 디스플레이 블랙을 넣어 마진을 넣어 공간을 설정한다.

마찮가지로 span에다가 befor를 넣을때
디스플레이 인라인 블락을 해야돈디ㅏ.... 이거 안해서....진짜......

/*main.blog-main-detail {
padding: 0;

> padding top!! 좀 

} 간격이 눈에 거슬려서 없애고 싶을 때 사용 */
좀 더 세세하게 디테일하게 볼 수 있게 하기