48(0902)

41강 네이버 모바일 2

학습 내용

html

<div id="talk">
			
			<ul>
				<li class="left-list">
					<a href="#">
						<i class="icon-arrow icon-arrow-left"></i>
						<div class="content-wrap">
							<div class="txt-wrap">
								<h3>추석선물 준비하자</h3>
								<p>
									한가위 추석선물,<br>
									선물하고 추가 적립!
								</p>
							</div>

							<img src="https://via.placeholder.com/52">
						</div>
					</a>
				</li>

				<li class="right-list">
					<a href="#">
						
						<div class="content-wrap">
							<img src="https://via.placeholder.com/52">
							<div class="txt-wrap">
								<h3>추석선물 준비하자</h3>
								<p>
									한가위 추석선물,<br>
									선물하고 추가 적립!
								</p>
							</div>
						</div>

						<i class="icon-arrow icon-arrow-right"></i>
					</a>
				</li>
			</ul>
		</div>

css

#talk {
	padding: 20px 0;
}

#talk ul {
	overflow: hidden;
}

#talk ul li {
	position: relative;
	width: 277px;
	background-color: #ffffff;
	padding: 15px 0 15px;
	box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);

	margin-bottom: 12px;
}

#talk ul li:last-child {
	margin-bottom: 0;
}

#talk ul li .icon-arrow {
	display: inline-block;
	width: 20px;
	height: 16px;
}

#talk ul li img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
}

#talk ul li a {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	padding: 0 20px;

	color: #000000;
}

#talk ul .content-wrap .txt-wrap h3 {
	font-size: 14px;
	font-weight: 600;
}

#talk ul.content-wrap .txt-wrap p {
	font-size: 13px;
	line-height: 16px;
	margin-top: 3px;
}

#talk ul .left-list {
	float: left;

	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
}

#talk ul .left-list .icon-arrow-left {
	background-color: purple;
}

#talk ul .left-list .content-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

#talk ul .left-list .content-wrap h3 {
	color: purple;
}

#talk ul .left-list .content-wrap img {
	margin-left: 8px;
}


#talk ul .right-list {
	float: right;
	
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
}

#talk ul .right-list .icon-arrow-right {
	background-color: #0ac666;
}

#talk ul .right-list .content-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

#talk ul .right-list .content-wrap h3 {
	color: #0ac666;
}

#talk ul .right-list .content-wrap img {
	margin-right: 8px;
}

html

<div id="today">
			<div class="container">
				
				<div class="content-header">
					
					<h2>오늘의 네이버</h2>
					<a href="#">더보기</a>
				</div>

				<div class="content-body">
					<img class="banner" src="https://via.placeholder.com/345x140">

					<div class="bottom-wrap">
						<i class="icon"></i>
						<div class="txt-wrap">
							<h3>네이버플러스 멤버십</h3>
							<p>
								오후 9시 소비요정 파티<br>
								최대 10% 적립하는 비밀 알려줌
							</p>
						</div>
					</div>
				</div>


			</div>
		</div>

css

#today {
	padding: 50px 0;
}

#today .container {
	padding: 0 20px;
}

#today .content-header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	border-top: solid 1px #e0e4ea;

	padding-top: 24px;
	margin-bottom: 10px;
}

#today .content-header h2 {
	font-size: 18px;
	font-weight: bold;
}

#today .content-header a {
	color: #767678;
	font-size: 14px;
	font-weight: 400;
}

#today .content-body {
	width: 100%;
	background-color: #ffffff;
	border-radius: 8px;

	overflow: hidden;

	box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);
}

#today .content-body .banner {
	height: 100%;
}

#today .content-body .bottom-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;

	padding: 14px 13px 12px 15px;
}

#today .content-body .bottom-wrap .icon {
	display: block;
	width: 52px;
	height: 52px;
	background-color: purple;
	border-radius: 50%;

	margin-right: 8px;
}

#today .content-body .bottom-wrap .txt-wrap h3 {
	font-size: 15px;
	font-weight: 600;
}

#today .content-body .bottom-wrap .txt-wrap p {
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	color: #929294;
}

html

<footer id="footer">
			<div class="txt-wrap">
				<div class="link">
					<a href="#">로그인</a>
					<a href="#">전체서비스</a>
					<a href="#">PC버전</a>
				</div>
				<div class="link">
					<a href="#">이용약관</a>
					<a href="#">개인정보처리방침</a>
					<a href="#">고객센터</a>
				</div>
			</div>

			<h1>
				<a href="#">
					<img src="https://via.placeholder.com/74x14">
				</a>
			</h1>
		</footer>

css

#footer {
	padding: 35px 0 80px;
}

#footer .txt-wrap {
	text-align: center;
}

#footer .txt-wrap a {
	position: relative;
	display: inline-block;
	padding: 3px 9px;
	color: #929294;
	font-size: 13px;
	font-weight: 400;

	letter-spacing: -0.5px;
}

#footer .txt-wrap a:before {
	content: "";
	display: block;
	position: absolute;

	top: 7px;
	left: 0;

	width: 1px;
	height: 10px;
	background-color: #d7dfe7;
}

#footer .txt-wrap .link a:first-child:before {
	content: none;
}

#footer h1 {
	text-align: center;
}

#footer h1 img {
	width: 74px;
}

어려웠던 점 & 해결 방법
어려운 부분은 없었다.

학습 소감
모바일 버전도 웹 버전과 크게 다르지 않은 것 같다.