💻 학습내용

🛫GIT-HUB

HTML | naver_esports_main_right
CSS | naver_esports_main_right

main_right

#esports_news_view li a .image_wrap {
	position: relative;
	overflow: hidden;
	width: 84px;
	height: 48px;
	border: solid 1px rgba(0, 0, 0, .04);
	border-radius: 4px;
}
#esports_news_view .image_wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

🖤 이미지위에 레이아웃을 겹칠 때 image_wrap을 img사이즈와 동일하게 맞춰주고 position을 relative로 설정해준다.
img는 width 100%, height 100%를 입력해주고 position을 absolute를 주면서 겹칠 수 있도록 해준다.
🖤 overflow hidden을 주는 이유는 border-radius값을 설정해줬는데 이미지의 크기 때문에 적용되지 않은 것 처럼 보여서 넘치는 부분은 숨겨주면서 border-radius가 적용되도록 해주는 것이다.

#esports_schedule .schedule_wrap .schedule_header span{
	position: relative;
	font-size: 18px;
	font-weight: 800;
	top: 3px;
}

🖤 날짜 부분이 x축으로 올바르게 정렬이 되지 않았는데 그 이유는 span 태그는 고유로 가지고 있는 공간이 있기 때문이다. 이럴 때는 직접 위치 조율을 해줘야 한다.
position relative를 주고 top값을 이용해서 위치를 조정해주었다.

구글 웹폰트

⭐️ 구글 웹폰트

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/style.css">

🖤 폰트 적용 링크를 먼저 작성하고 css와 연동하는 링크를 작성해줘야 오류가 발생하지 않는다.

font-family: sans-serif;

🖤 css에는 font-family를 이용하여 폰트 이름을 복사해서 붙여넣어주며 된다.
마지막 sans-serif는 필수로 작성해 줘야 한다. 모든 웹브라우저에 적용되는 폰트이기 때문이다.

📝 마무리

💛 어제 내가 혼자 복습했던 이미지 위에 레이아웃이 겹치도록 하는걸 수업 시간에 또 해볼 수 있어서 좋았다.
image_wrap 크기를 img 크기로 설정해야 absolute 적용된 것들이 위치를 제대로 잡을 수 있다는 것을 알았다.

💛 폰트 적용하는 법을 다시 한번 배웠다. link 순서를 제대로 입력해주어야 한다는 것을 알았다.

💛 어려운 부분은 크게 없었다.. 다만 저번에 작성해둔 나의 sublimetext가 사라져서...그 부분을 다시 작성하고 수정하는데 시간이 오래 걸렸다...^^
저장을 꾸준히 하자 제발