Dev log - 23, 네이버 블로그 카피캣 실습 #2

박강산·2021년 7월 28일

대구AI스쿨 - 개발일지

목록 보기

23/44

학습한 내용

네이버 블로그 실습 - 기본 세팅

HTML 문서

<!DOCTYPE html>
<html>
<head>                 
	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>

CSS 문서

/* 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;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

네이버 블로그 실습 - 블로그 메인 오른쪽 영역

border-width 속성은 border 값의 굵기 설정
(padding, margin 속성과 방식이 같음, top, right, bottom, left 순)
background-size 속성은 background-image 의 크기를 조절
(padding 영향을 받지 않음, width, height 순)
아이콘 이미지 넣는 방법은 상황과 스타일에 따라 여러가지(i 태그, background-image 등)

HTML 문서

<body>
	<main role="main" class="blog-main">
		<div id="blog-main-content" class="blog-container">
			<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="#">[안내] 07.28일 모바일웹 스마트에디터3.0</a></li>
						<li><a href="#">[안내] PC 블로그 홈에서 쪽지 보내기 기능</a></li>
						<li><a href="#">[17일] 블로그 DB 점검 안내</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>   
</body>

CSS 문서 1 - style.css

.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-bottom: 12px;
}

.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;
}

.blog-main #blog-main-content .blog-main-right #blog-banner {
	width: 100%;
	height: 240px;
	background-color: black;
	border: solid 1px #dddddf;
}

.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: 15px;
	line-height: 25px;
	color: #222;
}

.blog-main #blog-main-content .blog-main-right #blog-guide p span {
	font-size: 16px;
	font-weight: 700;
}

.blog-main #blog-main-content .blog-main-right #blog-guide i {
	display: inline-block;

	width: 88px;
	height: 65px;
	background-color: green;
}

.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-notice .blog-notice-title-wrap {
	margin-bottom: 13px;
}

.blog-main #blog-main-content #blog-notice .blog-notice-title-wrap a {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.blog-main #blog-main-content #blog-notice .blog-notice-title-wrap h3 {
	font-size: 14px;
	font-weight: 600;
}

.blog-main #blog-main-content #blog-notice .blog-notice-title-wrap i {
	width: 8px;
	height: 13px;
	background-color: #000000;
}

.blog-main #blog-main-content #blog-notice .blog-notice-lists {
	font-size: 12px;
}

.blog-main #blog-main-content #blog-notice .blog-notice-lists li {
	margin-bottom: 4px;
}

.blog-main #blog-main-content #blog-notice .blog-notice-lists li:last-child {
	margin-bottom: 0;
}

.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: 30px;

	background-image: url(../img/checkbox.png);
	background-repeat: no-repeat;
	background-position: left;
	background-size: 20px 20px;
}

네이버 블로그 실습 - 블로그 메인 푸터 영역

:before 가상 선택자의 쓰임은 실제 환경과 다르기 때문에 참고용으로 사용

HTML 문서

<body>
	<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 © NAVER Corp. All Rights Reserved.</p>
		</div>
	</footer>
</body>

CSS 문서 1 - style.css

#blog-footer {
	padding-top: 40px;
	padding-bottom: 55px;
	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;
}

네이버 블로그 실습 - 블로그 챌린지 프로그램 영역

:hover 가상 선택자 사용 시, 마우스 커서가 해당 영역에 들어왔을 때의 상황의 속성을 설정
opacity 속성은 배경색 뿐만 아니라 글자색 또한 바꾸기 때문에, 배경색만 바꿀 때는 rgba 사용
자주 사용하는 속성 및 기능들은 CSS 문서에 하나의 class 로 설정하면, 코드를 줄이고 편하게 활용 가능

HTML 문서

<body>
	<header id="blog-header">
		<div class="blog-header-top">			
			<div class="blog-container">				
				<div class="blog-header-left">
					<h2><a href="#">블로그</a></h2>

					<div class="blog-header-input-wrap">
						<div class="blog-search-wrap">
							<input type="text">
							<button type="button" class="btn-search"></button>
						</div>
						<button type="button" class="btn-total-search">통합 검색</button>
					</div>	
				</div>

				<div class="blog-header-right">
					<a href="#" class="btn-login">로그인</a>
					<button type="button" class="btn-menu"></button>
				</div>
			</div>
		</div>

		<div class="blog-header-nav">
			<div class="blog-container">
				<nav class="nav-left">
					<ul>
						<li><a href="blog.html">블로그 홈</a></li>
						<li><a href="#">주제별 보기</a></li>
						<li><a href="#">이달의 블로그</a></li>
						<li><a href="#">공식 블로그</a></li>
						<li class="on"><a href="blog-detail.html">챌린지 프로그램</a></li>
					</ul>
				</nav>

				<nav class="nav-right">
					<ul>
						<li class="on"><a href="#">블로그 마켓 가입</a></li>
						<li><a href="#">아이템 팩토리</a></li>
						<li><a href="#">블로그팀 공식 블로그</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</header>

	<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>

		<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>

		<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>

					<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>

					<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>

					<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>

	<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 © NAVER Corp. All Rights Reserved.</p>
		</div>
	</footer>
</body>

CSS 문서 1 - style.css

.blog-border {
	border: 1px solid #eaeaec;
}

.blog-main-detail {
	padding-top: 0;
	padding-bottom: 100px;
}

.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 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-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: #7d55c8;
	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-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);
}

.blog-main-detail #program-day {
	background-color: #ffffff;
}

.blog-main-detail #program-day .program-day-lists {

}

.blog-main-detail #program-day .program-day-list {
	
}

.blog-main-detail #program-day .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;	
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

:hover, :focus 가상 선택자 차이에 대해서 복습 필요

해결방법

검색을 통해 :hover 선택자는 마우스 커서가 영역에 들어오는 순간의 속성을 설정하는 것이고, :focus 선택자는 영역의 해당 부분을 활성화(클릭 등)된 순간의 속성을 설정함을 알았음.

또한, :active 라는 선택자가 또 있는데, 마우스 커서로 클릭하고 있는 그 순간 동안의 속성을 설정하는 선택자가 있음을 알게 되었음.

학습 소감

오늘은 어제 실습에 이어서 네이버 블로그 카피캣 실습을 진행하였음. 오늘은 가상 선택자의 차이점에 대해서 궁금증이 생겨 검색을 통해 찾아보았고, 다행히도 궁금증이 풀려서 앞으로 잘 활용할 수 있을 듯 함.

또한 개인적으로 실습 중에 font-size 등과 같은 결과들이 화면과 달라서 하나씩 수정해가고 있는데, 예전 다른 사람들과 멘토님의 질의응답을 통해 하나씩 수정해가는 것은 개인의 환경이 다르기 때문에 당연한 것임을 알았음. 앞으로도 무조건 같게 하지 않고, 이상한 부분은 수정해가려는 마음이 들었음

박강산

안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.

Dev log - 23, 네이버 블로그 카피캣 실습 #2

대구AI스쿨 - 개발일지

학습한 내용

네이버 블로그 실습 - 기본 세팅

네이버 블로그 실습 - 블로그 메인 오른쪽 영역

네이버 블로그 실습 - 블로그 메인 푸터 영역

네이버 블로그 실습 - 블로그 챌린지 프로그램 영역

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법

학습 소감

Dev log - 22, 네이버 블로그 카피캣 실습 #1

Dev log - 24, 네이버 뉴스 카피캣 실습 #1

0개의 댓글