💻 학습 내용

🛫 GIT-HUB

HTML | naver_esports_header
CSS | naver_esports_header

HTML | naver_esports_main_top
CSS | naver_esports_main_top

##esports 기본값

.esports_flex_between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

.esports_flex_start {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}


.esports_flex_center{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.esports_flex_end{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: stretch;
}


.esports_container {
	width: 1280px;
	margin: 0 auto;
}

esport_header

#esports_header {
	position: fixed;
	width: 100%;
	background-color: #151618;
	left: 0;
	top: 0;
}

🖤 스크롤이 움직이더라도 헤더부분은 위에 고정이 되어 있게 하기 위해서 position을 fixed로 설정하고
Fixed는 위치 값이 브라우저를 기준으로 하기 때문에 left:0; top:0;을 주면서 브라우저 상단에 고정될 수 있는 위치값을 한번 더 설정해주는 것이다.

esports_main_top

 #esports_main #esports_main_top .live_wrap ul li a {
	align-items: flex-start;
}

🖤 align-items: flex-start; 을 설정해줘야 .live_wrap 부분이 제일 윗쪽으로 붙어서 정렬이 가능해진다.
제일 윗쪽으로 붙게되면서 완성본의 레이아웃이 형성된다.

❌ align-items: flex-start;을 적용하지 않았을 때

📝 마무리

🖤 오늘은 position:fixed를 처음으로 작성해보았다.
매번 relative와 absolute만 사용하다가 fixed를 처음으로 써보니 신기하고 재미있었다.
오늘은 위의 부분만 만들어서 스크롤이 생기지 않아서 fixed의 효과를 확인하지 못했지만, main부분을 다 채워서 header가 고정되어 있는 것을 빨리 확인하고 싶다.

🖤 hover가상선택자를 오랜만에 작성했다. 마우스의 커서가 올라가면 디자인이 변경되는 가상선택자인데 되게 간단한데 그럴듯한 효과를 낼 수 있어서 앞으로도 많이 사용할 수 있을 것 같다.

🖤 크롬의 검사 기능내에서 색깔을 추출해내는 방법을 배웠다.color부분 앞에 있는 색깔이 그려진 네모칸을 누르면 색을 추출해낼 수 있는 스포이트가 나타난다 그걸로 원하는 색이 있는 부분에 갖다 대면 색상값이 추출된다.

🖤 이제는 앞에서 사용했던 코드를 반복적으로 손에 익히는 연습을 하는 거라 크게 어려운 과정이나 개념이 등장하지 않았다!