💻 학습 내용

🛫GIT-HUB

HTML | naver_ent_news_main_left(2)
CSS | naver_ent_news_main_left(2)

main_left_2

🖤 기자추천 연재코너에서 사진의 이미지가 border안에 쏙 들어가게 하는 방법

.ent_left #ent_section_9 li a img {
	width: 100%;
	height: 122px;
}

img의 width 값을 100%로 줘야 한다.
왜냐하면 우리는 초기값으로 { box-sizing: border-box}을 주었기 때문이다.

🖤 가상선택자 after사용하여 디자인 하기

.ent_left #ent_section_9 .txt_wrap .program:after {
	content: '';
	display: inline-block;
	width: 2px;
	height: 2px;
	background-color: #d3d3d3;
	vertical-align: top;
	margin: 9px 2px 0 4px;
}

가상선택자 before와 사용법이 동일하다.
after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성.
보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용g하고 기본값은 인라인이다.

📝 마무리

어제 수업하였던 main_left를 이어서 마저 완성시켰다.
코드를 작성하는 방법이 비슷하여 크게 어려운 부분이 느껴지지는 않았다.
저번 수업과 다르게 이번 수업에서는 after가상선택자를 이용하여 네모 모양을 만들어 봤다. 작성법은 비슷하였다.