개발일지 210720

이동섭·2021년 7월 20일
대구AI스쿨
0

대구AI스쿨 개발일지

목록 보기
17/48

17일차 요약

  • 어제에 이어 네이버 메인 페이지 카피
  • 우측과 footer부분

1. 네이버 메인 우측 영역

네이버 우측 영역은 로그인 영역, 베너, 증시, 쇼핑으로 나누어져 있다. 로그인 영역 까지 강의를 따라 실습하고, 증시 부분은 생략, 쇼핑 부분은 강의에 앞서 실습해보기로 했다.

1.1. 로그인 영역 + 배너

  1. html
    <div id="account">
	<p>네이버를 더 안전하고 편리하게 이용하세요.</p>
	<a href="#">NAVER 로그인</a>
	<div class="account_sub">
		<div class="account_left">
			<span>아이디</span>
			<span>비밀번호 찾기</span>
		</div>
	</div>
</div>
<div>
	<div id="banner">
		<a href="#">
			<div>
				<span>배너 광고 자리</span>
			</div>
		</a>
	</div>
</div>
  • a태그를 다른 영역에 담지 않고 마진과 패딩을 통해 버튼처럼 만들어 준 것이 특이해 보인다.
  • 강의에 더해 배너 광고 자리를 가시성 있게 만들어줌.

  1. CSS

    #main_right #account {
	width: 100%;
	border-bottom: solid 1px #dea1e6;
	padding: 12px 16px 12px 16px;
	margin-bottom: 12px;
}
#main_right #account p {
	font-size: 12px;
	padding-left: 3px;
	padding-top: 12px;
	margin-bottom: 11px;
}
#main_right #account a {
	display: block;
	width: 100%;
	padding: 15px 0;
	text-align: center;
	font-size: 13px;
	border-radius: 2px;
	color: #ffffff;
	font-weight: 700;
	background-color: #19ce60;
	margin-bottom: 14px;
}
#main_right #account_sub {
	padding: 0 8px;
}
#main_right .account_sub .account_left {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 3px;
}
#main_right span {
	font-size: 12px;
}
#main_right #banner {
	width: 348px;
	height: 198px;
}
#main_right #banner a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: greenyellow;
}
#main_right #banner div {
	width: 135px;
	height: 28px;
}
#main_right #banner span {
	font-size: 20px;
}

  2. 결과

1.2. 쇼핑 영역

목표

  • 최상단 헤드 영역과 테두리가 있는 본문 영역으로 크게 나누고, 본문 영역 안에 3개의 색션을 구성할 것.
  • 버튼을 눌러 페이지가 넘어가는 것은 배우지 않았으니 생략한다.
  • 쇼핑몰 리스트의 가운뎃 점은 네이버에서 자체적으로 사용하는 라이브러리 클래스를 이용했기 때문에 다른 방식으로 대체

1.2.1. 쇼핑헤드, 리스트

  1. html

    <div class="shop_head">
	<h1>
		<a href="#">트렌드 쇼핑</a>
	</h1>
	<ul>
		<li><a href="#">상품</a></li>
		<li><a href="#">쇼핑몰</a></li>
		<li><a href="#">MEN</a></li>
	</ul>
</div>
<div class="shop_body">
	<div class="shoplists">
		<div class="shoplist1">
			<a href="#">쿠팡</a>
			<span>·</span>
			<a href="#">G마켓</a>
			<span>·</span>
			<a href="#">옥션</a>
			<span>·</span>
			<a href="#">11번가</a>
			<span>·</span>
			<a href="#">이마트몰</a>
			<span>·</span>
			<a href="#">티몬</a>
		</div>
		<div class="shoplist2">
			<a href="#">위메프</a>
			<span>·</span>
			<a href="#">신세계몰</a>
			<span>·</span>
			<a href="#">올리브영</a>
			<span>·</span>
			<a href="#">롯데몰</a>
			<span>·</span>
			<a href="#">GS샵</a>
			<span>·</span>
			<a href="#">CJ온스타일</a>
		</div>

  2. CSS

    #main_right .shop_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 12px 0;
	padding-top: 10px;
	/*overflow: hidden;*/
}
#main_right h1 {
	float: left;
	font-size: 15px;
}
#main_right li {
	display: inline-block;
	font-size: 13px;
	padding-left: 5px;
}
#main_right .shop_body {
	width: 100%;
	border: solid 1px #eae1e6;
}
#main_right .shoplists{
	background-color: #2c2d30;
	border-bottom: solid 1px #eae1e6;
}
#main_right .shop_body .shoplist1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 12px 3px 12px;
}
#main_right .shop_body .shoplist2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0px 12px 15px 12px;
}
#main_right .shop_body .shoplist1 a,
#main_right .shop_body .shoplist2 a{
	font-size: 12px;
}
#main_right .shop_body .shoplist1 span,
#main_right .shop_body .shoplist2 span {
	font-size: 15px;
	font-style: bold;
}
  1. 결과

1.2.2. 쇼핑 메인

  • html이 단순한 구조에 비해 li태그가 너무 많아서 생략함.

  1. CSS

    #main_right .shop_body .shopmain {
	margin: 0 7px;
}
#main_right .shop_body .shopmain .shop1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: solid 1px #eae1e6;
	padding-bottom: 20px;
}
#main_right .shop_body .shopmain .shop1 .linkbox{
	margin-top: 10px;
	float: left;
}
#main_right .shop_body .shopmain .shop1 .linkbox a{
	width: 100%;
	height: 100%;
}
#main_right .shop_body .shopmain .shop1 .linkbox img {
	padding-bottom: 7px;
}
#main_right .shop_body .shopmain .shop1 .linkbox p {
	display: block;
	font-size: 12px;
	text-align: center;
}
#main_right .shop_body .shopmain .shop2 {
	padding-bottom: 20px;
	border-bottom: solid 1px #eae1e6;
}
#main_right .shop_body .shopmain .shop2 h2{
	font-size: 15px;
	margin: 15px 0 0 3px;
}
#main_right .shop_body .shopmain .shop2 ul {
	list-style: initial;
	list-style-type: disc !importan;	
}
#main_right .shop_body .shopmain .shop2 li {
	margin-top: 12px;
	margin-left: 5px;
}
#main_right .shop_body .shopmain .shop2 a:hover {
	text-decoration: underline;
}
#main_right .shop_body .shopmain .shop2 strong {
	padding-right: 20px;
}
#main_right .shop_body .shopmain .shop3 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
#main_right .shop_body .shopmain .shop3 .titlebox{
	margin: 20px 5px;
}
#main_right .shop_body .shopmain .shop3 h3 {
	display: inline-block;
	font-size: 15px;
	padding-right: 10px;
}
#main_right .shop_body .shopmain .shop3 p {
	font-size: 12px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 30px;
}

  2. 결과

마우스 호버까지는 문제없이 해냈는데 li태그 앞의 점을 도저히 살려내지 못했다. 아래 질문거리에 설명함.

추가 학습

미해결 - 솔루션

x

질문거리

  • ul태그의 list-style를 none로 설정해둔 것을 cascading을 이용해 특정 영역에서 사용하려고 했는데 아무리 시도해도 되지 않았다.
    또다시 브라우저 기본 속성인 user agent stylesheet에 막힌 것인데 찾아보니

      !important

    를 통해 이를 무시하고 더 높은 우선순위를 갖게 할 수 있다고 하는데, 이 방법도 통하지 않았다. 내일 질문.

학습 소감

혼자 실습하다가 한 번 헤메이고 나면 도저히 시간을 맞출 수 없다... 어쩌면 개발자의 삶 미리보기를 하는 중일지도..?

profile
이동섭
responsibility
이전 포스트

개발일지 210719

다음 포스트

개발일지 210721

0개의 댓글

관련 채용 정보