7월 19일 Velog

류영서·2021년 7월 19일

학습한 내용

Naver 실습

https://www.naver.com/

<카피캣에 사용되는 크롬 확장 프로그램>
11. Wappalyzer : 웹 사이트가 어떠한 기술 스펙으로 만들어졌는지 확인
7. CSS Viewer : 특정 영역의 CSS 코드 확인
2. WhatFont : 글씨체 확인
8. Lorem Ipsum Generator : 임의의 문장을 만들 때 활용
출처 : https://wpastra.com/chrome-developer-extensions/

0. Default

[html]

<head>

	<meta charset="utf-8">

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

	<title>네이버</title>

</head>

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

}

input, textarea
: outline: none; -> 입력창 클릭할 때 자동으로 나오는 border를 제거
button
: button 태그는 기본적으로 border를 가지고 있기 때문에 초기화 한 후에 사용
.container
: width: 1130px; -> main 영역의 크기
: main 영역의 width를 가지는 영역에 class로 지정하여 width값과 중앙 정렬 레이아웃을 적용한다.
: 사용된 태그 = main 태그, navbar 내부의 div 태그

1. Header

검색창(search_area)
메뉴 탭(navbar)

[html]

	<header id="main_header">

		<div class="search_area">
			<div class="search_wrap">
				<input type="text">
				<button type="button">
					<img src="icon.png">
				</button>
			</div>			
		</div>


		<div id="navbar">
			<div class="container">
				<ul>
					<li><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>				
			</div>
		</div>

	</header>

[css - search_area]

#main_header {
	position: relative;
	background-color: #ffffff;
}

#main_header .search_area {
	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;

	height: 160px;
	background-color: #ffffff;

	border-bottom: 1px solid #e4e8eb;
}

#main_header .search_area .search_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	position: relative;

	width: 582px;
	height: 52px;

	border: solid 4px #19ce60;
}

#main_header .search_area .search_wrap input {
	width: calc(100% - 52px);

	height: 100%;

	padding: 13px 15px;

	font-size: 22px;
	border: none;
}

#main_header .search_area .search_wrap input:focus {
	outline: none;
}

#main_header .search_area .search_wrap button {
	width: 52px;
	height: 100%;
	background-color: #19ce60;
}

#main_header .search_area .search_wrap button img {
	width: 35px;
	padding: auto auto;
}

#main_header .search_area
: 자식 요소인 검색창(search_wrap)을 영역의 정중앙에 정렬 -> flex 사용
#main_header .search_area .search_wrap
: input, button 태그는 inline-block 요소를 가지고 있음 -> 기본적으로 둘 사이의 공백 존재
: 따라서 flex 사용하여 input, button 태그 x축 정렬

#main_header .search_area .search_wrap input
: width: calc(100% - 52px);
: width = (부모 요소의 width 100%) - (button의 width값)
#main_header .search_area .search_wrap input:focus
: input 검색 영역을 클릭하면 기본적으로 나오는 border를 없앨 때 가상 선택자를 사용한다.

[css - navbar]

#main_header #navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}

#main_header #navbar ul {
	padding: 11px 0;
}

#main_header #navbar ul li {
	display: inline-block;  

	margin-right: 5px;
}

#main_header #navbar ul li a {
	color: #03c75a;
	font-size: 15px;
	font-weight: 700;
}

box-shadow
: 그림자 기능을 사용하여 bottom border 생성
: https://cssgenerator.org/box-shadow-css-generator.html
#main_header #navbar ul li
: display: inline-block; -> 일직선상으로 배치
ul을 감싸는 div 태그의 클래스가 container이므로 클래스로 지정한 CSS에 따라 이 영역의 width 값은 1130px이고, 브라우저에 대해 중앙에 위치한다.

2. Main Left

(0) 기본 설정

[html]

	<main role="main" class="container">
		<div id="main_left">
                
        	</div>
   	</main>

[css]

main {
	overflow: hidden;
	/*자식 태그에 float를 넣어도 자식의 높이값 영향을 받음*/

	padding-top: 20px;
	/*또는 header 영역에 margin-bottom으로 줄 수 있다.*/
}

main #main_left {
	float: left;
	width: 750px;
}

main #main_right {
	float: right;
	width: 350px;
	height: 2000px;
}

overflow: hidden; : 자식 태그에 float를 적용해도 자식의 높이값 영향을 받음
padding-top: 20px; : 또는 header 영역에 margin-bottom으로 줄 수 있다.

[html]

			<div id="banner_wrap"></div>

[css]

main #main_left #banner_wrap {
	width: 750px; 
	height: 135px;
	background-color: purple;

	margin-bottom: 12px;
}

width: 750px; : main_left의 width

(2) News

news_header
news_lists

[hmtl]

			<div id="news_wrap">
				<div class="news_header">
					<h2>뉴스스탠드</h2>
					<div class="news_btn_wrap">
						<button class="setting_1"></button>
						<button class="setting_2"></button>
						<button class="setting_3"></button>
					</div>
				</div>


				<ul class="news_lists">
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
				</ul>
			</div>

button의 디폴트 type = button

[css]

main #main_left #news_wrap .news_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 22px 0 16px 0;
}

main #main_left #news_wrap .news_header h2 {
	font-size: 18px;
	font-weight: 700;
}

main #main_left #news_wrap .news_header .news_btn_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 60px;
}

main #main_left #news_wrap .news_header .news_btn_wrap button {
	width: 15px;
	height: 15px;
	background-color: black;
}

main #main_left #news_wrap .news_lists {
	overflow: hidden;

	border: solid 1px #dae1e6;
}

main #main_left #news_wrap .news_lists .news_list {
	position: relative;
	float: left; 

	width: 16.66%; 
	height: 65px;
	background-color: #ffffff;

	border-bottom: solid 1px #e4e8eb;
	border-right: solid 1px #e4e8eb;

	text-align: center;
}

main #main_left #news_wrap .news_lists .news_list:nth-child(6n) {
	border-right: none;
}

main #main_left #news_wrap .news_lists .news_list:nth-child(19),
main #main_left #news_wrap .news_lists .news_list:nth-child(20),
main #main_left #news_wrap .news_lists .news_list:nth-child(21),
main #main_left #news_wrap .news_lists .news_list:nth-child(22),
main #main_left #news_wrap .news_lists .news_list:nth-child(23),
main #main_left #news_wrap .news_lists .news_list:nth-child(24) {
	border-bottom: none;
}

main #main_left #news_wrap ul,
main #main_left #news_wrap li {
	font-size: 0;	
} -> 여백제거

main #main_left #news_wrap .news_lists .news_list img {
	position: relative; 

	top: 50%;
	transform: translateY(-50%);   
	
} -> x축 중앙 정렬은 부모 태그(news_list)에서 실행

main #main_left #news_wrap .news_header
: 자식 요소인 h2, div 태그 정렬 -> flex 사용
main #main_left #news_wrap .news_header .news_btn_wrap
: 자식 요소인 button 태그 3개 정렬 -> flex 사용
main #main_left #news_wrap .news_lists .news_list(li 태그)
: float: left; : x축 정렬
: width: 16.66%; : 6등분
: text-align: center; : img는 inline 이므로 x축 중앙 정렬 적용할 수 있음
border 적용 단계
: news_lists(ul 태그)에 전체 border 적용
-> news_list(li 태그)에 각각 border bottom, right 적용
-> news_list:nth-child(6n), 마지막 열의 li 태그의 border-right 제거
-> news_list:nth-child(19~24), 마지막 행의 li 태그의 border-bottom 제거
y축 중앙 정렬 공식(자식 : relative/부모 : relative)
: top: 50%;
: transform: translateY(-50%);

(3) Blog

[html]

			<div id="blog_wrap">


				<div class="blog_header">
					<div class="left_header">
						<h3>오늘 읽을 만한 글</h3>
						<span>주제별 분류된 다양한 글 모음</span>
					</div>
					<div class="right_header">
						<span class="count"><strong>1,853</strong> 개의 글</span>
						<span>관심주제 설정</span>
					</div>
				</div>
                

				<nav class="blog_nav">
					<ul>
						<li><a href="#">엔터 1</a></li>
						<li><a href="#">엔터 2</a></li>
						<li><a href="#">엔터 3</a></li>
						<li><a href="#">엔터 4</a></li>
						<li><a href="#">엔터 5</a></li>
						<li><a href="#">엔터 6</a></li>
						<li><a href="#">엔터 7</a></li>
						<li><a href="#">엔터 8</a></li>
					</ul>
				</nav>
                

				<div class="blog_list_wrap">
					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>저널리스트 비톨트 립친스키는 지난 천 년 동안 가장 도움이 된 도구가 무엇일지 궁금했다. 조사 결과, 그는 나사와 나사돌리개라고 결론 지었다. 나사는 나사, 볼트, 너트 등 유사하다.</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>저널리스트 비톨트 립친스키는 지난 천 년 동안 가장 도움이 된 도구가 무엇일지 궁금했다. 조사 결과, 그는 나사와 나사돌리개라고 결론 지었다. 나사는 나사, 볼트, 너트 등 유사하다.</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>저널리스트 비톨트 립친스키는 지난 천 년 동안 가장 도움이 된 도구가 무엇일지 궁금했다. 조사 결과, 그는 나사와 나사돌리개라고 결론 지었다. 나사는 나사, 볼트, 너트 등 유사하다.</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>저널리스트 비톨트 립친스키는 지난 천 년 동안 가장 도움이 된 도구가 무엇일지 궁금했다. 조사 결과, 그는 나사와 나사돌리개라고 결론 지었다. 나사는 나사, 볼트, 너트 등 유사하다.</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일전</span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>


				<div class="blog_media_wrap">
					<ul>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
					</ul>
				</div>
                

				<div class="blog_list_wrap">
					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>저널리스트 비톨트 립친스키는 지난 천 년 동안 가장 도움이 된 도구가 무엇일지 궁금했다. 조사 결과, 그는 나사와 나사돌리개라고 결론 지었다. 나사는 나사, 볼트, 너트 등 유사하다.</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>저널리스트 비톨트 립친스키는 지난 천 년 동안 가장 도움이 된 도구가 무엇일지 궁금했다. 조사 결과, 그는 나사와 나사돌리개라고 결론 지었다. 나사는 나사, 볼트, 너트 등 유사하다.</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>저널리스트 비톨트 립친스키는 지난 천 년 동안 가장 도움이 된 도구가 무엇일지 궁금했다. 조사 결과, 그는 나사와 나사돌리개라고 결론 지었다. 나사는 나사, 볼트, 너트 등 유사하다.</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>저널리스트 비톨트 립친스키는 지난 천 년 동안 가장 도움이 된 도구가 무엇일지 궁금했다. 조사 결과, 그는 나사와 나사돌리개라고 결론 지었다. 나사는 나사, 볼트, 너트 등 유사하다.</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일전</span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
                

				<div class="blog_media_wrap">
					<ul>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
					</ul>
				</div>
                

			</div>

strong은 폰트를 강조하는 태그

[css 1]

main #main_left #blog_wrap {
	padding-top: 35px;
}

main #main_left #blog_wrap .blog_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding-bottom: 17px;
}

main #main_left #blog_wrap .blog_header .left_header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

main #main_left #blog_wrap .blog_header .left_header h3 {
	font-size: 14px;
	margin-right: 8px;
}

main #main_left #blog_wrap .blog_header .left_header span {
	font-size: 12px;
	color: grey;
}

main #main_left #blog_wrap .blog_header .right_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

main #main_left #blog_wrap .blog_header .right_header .count strong{
	color: #000000;
}

main #main_left #blog_wrap .blog_header .right_header span {
	font-size: 12px;
	color: grey;
}

main #main_left #blog_wrap .blog_header
: 자식 요소인 left_header, right_header x축 정렬 -> flex 사용
main #main_left #blog_wrap .blog_header .left_header
: 자식 요소인 h3, span 태그 정렬 -> flex 사용
main #main_left #blog_wrap .blog_header .right_header
: 자식 요소인 span 태그 두 개 정렬 -> flex 사용

[css 2]

main #main_left #blog_wrap .blog_nav ul {
	overflow: hidden;

	border: solid 1px #dae1e6;
}

main #main_left #blog_wrap .blog_nav ul li{
	float: left;

	width: 12.5%; -> 8등분
	height: 49px;

	border-right: solid 1px #dae1e6;
}

main #main_left #blog_wrap .blog_nav ul li:last-child {
	border-right: 0;
}

main #main_left #blog_wrap .blog_nav ul li a {
	display: block; -> y축 중앙 정렬 효과

	width: 100%;
	height: 100%;

	line-height: 49px;
	text-align: center;
}

[css 3]

main #main_left #blog_wrap .blog_list_wrap {
	padding-top: 18px;

	border-bottom: solid 1px #dae1e6;
}

main #main_left #blog_wrap .blog_list_wrap li {
 	margin-bottom: 18px;
}


main #main_left #blog_wrap .blog_list_wrap li a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

main #main_left #blog_wrap .blog_list_wrap li a img {
	width: 170px;
	height: 114px;

	margin-right: 21px;
}

main #main_left #blog_wrap .blog_list_wrap li a .blog_list_info {
	width: 559px;

	padding-right: 47px;
}

main #main_left #blog_wrap .blog_list_wrap li a .blog_list_info span {
	font-size: 12px; 
	color: #35ae5e;
} -> 아래의 span과 겹치므로 순서 주의, css는 아래에 있을 수록 우선 순위이다.

main #main_left #blog_wrap .blog_list_wrap li a .blog_list_info h4 {
	font-size: 13px;
}

main #main_left #blog_wrap .blog_list_wrap li a .blog_list_info p {
	font-size: 13px;
}	

main #main_left #blog_wrap .blog_list_wrap li a .blog_list_info .date-wrap span {
	font-size: 12px;
	color: #505050;
}

main #main_left #blog_wrap .blog_list_wrap li a
: img 태그와 div 태그 x축 정렬 -> flex 사용

[css 4]

main #main_left #blog_wrap .blog_media_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 18px 0;

	border-bottom: solid 1px #dae1e6;
}

main #main_left #blog_wrap .blog_media_wrap ul li .blog_media_info {
	padding-top: 12px;
}

main #main_left #blog_wrap .blog_media_wrap ul li .blog_media_info h4 {
	font-size: 13px;
}

main #main_left #blog_wrap .blog_media_wrap ul li .blog_media_info span {
	font-size: 12px;
}

main #main_left #blog_wrap .blog_media_wrap ul
: flex에 적용하여 li 태그 배치

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

레이아웃을 적용할 때 자꾸 브라우저 비율에 따라 여백이 생기는 것이 답답했다.

해결 방법 작성

감싸는 영역의 폰트 사이즈를 0으로 만들어 보았지만 되는 경우도 있었고 되지 않는 경우가 더 많았다.
네이버의 개발자도구를 켜서 비교해보았으나 아직 읽는 것이 미숙해서인지 레이아웃에 관련된 CSS를 찾는 것이 어려웠다.
오늘의 해결 방법으로는 border를 두껍게 지정해서 여백을 없애는 것이였는데 보기에는 좋았지만 원래의 두께로 해결하지는 못하였다.

학습 소감

우선은 레이아웃을 확실하게 익히고 나서 여백에 대해 이것저것 설정을 바꾸면서 해결 방법을 찾아야겠다.

류영서

이전 포스트

7월 16일 Velog

다음 포스트

7월 19일 Velog

Naver 실습

0. Default

1. Header

2. Main Left

(0) 기본 설정

(1) Banner

(2) News

(3) Blog

7월 16일 Velog

7월 20일 Velog

0개의 댓글