네이버블로그 -1

1) 학습한 내용
네이버블로그

네이버

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

<header id="blog_header">
	<div class="blog_header_top">
		

	</div>

	<div class="blog_header_nav">
		<div class="blog_container">
			<nav class="nav_left">
				<ul>
					<li class="on"><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>
			</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">
	
	<div id="hot_topic">
		<div class="blog_container">
			<div class="hot_topic_left">
				<div class="topic_heading">
					<h3>핫토픽</h3>
					<i></i>
					<a href="#">다꾸를 해요</a>
				</div>

				<ul class="topic_lists">
					<li>
						<img src="https://via.placeholder.com/252x240">
						<p>동해물과 백두산이 마르고 닳도</p>
					</li>

					<li>
						<img src="https://via.placeholder.com/252x240">
						<p>동해물과 백두산이 마르고 닳도</p>
					</li>

					<li>
						<img src="https://via.placeholder.com/252x240">
						<p>동해물과 백두산이 마르고 닳도</p>
					</li>
				</ul>

				<div class="pagination_wrap">
					<a href="#">1</a>
					<a href="#">2</a>
					<a href="#">3</a>
					<a href="#">4</a>
					<a href="#">5</a>
				</div>
			</div>

			<div class="hot_topic_right">
				<div class="topic_banner"></div>

				<div class="pagination_wrap">
					<a href="#">1</a>
					<a href="#">2</a>
					<a href="#">3</a>
					<a href="#">4</a>
					<a href="#">5</a>
				</div>
			</div>
		</div>
	</div>


	<div id="blog_main_content" class="blog_container">
		<div class="blog_main_left">
			
			<div id="blog_main_notification">
				<p>
					로그아웃 상태입니다.<br>
					로그인하여 이웃 새글을 확인해보세요.
				</p>
			</div>

			<div id="blog_article">
				
				<nav class="blog_article_nav">
					<ul>
						<li><a href="#">전체</a></li>
						<li><a href="#">음악</a></li>
						<li><a href="#">사진</a></li>
						<li><a href="#">취미</a></li>
					</ul>
				</nav>


				<ul class="blog_article_lists">
					
					<li>
						<a href="#">
							<div class="blog_article_info">
								<div class="blog_profile_wrap">
									<img src="https://via.placeholder.com/32x32">
									<div class="blog_profile_info">
										<h3>김인권</h3>
										<p>13시간 </p>
									</div>
								</div>

								<h2>Title 1</h2>
								<p class="paragraph">
									동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
								</p>

								<div class="comments">
									<span>공감 <em>46</em></span>
									<span>댓글 <em>11</em></span>
								</div>
							</div>

							<img src="https://via.placeholder.com/167x167">
						</a>
					</li>

					<li>
						<a href="#">
							<div class="blog_article_info">
								<div class="blog_profile_wrap">
									<img src="https://via.placeholder.com/32x32">
									<div class="blog_profile_info">
										<h3>김인권</h3>
										<p>13시간 </p>
									</div>
								</div>

								<h2>Title 1</h2>
								<p class="paragraph">
									동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
								</p>

								<div class="comments">
									<span>공감 <em>46</em></span>
									<span>댓글 <em>11</em></span>
								</div>
							</div>

							<img src="https://via.placeholder.com/167x167">
						</a>
					</li>

					<li>
						<a href="#">
							<div class="blog_article_info">
								<div class="blog_profile_wrap">
									<img src="https://via.placeholder.com/32x32">
									<div class="blog_profile_info">
										<h3>김인권</h3>
										<p>13시간 </p>
									</div>
								</div>

								<h2>Title 1</h2>
								<p class="paragraph">
									동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
								</p>

								<div class="comments">
									<span>공감 <em>46</em></span>
									<span>댓글 <em>11</em></span>
								</div>
							</div>

							<img src="https://via.placeholder.com/167x167">
						</a>
					</li>

					<li>
						<a href="#">
							<div class="blog_article_info">
								<div class="blog_profile_wrap">
									<img src="https://via.placeholder.com/32x32">
									<div class="blog_profile_info">
										<h3>김인권</h3>
										<p>13시간 </p>
									</div>
								</div>

								<h2>Title 1</h2>
								<p class="paragraph">
									동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
								</p>

								<div class="comments">
									<span>공감 <em>46</em></span>
									<span>댓글 <em>11</em></span>
								</div>
							</div>

							<img src="https://via.placeholder.com/167x167">
						</a>
					</li>

					<li>
						<a href="#">
							<div class="blog_article_info">
								<div class="blog_profile_wrap">
									<img src="https://via.placeholder.com/32x32">
									<div class="blog_profile_info">
										<h3>김인권</h3>
										<p>13시간 </p>
									</div>
								</div>

								<h2>Title 1</h2>
								<p class="paragraph">
									동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
								</p>

								<div class="comments">
									<span>공감 <em>46</em></span>
									<span>댓글 <em>11</em></span>
								</div>
							</div>

							<img src="https://via.placeholder.com/167x167">
						</a>
					</li>
				</ul>










			</div>




		</div>

		<div class="blog_main_right">
			
		</div>
	</div>
</main>

/ 네이버 블로그 /
.blog_container {
width: 1080px;
margin: 0 auto;
}

#blog_header .blog_header_top {
height: 60px;
background-color: #00c73c;
border-bottom: solid 1px #51b036;
}

#blog_header .blog_header_top .blog_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#blog_header .blog_header_top .blog_header_left {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}

#blog_header .blog_header_top .blog_header_left h2 {
font-size: 20px;
margin-right: 20px;
}

#blog_header .blog_header_top .blog_header_left h2 a {
color: #ffffff;
font-weight: 700;
}

#blog_header .blog_header_top .blog_header_input_wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
}

#blog_header .blog_header_top .blog_search_wrap {
display: flex;
flex-wrap: wrap;
align-items: center;

width: 325px;
height: 40px;
background-color: #ffffff;

margin-right: 5px;

}

#blog_header .blog_header_top .blog_search_wrap input {
width: calc(100% - 40px);
height: 40px;
background-color: #ffffff;
border: solid 1px #4da733;

padding: 0 15px;

}

#blog_header .blog_header_top .blog_search_wrap input:focus {
outline: none;
}

#blog_header .blog_header_top .blog_search_wrap .btn_search {
width: 40px;
height: 40px;
background-color: #28a93a;
border: solid 1px #239e36;
}

#blog_header .blog_header_top .btn_total_search {
width: auto;
height: 40px;
background-color: #28a93a;
border: solid 1px #239e36;

padding: 0 5px;

line-height: 40px;
color: #ffffff;

}

#blog_header .blog_header_top .blog_header_right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

#blog_header .blog_header_top .blog_header_right .btn_login {
display: inline-block;
border: solid 1px #239e36;

padding: 2px 5px;
margin-right: 20px;

color: #ffffff;

font-size: 12px;

}

#blog_header .blog_header_top .blog_header_right .btn_menu {
width: 60px;
height: 60px;
background-color: #00c73c;
border-left: solid 1px #239e36;
border-right: solid 1px #239e36;

cursor: pointer;

}

#blog_header .blog_header_nav {
height: 40px;
background-color: #ffffff;
border-bottom: solid 1px #e5e5e5;
}

#blog_header .blog_header_nav .blog_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#blog_header .blog_header_nav .nav_left {

}

#blog_header .blog_header_nav .nav_left ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}

#blog_header .blog_header_nav .nav_left ul li {
height: 40px;
margin-right: 16px;
border-bottom: solid 2px transparent;
}

#blog_header .blog_header_nav .nav_left ul li.on {
border-bottom: solid 2px #00ab33;
}

#blog_header .blog_header_nav .nav_left li a {
display: block;

width: 100%;
height: 100%;
line-height: 40px;

font-size: 13px;

}

#blog_header .blog_header_nav .nav_right {

}

#blog_header .blog_header_nav .nav_right ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

#blog_header .blog_header_nav .nav_right li {
width: auto;
height: 26px;

margin-left: 8px;

}

#blog_header .blog_header_nav .nav_right li.on a {
background-color: #00c73c;
border: solid 1px rgba(0, 0, 0, 0.07);
color: #ffffff;
}

#blog_header .blog_header_nav .nav_right li a {
display: block;
width: 100%;
height: 100%;
background-color: #ffffff;
border: solid 1px #cecece;

line-height: 26px;
padding: 0 10px;

font-size: 13px;

}

.blog_main #hot_topic {
height: 305px;
background-color: #f5f5f6;
padding: 20px 0 15px;
}

.blog_main #hot_topic .blog_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.blog_main #hot_topic .hot_topic_left {
position: relative;
width: 770px;
}

.blog_main #hot_topic .hot_topic_left .topic_heading {
display: flex;
flex-wrap: wrap;
align-items: center;

margin-bottom: 11px;

}

.blog_main #hot_topic .hot_topic_left .topic_heading h3 {
font-size: 16px;
font-weight: 600;
color: #e55e5e;
}

.blog_main #hot_topic .hot_topic_left .topic_heading i {
display: block;
width: 8px;
height: 13px;
background-color: gray;
margin: 0 8px;
}

.blog_main #hot_topic .hot_topic_left .topic_heading a {
font-size: 16px;
}

.blog_main #hot_topic .hot_topic_left .topic_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.blog_main #hot_topic .hot_topic_left .topic_lists li {
position: relative;
width: 252px;
height: 240px;
}

.blog_main #hot_topic .hot_topic_left .topic_lists img {
position: absolute;
width: 100%;
height: 100%;
}

.blog_main #hot_topic .hot_topic_left .topic_lists p {
position: absolute;
width: 100%;
background-color: rgba(55, 66, 87, 0.9);

padding: 20px 0;

bottom: 0;

color: #ffffff;

text-align: center;

}

.blog_main #hot_topic .pagination_wrap {
position: absolute;
display: flex;
flex-wrap: wrap;
align-items: flex-end;

top: 0;
right: 0;

}

.blog_main #hot_topic .pagination_wrap a {
display: block;
width: 20px;
height: 20px;
margin-left: 4px;
border: solid 1px rgba(221, 221, 223, 0.8);
background-color: #f6f6f7;

color: #888;

font-size: 12px;
text-align: center;
line-height: 20px;

}

.blog_main #hot_topic .hot_topic_right {
position: relative;
width: 280px;
padding-top: 30px;
}

.blog_main #hot_topic .hot_topic_right .topic_banner {
width: 280px;
height: 240px;
background-color: black;
}

.blog_main #blog_main_content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.blog_main #blog_main_content .blog_main_left {
width: 770px;
}

.blog_main #blog_main_content .blog_main_left #blog_main_notification {
background-color: #ffffff;
padding: 54px 0;

text-align: center;

}

.blog_main #blog_main_content .blog_main_left #blog_main_notification p {
font-size: 16px;
line-height: 30px;
}

.blog_main #blog_main_content .blog_main_left #blog_article .blog_article_nav {
background-color: #ffffff;
border-top: solid 1px #999999;
border-bottom: solid 1px #999999;

padding: 10px 0;

font-size: 14px;

}

.blog_main #blog_main_content .blog_main_left .blog_article_nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.blog_main #blog_main_content .blog_main_left .blog_article_nav li {
margin-right: 22px;
}

.blog_main #blog_main_content .blog_main_left .blog_article_nav a {

}

.blog_main #blog_main_content .blog_main_left .blog_article_lists {

}

.blog_main #blog_main_content .blog_article_lists li {
width: 100%;
border-bottom: solid 1px #eeeeef;

padding: 25px 0 23px;

}

.blog_main #blog_main_content .blog_article_lists li a {
display: block;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

width: 100%;
height: 100%;

}

.blog_main #blog_main_content .blog_article_lists .blog_article_info {
width: 573px;
}

.blog_main #blog_main_content .blog_article_lists .blog_profile_wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.blog_main #blog_main_content .blog_article_lists .blog_profile_wrap img {
width: 32px;
height: 32px;
border-radius: 50%;

margin-right: 10px;

}

.blog_main #blog_main_content .blog_article_lists .blog_profile_info {

}

.blog_main #blog_main_content .blog_article_lists .blog_profile_info h3 {
font-size: 14px;
margin-bottom: 3px;
}

.blog_main #blog_main_content .blog_article_lists .blog_profile_info p {
font-size: 11px;
color: #959595;
}

.blog_main #blog_main_content .blog_article_lists h2 {
margin-top: 16px;
font-size: 17px;
}

.blog_main #blog_main_content .blog_article_lists .paragraph {
margin-top: 10px;
font-size: 13px;
color: #666666;
}

.blog_main #blog_main_content .blog_article_lists .comments {
margin-top: 14px;
color: #959595;
font-size: 12px;
}

.blog_main #blog_main_content .blog_article_lists .comments span {
margin-right: 9px;
}

.blog_main #blog_main_content .blog_article_lists .comments em {
font-style: normal;
}

.blog_main #blog_main_content .blog_main_right {
width: 280px;
height: 2000px;
background-color: pink;
}
btn은 디폴트 값으로 배경색이 회색

cursor: pointer 커서가 손가락 모양으로 변함

letter-spacing 글자 좌우 간격

2) 학습내용 중 어려웠던 점
하나하나 써 내려가면서 가독성이랑 집중력이 확연하게 떨어졋고 쓰는데 힘들었씁니다.....
3) 해결 방법
이건 뭐,,,,,,,,,, 어쩔수없다지만 엸심히 노력해애죠 뭐
4) 학습소감
초등학생들은 이거로 게임만든다ㅣ던데 저흳도 게임 만들면안되나요 저 완전 잘할자신잇어요