2021.07.20 NAVER-2

정혜리·2021년 7월 20일
CSSNaverhtml개발일지코린이프론트엔드
0

Practice-copy_websites

목록 보기
6/15

Day17,
어제에 이어 Naver 메인 따라만들어보기를 완료했다!

오늘 무엇을 배웠지?

Naver : https://www.naver.com/

메인 right_main

html

(어제의 html 파일에 이어서)
1. <div>태그로 main_right영역을 설정하고 id를 입력한다. 우측의 로그인 영역을 설정하고 id를 입력한다. <p>태그로 설명글을 입력하고, <a>태그로 로그인 창으로 넘어가도록 설정한다. <div>태그로 아이디, 비밀번호 찾기, 회원가입 영역을 설정한다. 아래에 <div>태그로 배너광고 영역을 설정하고 id를 입력한다.

	<div id="main_right">
			<div id="account">
				<p>네이버를 더 안전하고 편안하게 이용하세요.</p>
				<a href="#">로그인</a>
				<div class="account_sub">
					<div class="left">
						<span>아이디</span>
						<span>비밀번호 찾기</span>
					</div>
					<span>회원가입</span>
				</div>
			</div>
			<div id="banner"></div>
  1. 배너광고 아래에 <div>태그로 쇼핑 물품 리스트 영역을 설정하고 id, class를 설정한다. <ul>,<li>태그로 각 항목을 목록을 구성하고 필요한 만큼 복사해 붙여넣는다.
			<div id="shop_wrap">
				<div class="shop_title">
					<h3><a href="#">트렌드 쇼핑</a></h3>
					<div class="right">
						<h4><a href="#">상품</a></h4>
						<h4><a href="#">쇼핑몰</a></h4>
						<h4><a href="#">MEN</a></h4>
					</div>
				</div>
				<div class="shop_content">
					<ul class="commerce-lists">
						<li><a href="#">G마켓</a></li>
					</ul>
					<div class="shop_goods">
						<ul class="product-lists">
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 </span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

	</main>

CSS-Style

(어제의 css에 이어서)
1. Default CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
ol, ul { list-style: none; }
a {	text-decoration: none; 	color: #000000; }
img { vertical-align: middle; }
.clearfix { clear: both; }
input, button { border: none; }
input, textarea { outline: none; }

/*너비는 항상 1330px, 중앙정렬되도록 설정*/
.container { width: 1330px; margin: 0 auto; } 

main { overflow: hidden; padding: 20px 0 0 0; }

main #main_left { float: left; width: 750px; }
main #main_right { float: right; width: 350px; height: 2000px; }
  1. 메인페이지의 우측영역에 있는 로그인 영역 #account의 너비를 설정하고 테두리를 디자인한다. padding, margin값으로 간격을 설정한다.
#main_right #account { width: 100%; border: solid 1px #dae1e6;
	padding: 16px 16px 12px 16px; margin-bottom: 12px; }
  1. 로그인 설명인 <p>태그의 글자크기를 설정하고 padding으로 간격을 설정한다. <a>태그의 너비를 설정하고, 배경색 등을 디자인한다. 이 태그가 속한 영역 전체에 링크기능이 작동하도록 display:block;으로 설정한다. 
#main_right #account p { font-size: 12px; padding:0 0 11px 3px; }
#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; font-weight: 700; color: #fff; }
  1. 아이디, 비밀번호, 회원가입 글 등 속한 태그들의 배치가 양끝에서 중간에 일정한 간격을 두고 배열되도록 설정하고, padding값으로 좌,우 간격을 설정한다. 글자크기를 디자인한다.
#main_right #account .account_sub { display: flex; flex-wrap: wrap; 
	justify-content: space-between; align-items: center;
	padding: 0 8px; }
#main_right #account .account_sub span { font-size: 12px; }
  1. 로그인 영역 아래의 배너 광고 너비, 높이 등을 설정하고 margin으로 간격을 설정한다.
#main_right #banner { width: 348px; height: 198px; 
	background-color: #000000; margin-bottom: 20px; }
  1. 배너광고 아래 쇼핑목록 리스트 영역인 #shop_wrap태그에 속한 태그들을 디자인한다. .shop_title내에 속한 태그들의 배열을 'flex'로 설정하고 padding값으로 상,하 간격을 설정한다. 상품, 쇼핑몰, MEN 등 글자의 크기를 설정하고, 이 글자들의 배열을 'flex'로 설정한다. 
#main_right #shop_wrap .shop_title { display: flex; flex-wrap: wrap;
	justify-content: space-between; align-items: center; padding: 12px 0; }
#main_right #shop_wrap .shop_title h3,
#main_right #shop_wrap .shop_title h4 { font-size: 13px; }
#main_right #shop_wrap .shop_title h4 { margin-left: 15px; }
#main_right #shop_wrap .shop_title .right { display: flex; flex-wrap: wrap;
	justify-content: flex-end; align-items: center; }
  1. 쇼핑몰 리스트인 #shop_content에 속한 태그들을 디자인한다. 이를 둘러싼 테두리를 디자인하고 padding값으로 간격을 설정한다. 쇼핑몰 이름을 'flex'기능으로 태그들 사이에 일정한 간격을 둔 중앙배열로 설정하고 배경색, 가장자리 등 디자인을 한다. 쇼핑몰을 나타내는 글에 대한 디자인을 하고, margin값을 설정하되, 중복되지 않도록 설정한다.
#main_right #shop_wrap .shop_content { border: solid 1px #e4e8eb;
	padding: 0 0 22px; }
#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: solid 1px #dae1e6; }
#main_right #shop_wrap .shop_content .commerce-lists li { 
	font-size: 12px; margin: 0 0 5px 10px; }
#main_right #shop_wrap .shop_content .commerce-lists li:nth-child(1),
#main_right #shop_wrap .shop_content .commerce-lists li:nth-child(9) {
	margin-left: 0; }
  1. 사진을 추가한 쇼핑몰 광고 리스트들에 padding 값으로 상하좌우 간격을 설정하고, 'flex' 기능을 설정해 태그간 일정한 간격을 둔 중앙배열이 되도록 설정한다. 각 목록의 이미지와 글이 중앙정렬 되도록 설정하고 글자를 디자인한다.
#main_right #shop_wrap .shop_content .shop_goods { padding: 55px 8px; }
#main_right #shop_wrap .shop_content .product-lists { display: flex;
	flex-wrap: wrap; justify-content: space-between; align-items: center; }
#main_right #shop_wrap .shop_content .product-lists li { margin-bottom: 12px; }
#main_right #shop_wrap .shop_content .product-lists .product-info { 
	text-align: center; }
#main_right #shop_wrap .shop_content .product-lists h3,
#main_right #shop_wrap .shop_content .product-lists span { font-size: 12px; }

html

(main_right html에 이어서)
1. <footer> 태그로 하단 영역을 설정하고 class를 설정한다. 하단영역을 위(뉴스리스트), 아래(회사리스트)영역으로 구분하고 (<div>) id를 설정한다. 뉴스리스트는 <ul>,<li>,<img>태그로 만들어 필요한 갯수 만큼 복사해 붙여넣는다.

<footer id="main_footer">
		<div class="container">
			<ul class="news_lists">
				<li>
					<img src="https://via.placeholder.com/160x86">
					<div class="news_info">
						<span>부스트캠프 2021</span>
						<h3>온라인 설명회 신청하기</h3>
						<p>SW 개발자들을 위한 교육<br>
						지원꿀팁과 생생한 후기들!</p>
					</div>
				</li>
			</ul>
  1. 뉴스리스트 영역 아래에 회사에 대한 리스트 영역을 <ul>태그로 설정한다. <li>,<a>태그로 회사에 대한 각각의 소개를 선택했을 때 그 페이지로 넘어 가도록 설정한다.
			<ul class="corp_lists">
				<li><a href="#">회사소개</a></li>
				<li><a href="#">인재채용</a></li>
				<li><a href="#">제휴제안</a></li>
				<li><a href="#">회사소개</a></li>
				<li><a href="#">인재채용</a></li>
				<li><a href="#">제휴제안</a></li>

			</ul>
		</div>
	</footer>

CSS-Style

(main_right css에 이어서)
1. <footer>에 배경색을 설정하고, 테두리(상단)를 디자인한다. padding값을 적용해 간격을 설정한다.

#main_footer { background-color: #fafbfc; border-top: solid 1px #e4e8eb;
	padding-bottom: 92px; }
  1. .news_lists 영역에 대한 디자인을 한다. 'flex' 기능으로 뉴스 리스트들의 배열을 설정한다. padding 값으로 상,하 간격을 설정한다. .news_lists의 <li> 태그에 대한 디자인(너비, margin값 등)을 설정한다.
#main_footer .news_lists { padding: 24px 0; display: flex; flex-wrap: wrap;
	justify-content: space-between; align-items: center; }
#main_footer .news_lists li { display: flex; justify-content: flex-start; 
	flex-wrap: wrap; align-items: center; }
#main_footer .news_lists li img { margin-right: 15px; }
#main_footer .news_lists li .news_info { width: 172px; }
  1. 뉴스리스트 영역의 <span>, <h3>, <p> 태그의 글자를 디자인하고 색을 설정한다.
#main_footer .news_lists li .news_info span,
#main_footer .news_lists li .news_info h3, 
#main_footer .news_lists li .news_info p { font-size: 13px; }
#main_footer .news_lists li .news_info span { color: #58c464; }
  1. 뉴스리스트 아래의 회사 리스트 영역인 .corp_lists를 디자인한다. padding값으로 간격을 설정하고, 위 테두리를 디자인한다. .corp_lists에 속한 <li> 태그의 배열을 'flex'로 설정하고 :before로 회사소개, 제휴제안 등 글자 사이에 구분 문자가 삽입되도록 설정한다. (vertical-align: 으로 삽입된 문자의 위치를 상,하로 배열한다.) 이때, 가장 처음에 생긴 문자는 생략되도록 설정한다.
#main_footer .corp_lists { padding-top: 25px; border-top: solid 1px #e4e8eb; }
#main_footer .corp_lists li { display: inline-block; vertical-align: middle; }
#main_footer .corp_lists li:before { content: ""; display: inline-block;
	width: 1px; height: 11px; margin: 0 8px; background-color: #e4e8eb;
	vertical-align: -1px; }
#main_footer .corp_lists li:first-child:before { content: initial; }
#main_footer .corp_lists li a { font-size: 12px; }

무엇이 어려웠지?

class .account_sub 고작 2 단어로 된 글자인데 이 class에 입력한 css는 아.무.것.도. 안 나타났다.

어떻게 해결했지?

오탈자가 눈에는 당장 안보여서 처음에 html에서 설정한 class를 그대로 복사 붙여넣기로 다시 입력했더니 결과가 아주 잘~ 나왔다.

그래서?

오랜만에 조금은 여유롭게 수업을 들었다. 진도도 평소보다 조금 적었고, 어제 고생을 하면서 프로그래밍 지식이 아주 조금 성장했던것도 있는 것 같다. 게다가 어제는 선생님과 정말 똑같이 코딩했는데 자꾸 결과값이 다르게 나오기도 했는데 오늘은 정말 1번? 오탈자 있어서 결과가 안 뜬 것 말고는 오류가 없었다..! 매일 오늘만 같았으면 좋겠다 ㅠㅜ

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0720

profile
정혜리
.
이전 포스트

2021.07.19 NAVER-1

다음 포스트

2021.07.21 NAVER-3

0개의 댓글