2021_08_13개발일지(2)

1) 학습한 내용

오늘은 오디오의 상단영역에 대해 작업해보았다.

1. Auadio - header - left

- html

<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" class="active"><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"><span>카테고리</span></a></li>
						<li><a href="#"><span>이벤트</span></a></li>
					</ul>
				</div>

- css

오늘은 홈 글자밑 굵은줄 표시를 할때 3차원적인 포지션을 적용해 right와 left를 사용해 공간을 만드는 방법을 이용해 작업을 진행하였다.

#audio-header {
	position: fixed;
	width: 100%;
	background-color: #ffffff;
	border-bottom: solid 1px #efeff4;

	left: 0;
	top: 0;

	z-index: 99999;
}

#audio-header .audio-nav-left {
	width: 660px;
}
#audio-header .audio-nav-left .audio-logo {
	font-size: 25px;
}

#audio-header .audio-nav-left .audio-logo a {

}

#audio-header .audio-nav-left ul {
	padding-top: 10px;
}

#audio-header .audio-nav-left li {

}

#audio-header .audio-nav-left li a {
	display: block;
	font-size: 17px;
	padding: 12px 13px 17px 12px;
}

#audio-header .audio-nav-left li a.active {
	font-weight: 700;
}

#audio-header .audio-nav-left li a span {
	position: relative;
	display: inline-block;
	height: 21px;
}

#audio-header .audio-nav-left li a.active span:after {
	display: block;
	position: absolute;
	/*를 사용하기 위해 span 태그에 relative 적용*/
	content: "";
	border-bottom: solid 3px #222222;
	border-radius: 1.5px;

	z-index: 1;

	left: -4.5px;
	right: -5.5px;
	/*3차원 포지션을 사용할때 이렇게 공간을 만들어줄 수 있다.*/
	bottom: -17px;
}

2. Auadio - header - right

- html

<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="index.html" class="btn-login">로그인</a>
					</div>
				</div>

			</nav>

		</div>

	</header>

- css

#audio-header .audio-nav-right {
	width: 330px;
}
#audio-header .audio-nav-right .search-wrap {
	width: 180px;
	height: 39px;
	background-color: #ffffff;
	border: solid 2px rgba(0, 86, 201, .2);
	border-radius: 4px;
}

#audio-header .audio-nav-right .search-wrap .icon-search {
	background-image: url(../img/serch.png);
	background-repeat: no-repeat;
	background-size: 20px;
    background-position: center;
    width: 35px;
    height: 35px;
	/*background-color: yellow;*/
}

#audio-header .audio-nav-right .search-wrap input {
	width: calc(100% - 40px);
	height: 100%;

	padding: 8px 3px;
    font-size: 13px

	outline: none;
	border: none;
}

#audio-header .audio-nav-right .search-wrap input:focus {
	outline: none;
}



#audio-header .audio-nav-right .profile-wrap {

}

#audio-header .audio-nav-right .profile-wrap .profile-img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

#audio-header .audio-nav-right .profile-wrap .btn-login {
	font-size: 15px;
	padding-left: 8px;
}

2) 학습내용 중 어려웠던 점 및 해결방법

오늘도 input 영역안에 이미지를 주었는데, 오늘은 css 에서 백그라운드 이미지를 주었다.
여기서 잘기억이 안나 중앙정렬을하는데 검색해서 center를 넣어주고 백그라운드 이미지 사이즈도 다시 잡고 바깥 노란영역부분의 영역도 다시 잡아주었다.

또 input에 placehorder 도 넣어주고 싶었는데 이름이 생각이 나지 않아 검색을 통해 찾아주었다.

3) 학습소감

계속 동일 하게 사용 하는 부분은 어느정도 기억이 나는데 한번씩 사용하는 코드들은 바로바로 생각이 잘 나지 않는 것 같다. 그래도 이제는 어느정도 언어를 알아 검색하는데 어려움이 없지만, 그래도 바로 생각이 날 수 있도록 계속 사용하려 노력 해야겠다.

또 이번에도 content를 사용하여 밑에 굵은 줄 표시를 넣어주었는데, 이때 원래는 display block을 사용하고 width 와 height 를 주어 공간을 잡아주었는데, 오늘은 position absolute와 relative를 사용해 3차원적인 요소에 left와 right를 주어 공간을 만들어주는 방법을 사용했다.

정말 css 코드에는 다양한 방법들이 넘쳐나고 얼마든지 내가 원하는 방식이 있다면 생각해서 구현해 낼수있는 재미가 있는 것 같다~ 머리가 조금 복잡할뿐...!

오늘도 끝까지 으쌰으쌰 해서 금요일 마무리 잘 하자 :)