Dev log - 37, 네이버 오디오 카피캣 실습 #3

박강산·2021년 8월 18일
0

대구AI스쿨 - 개발일지

목록 보기
37/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;
}

.audio-container {
	width: 1080px;
	margin: 0 auto;
}

.audio-flex-start {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
}

.audio-flex-between {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

.audio-flex-center {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}

.audio-flex-end {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: stretch;
}

.audio-section {
	padding: 32px 0;
}

.audio-section .audio-header h2 {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -.8px;
}

.audio-section .audio-body {
	position: relative;
	padding-top: 19px;
}

.audio-section .audio-body .btn-right {
	position: absolute;
    width: 35px;
    height: 35px;
    background-color: yellow;
    border-radius: 50%;
	right: -17px;
}

네이버 오디오 실습 - 네이버 오디오 오른쪽 영역

  • 글을 통해 내용을 입력할 때는, 정보를 입력할 때 쓰는 태그를 사용, div 태그 불가 (웹 표준)
  • inline-block 속성을 지니면, x축 중앙 정렬(magin: 0 auto) 속성이 적용 안됨. block 으로 속성을 변경

HTML 문서

<body>
	<main id="audio-main" role="main">		
		<div class="audio-container audio-flex-between">
			<div class="audio-main-right">				
				<div id="audio-intro" class="audio-section">
					<div class="audio-header">
						<h2>인기 채널을 소개합니다.</h2>
					</div>

					<div class="audio-body">
						<ul class="audio-flex-between">
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>오늘의 회화 - 영어</h3>
									<span class="source">네이버</span>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>내 남편과 결혼해줘</h3>
									<span class="source">네이버</span>
								</a>
							</li>
						</ul>
					</div>
				</div>

				<div id="audio-discovery" class="audio-section">
					<div class="audio-header">
						<h2>
							오늘의 발견<br>
							요즘 많이 듣는 채널👍
						</h2>
						<p>8월 17일 0시부터 24시까지 많이 들은 채널입니다.</p>
						<a href="#" class="link-setting">관심 설정</a>
					</div>

					<div class="audio-body">
						<ul class="audio-flex-between">
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>놓치면 후회할 영화</h3>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>놓치면 후회할 영화</h3>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>놓치면 후회할 영화</h3>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/152x152">
									<h3>놓치면 후회할 영화</h3>
								</a>
							</li>
						</ul>

						<button class="btn-more">
							<span class="color-blue">더 많이</span> 발견하기 1 <span class="pages">/ 5</span>
						</button>
					</div>
				</div>

				<div id="audio-create" class="audio-section">
					<div class="audio-body">
						<ul>
							<li>
								<a href="#" class="audio-flex-between">
									<div class="txt-wrap">
										<h2>오디오클립 채널을 만들어 보세요!</h2>
										<p class="color-blue">콘텐츠 제안하기</p>
									</div>

									<div class="list-bg list-bg-1"></div>
								</a>
							</li>

							<li>
								<a href="#" class="audio-flex-between">
									<div class="txt-wrap">
										<h2>즐거움이 들린다! 오디오클립</h2>
										<p class="color-purple">오디오클립이 궁금하시다면?</p>
									</div>

									<div class="list-bg list-bg-2"></div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</main>
</body>

CSS 문서 1 - style.css

#audio-intro .audio-body li img {
	width: 152px;
	height: 152px;
	border-radius: 4px;
}

#audio-intro .audio-body li h3 {
	margin-top: 12px;
	font-size: 13px;
}

#audio-intro .audio-body li .source {
	margin-top: 4px;
	font-size: 12px;
	color: #959595;
}

#audio-discovery .audio-header {
	position: relative;
}

#audio-discovery .audio-header h2 {
	font-size: 17px;
	line-height: 24px;
}

#audio-discovery .audio-header p {
	margin-top: 7px;
	font-size: 13px;
	color: #888;
}

#audio-discovery .audio-header .link-setting{
	display: block;
    position: absolute;
    padding: 10px 18px 8px;
    background-color: #ffffff;
    font-size: 13px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);
    color: #157efb;
    right: 0;
    top: 6px;
}

#audio-discovery .audio-body li {
	margin-bottom: 40px;
}

#audio-discovery .audio-body li img {
	width: 152px;
	height: 152px;
	border-radius: 4px;
}

#audio-discovery .audio-body li h3 {
	margin-top: 12px;
	font-size: 13px;
}

#audio-discovery .audio-body .btn-more {
	display: block;
	margin: 0 auto;

	font-size: 14px;
	color: #222;

	padding: 12px 21px 12px 21px;
	border: solid 1px rgba(0, 0, 0, 0.1);
	border-radius: 24px;
	background-color: #ffffff;
	box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);

	font-weight: 500;
}

#audio-discovery .audio-body .btn-more .color-blue {
	color: #157efb;
}

#audio-discovery .audio-body .btn-more .pages{
	color: #959595;
}

#audio-create .audio-body li {
	padding: 22px 4px;
	border-top: solid 1px #efefef;
}

#audio-create .audio-body li:last-child {
	border-bottom: solid 1px #efefef;
}

#audio-create .audio-body li .txt-wrap {
	width: 225px;
}

#audio-create .audio-body li .txt-wrap h2 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -1.5px;
}

#audio-create .audio-body li .txt-wrap p {
	font-size: 14px;
	margin-top: 6px;
	letter-spacing: -.8px;
}

#audio-create .audio-body li .txt-wrap p.color-blue {
	color: #2db8e8;
}

#audio-create .audio-body li .txt-wrap p.color-purple {
	color: #8560f7;
}

#audio-create .audio-body li .list-bg {
	width: 80px;
	height: 64px;
}

#audio-create .audio-body li .list-bg.list-bg-1 {
	background-color: yellow;
}

#audio-create .audio-body li .list-bg.list-bg-2 {
	background-color: purple;
}

네이버 오디오 실습 - 네이버 오디오 하단 영역

  • HTML 문서에 특수문자를 넣을 때는, 다음과 같은 사이트 참고
    http://kor.pe.kr/util/4/charmap2.htm

  • nth-child 속성을 사용하여, 개인정보처리방침 영역에 font-weight 속성을 설정

HTML 문서

<body>			
	<footer id="audio-footer">
		<div class="audio-container">
			<h1>
				<a href="#">audio clip</a>
			</h1>

			<div class="copyright-wrap">
				<p>
					본 콘텐츠의 저작권은 저자 또는 제공사에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.<br>
					본 콘텐츠의 저작권은 저자 또는 제공사에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.<br>
					본 콘텐츠의 저작권은 저자 또는 제공사에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.
				</p>
			</div>

			<nav class="footer-nav">
				<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>
					<li><a href="#">개인정보처리방침</a></li>
					<li><a href="#">책임의 한계와 법적고지</a></li>
					<li><a href="#">결제관련문의</a></li>
					<li><a href="#">고객센터</a></li>
				</ul>
			</nav>

			<a href="#" class="footer-copyright-link">
				<span class="symbol">&copy;</span> NAVER Corp.
			</a>
		</div>
	</footer>
</body>

CSS 문서 1 - style.css

#audio-footer {
	background-color: #eaecef;
	padding: 48px 0 164px;
}

#audio-footer h1 {
	font-size: 25px;	
}

#audio-footer h1 a {
	color: #959595;
}

#audio-footer .copyright-wrap {
	margin-top: 37px;
}

#audio-footer .copyright-wrap p {
	letter-spacing: -1px;
	font-size: 13px;
	line-height: 19px;

	color: #959595;
}

#audio-footer .footer-nav {
	margin-top: 47px;
}

#audio-footer .footer-nav ul {
	overflow: hidden;
}

#audio-footer .footer-nav li {
	float: left;
}

#audio-footer .footer-nav li:nth-child(6) {
	font-weight: bold;
}

#audio-footer .footer-nav li a {
	font-size: 13px;
	color: #959595;
	letter-spacing: -1px;
}

#audio-footer .footer-nav li a:after {
	display: inline-block;
	content: "";
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background-color: #959595;

	/*margin: 4px 7px;*/

	vertical-align: top;
	margin: 9px 7px 0;
}

#audio-footer .footer-nav li:last-child a:after {
	content: none;
}

#audio-footer .footer-copyright-link {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: #959595;
	letter-spacing: -.5px;
}

네이버 오디오 실습 - 네이버 오디오 카테고리 영역

  • flex-between 속성을 사용하면 영역을 균등하게 배치하는데, 갯수가 맞지 않으면 다음과 같이 배치가 됨

    이를 해결하려면, flex-start 속성을 설정하고 공백을 설정해주면 됨

  • nth-child 속성에는 여러가지가 있는데, 그 중 odd 는 홀수, even 은 짝수 자식에만 속성을 적용, CSS nth-child 로 구글링하면 더 많은 정보를 얻을 수 있음

HTML 문서

<body>			
	<header id="audio-header">
		<div class="audio-container">			
			<nav id="audio-nav" class="audio-flex-between">
				<div class="audio-nav-left audio-flex-between">
					<h1 class="audio-logo">
						<a href="#">audio clip</a>
					</h1>

					<ul class="audio-flex-end">
						<li><a href="audio.html"><span>홈</span></a></li>
						<li><a href="#"><span>랭킹</span></a></li>
						<li><a href="#"><span>연재 채널</span></a></li>
						<li><a href="#"><span>오디오북</span></a></li>
						<li><a href="audio-category.html" class="active"><span>카테고리</span></a></li>
						<li><a href="#"><span>이벤트</span></a></li>
					</ul>
				</div>

				<div class="audio-nav-right audio-flex-between">
					<div class="search-wrap audio-flex-start">
						<i class="icon-search"></i>
						<input type="text" placeholder="무엇을 찾으세요?">
					</div>

					<div class="profile-wrap">
						<img src="https://via.placeholder.com/32" class="profile-img">
						<a href="#" class="btn-login">로그인</a>
					</div>
				</div>
			</nav>
		</div>
	</header>

	<main id="audio-main" class="audio-sub-main" role="main">
		<div class="audio-container">
			<div id="auido-category-channel" class="audio-category">			
				<div class="title-wrap">
					<h2>채널</h2>
					<p>4,997개의 채널</p>
				</div>

				<ul class="audio-category-lists">
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>
				</ul>
			</div>

			<div id="auido-category-book" class="audio-category">				
				<div class="title-wrap">
					<h2>오디오북</h2>
					<p>20,495개의 채널</p>
				</div>

				<ul class="audio-category-lists">
					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>

					<li class="category-list">
						<a href="#">
							<h3>예능</h3>
							<p>유머, 코미디, 고민상담</p>
							<img class="thumbnail" src="https://via.placeholder.com/103">
						</a>
					</li>			
				</ul>
			</div>
		</div>
	</main>

	<footer id="audio-footer">
		<div class="audio-container">
			<h1>
				<a href="#">audio clip</a>
			</h1>

			<div class="copyright-wrap">
				<p>
					본 콘텐츠의 저작권은 저자 또는 제공사에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.<br>
					본 콘텐츠의 저작권은 저자 또는 제공사에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.<br>
					본 콘텐츠의 저작권은 저자 또는 제공사에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.
				</p>
			</div>

			<nav class="footer-nav">
				<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>
					<li><a href="#">개인정보처리방침</a></li>
					<li><a href="#">책임의 한계와 법적고지</a></li>
					<li><a href="#">결제관련문의</a></li>
					<li><a href="#">고객센터</a></li>
				</ul>
			</nav>

			<a href="#" class="footer-copyright-link">
				<span class="symbol">&copy;</span> NAVER Corp.
			</a>
		</div>
	</footer>
</body>

CSS 문서 1 - style.css

#audio-main.audio-sub-main {
	background-color: #ffffff;	
}

.audio-category {
	padding-top: 71px;
}

.audio-category .title-wrap {
	padding-bottom: 20px;
	border-bottom: solid 1px #ececec;
}

.audio-category .title-wrap h2 {
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -1px;
}

.audio-category .title-wrap p {
	font-size: 14px;
	color: #959595;
	margin-top: 20px;
}

.audio-category .audio-category-lists {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: stretch;
	margin-top: 22px;
}

.audio-category .audio-category-lists .category-list {
	width: 162px;
	height: 164px;
	margin-right: 20px;
	margin-bottom: 20px;
}

.audio-category .audio-category-lists .category-list:nth-child(6n) {
	margin-right: 0;
}

.audio-category .audio-category-lists a {
	overflow: hidden;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgb(230, 125, 127);
	border-radius: 6px;
	padding: 14px;
}

.audio-category .audio-category-lists a h3 {
	font-size: 19px;
	line-height: 1.3;
	color: #ffffff;
}

.audio-category .audio-category-lists a p {
	position: absolute;
	width: 80px;
	font-size: 13px;
	color: #fefefe;

	bottom: 14px;
}

.audio-category .audio-category-lists a .thumbnail{
	position: absolute;
	width: 78px;
	height: 78px;

	right: -13px;
	bottom: 0;

	transform: rotate(25deg);
}

#auido-category-book {
	padding-bottom: 120px;
}

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

  • 없음

해결방법

  • 없음

학습 소감

  • 오늘은 네이버 오디오클립 사이트 카피캣 실습을 완료하였음. 내일부터는 네이버를 떠나서 트위치 사이트 카피캣 실습을 진행할 텐데, 다른 사이트들은 어떤 형식으로 이루어졌는지 궁금함. 오늘 작업 중에 흥미로웠던 것은 nth-child 속성의 활용임.

    기존에 배웠던 것들로 어떤 속성인지는 알았지만, 실제 환경에서는 어떻게 활용되는지 궁금했었음. 오늘 실습을 통해 공백 설정이나 여러 가지 속성이 있다는 것을 알게 되었고, 내가 혼자 속성을 설정하였을 때, 적용이 되지 않았던 이유를 한번 검색해 볼 예정임.

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

Dev log - 36, 네이버 오디오 카피캣 실습 #2

다음 포스트

Dev log - 38, 트위치 카피캣 실습 #1

0개의 댓글