2021.07.28 NAVER-8

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

Practice-copy_websites

목록 보기
12/15

Day23,
어제에 이어 Naver 블로그 페이지 따라만들어보기를 완료했다!

오늘 무엇을 배웠지?

Naver - blog 페이지 따라 만들어보기 2

Naver-'blog' : https://section.blog.naver.com/BlogHome.naver?directoryNo=0¤tPage=1&groupId=0

<main> - 2

html

(<main> - 1 html에 이어서)
1. 

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

				<div id="blog-banner"></div>
				<div id="blog-guide">
					<a href="#">
						<p>온라인 셀러를 위한<br>
							<span>블로그 마켓 가입</span></p>
						<i></i>	
					</a>
				</div>
				<div id="blog-guide">
					<a href="#">
						<p>온라인 셀러를 위한<br>
							<span>블로그 마켓 가입</span></p>
						<i></i>	
					</a>
				</div>
				<div id="blog-guide">
					<a href="#">
						<p>온라인 셀러를 위한<br>
							<span>블로그 마켓 가입</span></p>
						<i></i>	
					</a>
				</div>

				<div id="blog-notice">
					<div class="blog-notice-title-wrap">
						<a href="#">
							<h3>공지사항</h3>
							<i></i>
						</a>
					</div>

					<ul class="blog-notice-lists">
						<li><a href="#">[안내] 아이템팩토리 정기 점검 안내</a></li>
						<li><a href="#">[8일] 네이버페이 DB 점검 안내</a></li>
						<li><a href="#">[안내] 블로그 글발행 해피빈 콩 지급 안내</a></li>
					</ul>
				</div>

				<div id="blog-helper">
					<ul class="blog-helper-lists">
						<li><a href="#">블로그 앱 간편설치</a></li>
						<li><a href="#">개발 가이드</a></li>
						<li><a href="#">블로그 글 권리 보호</a></li>
						<li><a href="#">블로그 스마트봇</a></li>
					</ul>
				</div>
			</div>
		</div>
	</main>

CSS-Style

(<main> - 1 css에 이어서)

  1. 블로그 페이지의 오른쪽 영역인 .blog-main-right의 너비를 설정한다. 로그인 영역인 #blog-account를 디자인한다.(너비, 배경색, 테두리 등)
.blog-main #blog-main-content .blog-main-right { width: 280px; }
.blog-main #blog-main-content .blog-main-right #blog-account { 
	width: 100%; background-color: #f5f5f6; border: solid 1px #dddddf;
	padding: 20px 15px; margin: 12px 0; }
  1. #blog-account에 속한 태그들을 디자인한다. <p>태그의 글지크기, 색 등을 디자인하고, <a>태그의 전체 영역에 링크기능이 적용되도록 display:block으로 적용하고 디자인(너비, 배경색, 테두리 등)한다. .account_sub의 배열을 'flex'기능으로 설정하고, <span>태그를 디자인한다.
.blog-main #blog-main-content .blog-main-right #blog-account p { 
	font-size: 11px; color: #888; margin-bottom: 7px; }
.blog-main #blog-main-content .blog-main-right #blog-account a { 
	display: block; width: 100%; background-color: #ffffff;
	border: solid 1px #cccccc; border-radius: 4px;
	padding: 10px 0; margin-bottom: 12px; text-align: center;
	font-size: 13px; color: #000000; font-weight: 700; }
.blog-main #blog-main-content .blog-main-right #blog-account .account_sub { 
	display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: center; padding: 0 8px; }
.blog-main #blog-main-content .blog-main-right #blog-account .account_sub span { 
	font-size: 11px; color: #888; }
  1. 배너 광고의 너비와 높이를 설정하고 디자인한다. 
.blog-main #blog-main-content .blog-main-right #blog-banner { 
	width: 100%; height: 240px; background-color: black;
	border: solid 1px #dddddf; }

결과 ▼

  1. #blog-guide를 디자인(배경색, 테두리, 간격 등)한다. #blog-guide에 속한태그 <a>의 배열을 'flex'기능으로 설정하고 <p>,<a>,<i> 태그를 디자인(너비,글자크기 등)한다. 
.blog-main #blog-main-content .blog-main-right #blog-guide { 
	background-color: #ffffff; border: solid 1px #dddddf;
	border-width: 0 1px 1px; padding: 19px 20px; }
.blog-main #blog-main-content .blog-main-right #blog-guide a { 
	display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: center; }
.blog-main #blog-main-content .blog-main-right #blog-guide p { 
	width: 145px; font-size: 17px; line-height: 25px;
	color: #222; }
.blog-main #blog-main-content .blog-main-right #blog-guide a span { 
	font-size: 18px; font-weight: 700; }
.blog-main #blog-main-content .blog-main-right #blog-guide i { 
	display: inline-block; width: 88px; height: 65px;
	background-color: green; }
  1. #blog-notice영역을 디자인(배경색, 테두리, 간격 등)한다. .blog-notice-title-wrap의 영역의 간격을 설정하고 그에 속한 태그 <a>의 배열을 'flex'기능으로 설정한다. <h3>,<i>태그를 디자인(글자크기, 너비, 높이 등)한다.
.blog-main #blog-main-content .blog-main-right #blog-notice { 
	background-color: #ffffff; border: solid 1px #dddddf;
	border-width: 0 1px 1px; padding: 24px 22px 22px; }
.blog-main #blog-main-content .blog-main-right .blog-notice-title-wrap { 
	margin-bottom: 13px; }
.blog-main #blog-main-content .blog-main-right .blog-notice-title-wrap a { 
	display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: center; }
.blog-main #blog-main-content .blog-main-right .blog-notice-title-wrap h3 { 
	font-size: 14px; font-weight: 600; }
.blog-main #blog-main-content .blog-main-right .blog-notice-title-wrap i { 
	width: 8px; height: 13px; background-color: #000000; }
  1. .blog-notice-lists, .blog-notice-list를 디자인한다.(글자크기, 간격) <li>태그의 영역아래 간격을 설정할때, 마지막 태그에는 적용되지 않도록 설정한다.
.blog-main #blog-main-content #blog-notice .blog-notice-lists { 
	font-size: 12px; }
.blog-main #blog-main-content #blog-notice .blog-notice-list li { 
	margin-bottom: 4px; }
.blog-main #blog-main-content #blog-notice .blog-notice-list li:last-child { 
	margin-bottom: 0; }
  1. #blog-helper을 디자인(테두리, 배경색, 간격 등)한다. 그에 속한 태그 <li>태그를 디자인(글자크기, 배경색 등)한다. <a>태그에 background-image로 파일을 연결해 체크박스 아이콘을 입력한다.
.blog-main #blog-main-content #blog-helper { 
	border: solid 1px #dddddf; border-width: 0 1px 1px;
	background-color: #ffffff; padding: 24px 16px; }
.blog-main #blog-main-content #blog-helper li { 
	font-size: 14px; margin-bottom: 10px; }
.blog-main #blog-main-content #blog-helper li a { 
	display: block; height: 35px; line-height: 35px;
	padding-left: 45px; background-image: url(checkbox.png);
	background-repeat: no-repeat; background-size: 35px 35px; }

결과 ▼

html

(<main> html에 이어서)
1. 

	<footer id="blog-footer">
		<div class="blog-container">
			<ul>
				<li><a href="#">이용약관</a></li>
				<li><a href="#">이용약관</a></li>
				<li><a href="#">이용약관</a></li>
				<li><a href="#">이용약관</a></li>
			</ul>
			<p>Copyright &copy NAVER Corp. All Rights Reserved.</p>
		</div>
	</footer>

CSS-Style

(Main_right css에 이어서)
1. #webtoon-footer를 디자인한다. (배경색, 간격, 정렬 등) 그에 속한 태그 <ul>의 배열을 'flex'기능으로 설정하고 <li>태그 사이의 문자가 있도록 설정한다.

#blog-footer { padding: 40px 0 55px 0;
	background-color: #f6f6f6; text-align: center; }
#blog-footer ul { display: flex;
	flex-wrap: wrap; justify-content: center; align-items: center;
	margin-bottom: 20px; }
#blog-footer ul li a:before { content: '';
	display: inline-block; width: 1px; height: 12px;
	background-color: #d7d7d7; margin: 0 6px; vertical-align: -1px; }
#blog-footer ul li:first-child a:before { content: initial; }

결과 ▼

blog-detail

html , CSS

  1. <header> ,<footer>영역은 'blog.html'과 동일

  2. <main>

	<main role="main" class="blog-main-detail">
		<div id="program">
			<div class="blog-container">
				<h3>챌린지 프로그램</h3>
				<p>화제의 토픽, 영화 리뷰, 미션위젯과 함께 목표에 다가가는 당신의 도전을 기다립니다!</p>
			</div>
		</div>

		<nav id="program-nav">
			<div class="blog-container">
				<h4><a href="#">HOT TOPIC 도전</a></h4>
				<ul>
					<li><a href="#">블로거 영화를 말하다.</a></li>
					<li><a href="#">목표달성! 미션 위젯</a></li>
				</ul>
			</div>
		</nav>
.blog-border { border: solid 1px #eaeaec; }

.blog-main-detail { padding: 0 0 100px 0; }
.blog-main-detail #program { background-color: #634ea4;
	padding: 62px 0 50px; color: #ffffff; }
.blog-main-detail #program h3 { font-size: 38px;
	font-weight: 400; margin-bottom: 10px; }
.blog-main-detail #program p { font-size: 16px; }

.blog-main-detail #program-nav { border-bottom: solid 1px #ebebeb;
	background-color: #ffffff; padding: 10px 0; }
.blog-main-detail #program-nav .blog-container { display: flex;
	flex-wrap: wrap; align-items: center; }

.blog-main-detail #program-nav a { font-size: 14px;
	color: #666; }
.blog-main-detail #program-nav a:hover { text-decoration: underline; }
.blog-main-detail #program-nav h4 { font-weight: 600; }
.blog-main-detail #program-nav h4 a { color: #000; }
.blog-main-detail #program-nav ul { display: flex;
	flex-wrap: wrap; align-items: center; }
.blog-main-detail #program-nav ul li a:before { content: '';
	display: inline-block; width: 1px; height: 12px;
	background-color: #ababab; margin: 0 12px; vertical-align: -1px; }
.blog-main-detail #program-nav a { font-size: 14px;
	color: #666; }
.blog-main-detail #program-nav a:hover { text-decoration: underline; }
.blog-main-detail #program-nav h4 { font-weight: 600; }
.blog-main-detail #program-nav h4 a { color: #000; }
.blog-main-detail #program-nav ul { display: flex;
	flex-wrap: wrap; align-items: center; }
.blog-main-detail #program-nav ul li a:before { content: '';
	display: inline-block; width: 1px; height: 12px;
	background-color: #ababab; margin: 0 12px; vertical-align: -1px; }
		<div id="program-info">
			<div class="blog-container">
				<div class="program-info-wrap">
					<h4>핫토픽 도전으로<br>
						인기 블로거가<br>
						되어보세요.</h4>
					<div class="program-txt-wrap">
						<p>핫토픽 도전은 매주 화/목/금 블로그씨 질문에 답한 도전글에서 선정되며<br>
						선정된 글과 동영상은 블로그 홈 HOT TOPIC 영역에 일정기간 노출됩니다.</p>
						<a href="#">HOT TOPIC 도전 가이드</a>
					</div>
				</div>

				<div class="program-msg-box blog-border">
					<span class="from">From, 블로그씨</span>
					<div class="program-msg-wrap">
						<p class="question">
							<span class="date">7월 28일</span>
							<span class="txt">블로그씨는 큰맘 먹고 오븐을 샀지만 그대로 방치 중이에요.. 나의 아기자기한 홈 카페를 영상과 함께 보여주세요!</span>
						</p>
						<a href="#">블로그씨 질문에 답하기</a>
					</div>
				</div>
			</div>
		</div>
.blog-main-detail #program-info { background-color: #f8f8f8;
	padding: 44px 0 36px; }
.blog-main-detail #program-info .program-info-wrap { display: flex;
	flex-wrap: wrap; margin-bottom: 50px; }
.blog-main-detail #program-info .program-info-wrap h4 { 
	font-size: 32px; color: #7d66c8; line-height: 44px;
	margin-right: 120px; }
.blog-main-detail #program-info .program-info-wrap p { 
	font-size: 18px; line-height: 28px; color: #262626;
	margin-bottom: 18px; }
.blog-main-detail #program-info .program-info-wrap a { 
	font-size: 13px; color: #7d55c8; }
.blog-main-detail #program-info .program-info-wrap a:hover { 
	text-decoration: underline; }
.blog-main-detail #program-info .program-msg-box { padding: 29px;
	background-color: #ffffff; }
.blog-main-detail #program-info .program-msg-box .from { 
	display: block; font-size: 13px; font-weight: 600;
	color: #7d55c8; margin-bottom: 6px; }
.blog-main-detail #program-info .program-msg-box .program-msg-wrap { 
	display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: flex-end; }
.blog-main-detail #program-info .program-msg-box p { 
	width: 810px; font-size: 18px; }
.blog-main-detail #program-info .program-msg-box .date { 
	color: #693bbc; }
.blog-main-detail #program-info .program-msg-box .txt:before { 
	content: ''; display: inline-block; width: 1px; height: 18px;
	background-color: #d5d5d5; margin: 0 9px; vertical-align: -1px; }
.blog-main-detail #program-info .program-msg-box a { 
	display: block; width: 179px; height: 40px; background-color: #7d55c8;
	color: #ffffff; line-height: 44px; text-align: center; }
.blog-main-detail #program-info .program-msg-box a:hover { 
	background-color: rgba(125, 85, 200, 0.8); }
		<div id="program-day">
			<div class="blog-container">
				<ul class="program-day-lists">
					<li class="program-day-list">
						<div class="program-day-title-wrap">
							<span class="date">7월 27일</span>
							<span class="txt">덕질 일기</span>
							<span class="msg">블로그씨는 요즘 귀여운 캐릭터 소품 수집에 빠졌답니다. 나의 최애 덕질 일기를 사진과 함께 보여주세요!</span>
						</div>

						<ul class="program-image-lists">
							<li class="blog-border">
								<a href="#">
									<img src="https://via.placeholder.com/170x130">
									<h4>나의 덕질은 끝나지 않았다!</h4>
									<span>정헤리</span>
								</a>
							</li>
							<li class="blog-border">
								<a href="#">
									<img src="https://via.placeholder.com/170x130">
									<h4>나의 덕질은 끝나지 않았다!</h4>
									<span>정헤리</span>
								</a>
							</li>
							<li class="blog-border">
								<a href="#">
									<img src="https://via.placeholder.com/170x130">
									<h4>나의 덕질은 끝나지 않았다!</h4>
									<span>정헤리</span>
								</a>
							</li>
							<li class="blog-border">
								<a href="#">
									<img src="https://via.placeholder.com/170x130">
									<h4>나의 덕질은 끝나지 않았다!</h4>
									<span>정헤리</span>
								</a>
							</li>
							<li class="blog-border">
								<a href="#">
									<img src="https://via.placeholder.com/170x130">
									<h4>나의 덕질은 끝나지 않았다!</h4>
									<span>정헤리</span>
								</a>
							</li>
							<li class="blog-border">
								<a href="#">
									<img src="https://via.placeholder.com/170x130">
									<h4>나의 덕질은 끝나지 않았다!</h4>
									<span>정헤리</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</main>
.blog-main-detail #program-day { background-color: #ffffff; }
.blog-main-detail #program-day .program-day-list .program-day-title-wrap { 
	padding: 36px 0 16px; }
.blog-main-detail #program-day .program-day-title-wrap .date { 
	color: #693bbc; font-size: 16px; }
.blog-main-detail #program-day .program-day-title-wrap .txt { 
	font-size: 16px; }
.blog-main-detail #program-day .program-day-title-wrap .txt:before { 
	content: ''; display: inline-block; width: 1px; height: 18px;
	background-color: #d5d5d5; margin: 0 9px; vertical-align: -4px; }
.blog-main-detail #program-day .program-day-title-wrap .msg { 
	font-size: 14px; color: #666666; }
.blog-main-detail #program-day .program-image-lists { 
	display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: center; }
.blog-main-detail #program-day .program-image-lists li { 
	width: 175px; height: 228px; }
.blog-main-detail #program-day .program-image-lists li img { 
	width: 100%; margin-bottom: 15px; }
.blog-main-detail #program-day .program-image-lists li h4 { 
	font-size: 14px; color: #333; margin-bottom: 15px; }
.blog-main-detail #program-day .program-image-lists li span { 
	font-size: 12px; color: #959595; }

무엇이 어려웠지?

이번주 내내 동일한 문제점...! 오탈자! 동일하게 코딩을 했다고 생각했지만, 결과 값은 너무나도 다르게 나왔다.

어떻게 해결했지?

오탈자를 몇분이고 걸리든지 샅샅이 찾아냈다. 오탈자 찾는데만 30분 걸림 ...ㅠ

그래서?

한달 가까이 웹사이트 프로그래밍 수업을 들으니깐 처음에 AI스쿨 시작할때 OT가 생각이 났다. 프로그래머가 가져야 할 소양이나 필요한 능력에 대해서 질문했을 때, 검색능력과 집요함이 필요하다고 대답했던 것이. 정말 작은 크기의 영역을 디자인하는데도 시간이 많이 걸리고 ,정성이 들어가지만, 들인 시간에 비례하게 결과가 나타난다는 보장을 할 수 없다. 또한, 실수를 고치고 수정하는 작업에도 조금 더 간편하고 효율적인 방법으로 프로그래밍할 수 있는 방법을 찾는 검색 능력이 정말 필요하다는 것을... 포기하지 않고 원하는 결과를 만들어 낼때까지 붙들고 있는 것. 그것이 나에게 필요하다.

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

profile
정혜리
.
이전 포스트

2021.07.27 NAVER-7

다음 포스트

2021.07.29 NAVER-9

0개의 댓글