210720_[17]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_3_NAVER_main_page_2_end

홍연수·2021년 7월 20일

CSS html 기초과정 대구AI스쿨 웹프로그래밍 홈페이지 실습

1.학습한 내용

어제에 이어 네이버 메인 페이지 실습과정을 끝 마쳤다.

△ 오른쪽 영역

△ footer 영역

(2) 학습한 내용

로그인 영역 제작

로그인 버튼을 a tag로 제작하였고 inline 요소인데 display를 통하여 block으로 바꿔주었다.

<div id="account">
				<p>네이버를 더 안전하고 편안하게 이용하세요.</p>
				<a href="#">로그인</a>
				<div class="account_sub">
					<div class="left">
				<span>아이디</span>
				<span>비밀번호 찾기</span>
				</div>		
				<span>회원가입</span>
			</div>
		</div>

#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: #fff;
	font-weight: 700;
}

block의 성질 (아래 그림 보라색 참조)과 같이 div tag 안에 있는 로그인 칸을 쭉 채우기 위해 사용

쇼핑 타이틀 부분 ( 트렌드 쇼핑 )

어제 학습한 것과 같이 https://flexbox.help/에서 tool을 활용하여 배치하였다. 특이적으로 배웠던 내용은 없다.

쇼핑 타이틀 부분 ( 트렌드 쇼핑 )

https://flexbox.help/

display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-between;

다음과 같이 flex: space-between로 설정시 flex-wrap: wrap 상태에서는 부모의 크기를 넘어가는 내용들은 줄바꿈이 일어나게 된다. 이 때 내부 콘텐츠의 개수가 동일하지 앟으면 두번째 줄 컨텐츠가 극단적으로 배치되는 현상이 보인다.
그래서 내부 요소의 개수, 길이가 array 할 수 있는 상황이 아니라면 float:left를 사용하여 array 하는 것이 도움이 된다.

맨앞 생성한 세로 막대기 없애기

#main-footer .corp_lists li:first-child:before {
	content: initial;
}

#main-footer .corp_lists li:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	background-color: #e4e8eb;
	margin: 0 8px;
	
}