7월 20일 (네이버 메인 카피캣)

학습내용

오늘은 오른쪽 부분과 하단 작업을 했다.

#main_right #account a {
	✔display: block;
	width: 100%;
	background-color: #19ce60;
	border-radius: 2px;

	padding: 15px 0;
	margin-bottom: 14px;

	text-align: center;
	font-size: 13px;
	color: #ffffff;
	font-weight: 700;

}

크기를 만들어주기 위해 inline요소인 a태그를 block으로 변경해주었다.
(모든 영역이 클릭이 가능해짐)

#main_right #account .account_sub {
	padding: 0 8px;

	✔display: flex;
	justify-content: space-between;
	align-items: center;

}

아이디 비밀번호찾기 | 회원가입 부분을 flex로 정렬해줌 (default값은 없애도 됨)

#main_right #shop_wrap ✔.shop_title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	padding: 12px 0;

}
#main_right #shop_wrap .shop_title ✔.right {
	display: flex;
	flex-wrap: wrap;
	✔justify-content: flex-end;
	align-items: center;
	
}

.shoptitle도 flex를 이용해 정렬해줌
.right은 _justify-content: flex-end;로 정렬해준다.

#main_right #shop_wrap .shop_content ✔.commerce_lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	
	padding: 12px 4px;
	background-color: #f7f9fa;
	border-bottom: solid 1px #dae1e6;
}

list의 갯수가 안 맞으면 맞물려서 어색할 수가 있음 그럴 때는 float:left;를 이용해서 정렬해준다.

#main_footer .news_lists li {
	display: flex;
	flex-wrap: wrap;
	✔justify-content: flex-start;
	align-items: center;
}

footer의 .news_lists li 안에서 flex정렬을 해준다.

#main_footer .corp_lists li {
	display: inline-block;
	vertical-align: middle;
}
#main_footer .corp_lists li:first-child:before {
	content: initial;
    
#main_footer .corp_lists li:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 0 8px;
	background-color: #e4e8eb;

	vertical-align: -1px;
}

.corp_lists li를 inline-block으로 변경 후 vertical-align:middle; 설정해줘서 중앙정렬 시킨다.
li사이의 |를 넣기 위해
:before 가상선택자를 이용한다.
content:"";는 빈 내용물을 설정해주고
inline-block으로 display설정 후
width, height값과 margin설정 후
vertical-align: -1px를 설정해준다.(vertical-align에는 middle, top등만 쓸 수 있는게 아니라 숫자도 입력이 가능하다. -값을 넣어주면 밑으로 내려간다)
회사소개 앞에는 |표시가 없기 때문에 가상선택자:가상선택자를 이용해 first-child:before 에는 content:initial;(처음 값으로) 설정해준다.

<완성된 네이버 메인 페이지>

네이버 메인 카피캣 코딩

어려웠던 점

오늘은 동영상 시간이 비교적 짧아서 그런지 어려운게 없었다.
어제 했던 내용과 비슷했기 때문에 수월했다.
굳이 꼽자면 아직 inline요소들을 block or inline-block요소로 변경하는게 조금 갸우뚱하다. 공간을 설정하기 위해서 변경해준다는 것을 뭔가 오늘에서야 알게 된 느낌이랄까

그리고 가상선택자에 가상선택자를 지정할 수 있다는 것도 알게 되어 낯설었다.
flex에서 justify-content: space-between; 이 속성값만 쓰다가
justify-content: flex-end; 이 속성을 한번 사용했더니 띠용 이였다.
한번 더 flex속성에 대해 알아봐야겠다.

해결방법

flexbox help 도와줘!

학습소감

매 수업마다 다시 알게되거나 새롭게 알게되는게 많은 것 같다.
알고 있었던 내용들도 또 한번 상기시켜주고 잊혀질만할 때 배웠던 것들이 또 나오고
반복이 정말 중요한 것 같다.