2021.07.20 NAVER-2
Day17,
어제에 이어 Naver 메인 따라만들어보기를 완료했다!
오늘 무엇을 배웠지?
Naver 메인 따라 만들어보기2
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>- 배너광고 아래에
<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; }
- 메인페이지의 우측영역에 있는 로그인 영역 #account의 너비를 설정하고 테두리를 디자인한다. padding, margin값으로 간격을 설정한다.
#main_right #account { width: 100%; border: solid 1px #dae1e6;
padding: 16px 16px 12px 16px; margin-bottom: 12px; }- 로그인 설명인
<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; }- 아이디, 비밀번호, 회원가입 글 등 속한 태그들의 배치가 양끝에서 중간에 일정한 간격을 두고 배열되도록 설정하고, 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; }- 로그인 영역 아래의 배너 광고 너비, 높이 등을 설정하고 margin으로 간격을 설정한다.
#main_right #banner { width: 348px; height: 198px;
background-color: #000000; margin-bottom: 20px; }- 배너광고 아래 쇼핑목록 리스트 영역인 #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; }- 쇼핑몰 리스트인 #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; }- 사진을 추가한 쇼핑몰 광고 리스트들에 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; }footer 영역
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>- 뉴스리스트 영역 아래에 회사에 대한 리스트 영역을
<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; }- .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; }- 뉴스리스트 영역의
<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; }- 뉴스리스트 아래의 회사 리스트 영역인 .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
Author And Source
이 문제에 관하여(2021.07.20 NAVER-2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyeri_jung14/2021.07.20-NAVER-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
