💻

🛫 GIT-HUB

HTML | naver_audio_header
CSS | naver_audio_header

CSS | audio_기본값

.audio_container{
	width: 1080px;
	margin: 0 auto;
}

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

.audio_flex_start {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	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_header

🖤 position 3차원 특성을 활용해서 디자인의 위치를 직접 조정하였다.

#audio_header .audio_nav_left li a.active span:after{
	display: block;
	position: absolute;
	content: "";
	border-bottom: solid 3px #222;
	border-radius: 1.5px;
	z-index: 1;
	left: -4.5px;
	right: -5.5px;
	bottom: -17px;
}

position 3차원을 활용해서 left,top,right,bottom을 전부 0으로 만들어주면 공간을 여백 없이 가득 채울 수 있다. 이 때 값을 직접 입력하여 수동으로 움직임을 줄 수 있게 된다.

📝 마무리

💛 flex를 이용해서 공간 배치 작업을 하는데 flex를 class가 아닌 id에 입력하여 적용이 안됐었다. class를 추가하고 제대로 입력을 해주었다.

💛 위에 실수한 부분을 제외하고는 크게 어려운 부분은 없었다. 본문에 작성한대로 새로운 공간 위치 작업하는 법을 배워서 뿌듯했다.