📌 학습한 내용

네이버 오디오 실습

전체 코드 : 💾

상단 영역

👉 3차원 position 속성을 이용해 공간을 만드는 방법

<div></div>

div {
	position: absolute
    background-color: yellow
    
    left: 0;
    right: 0;
    bottom: 0;
    top; 0;
}

-> 공간을 늘린다고 생각

메인 왼쪽

1) '오늘의 오디오클립'

letter-spacing : 텍스트 좌우 간격
#audio-main-left, #audio-main-right (자식들)의 float: left/right;가 부모의 높이값에 영향을 주게하기 위해, #audio-main .audio-container { overflow: hidden; }을 적용

#audio-main {
	width: 100%;
	height: 2000px;
	background-color: #f6f8fa;

	padding-top: 61px;
}

#audio-main .audio-container {
	overflow: hidden;
}

.audio-main-left {
	float: left;
	width: 660px;
}

.audio-main-right {
	float: right;
	width: 330px;
}

-> 후에 btn-left에 영향을 미쳐 oveflow: hidden; 속성을 삭제, 아래와 같이 align-items: flex-start를 넣어줌

#audio-main .audio-container {
	/*overflow: hidden;*/
	align-items: flex-start;
}

#audio-today .audio-silde .btn의 좌표값을 #audio-today .audio-slide-wrap에 기준점을 두기 위해 각각 position: absolute;,position: relative; 적용

2) '오디오클립 추천 오리지널'

3) '나를 위한 플레이리스트'

image.wrap을 기준으로 img,icon-like와 icon-play버튼의 좌표값을 잡기 위해 각각 position: relative;와 position: absolute를 적용

#audio-playlist .audio-body li .image-wrap {
	position: relative;
}

#audio-playlist .audio-body .image-wrap img {
	position: absolute
}
#audio-playlist .audio-body .image-wrap .icon-like {
	position: absolute;   
}
#audio-playlist .audio-body .image-wrap .icon-play {
	position: absolute;   
}

4) '라이브 ON'

x축 중앙정렬 효과

left: 50%;
transform: translateX(-50%);

5) '셀럽들의 목소리로 듣는 베스트셀러'

time 클래스에 bottom 속성값이 제대로 적용되지 않은 이유

-> time의 좌표 기준점이 되는 image-wrap의 높이가 잡혀있기 않기 때문
-> img의 높이를 기준으로 image-wrap에 높이를 만들어 주려 함(부모가 높이값을 가지고 있지 않을 때, 자식의 높이값이 부모에게 영향을 준다는 원리 이용)
-> 그러나 현재 자식은 3차원적특성(position: absolute;)을 가지고 있고, 부모는 2차원적 특성(position: relative;)을 가지고 있기 때문에 높이를 만들 수가 없음
-> 해결방법) img의 position: absolute;를 제거하면 2차원이 됨
=> 2차원은 부모의 높이값에 영향을 준다.

6) '새로 나온 채널'

'오디오클립 추천 오리지널' 영역 코드 재활용

📌 학습내용 중 어려웠던 점

네이버 오디오의 <main> 영역이 오른쪽으로 밀리는 현상

📌 해결방법

이전 '네이버 게임' 페이지를 만들며 적용한 전체 <body>의 min-width: 1300px로 인해, (브라우저 크기 100% 기준으로) width: 1080px;을 가진 '네이버 오디오'의 <body> 영역의 레이아웃이 틀어지는 현상이 발생한 것이다. '네이버 게임'의 <main>의 클래스를 이용해, 해당 페이지에만 따로 min-width: 1300px값을 적용하고, '네이버 오디오'의 min-width값은 해제시켜 주었다.

📌 학습소감

앞으로는 페이지 전체를 우선적으로 살피고 카피캣을 해야겠다. 페이지에 생각보다 유사한 레이아웃이 많이 쓰이는데, 나중에서야 깨닫고 코드를 수정하니 코드의 가독성이 많이 떨어지는것 같다. 버튼 부분에 hover 가상 선택자를 이용해 버튼이 없었다 나타나는 효과를 주려 했는데, 그리 어려운 작업은 아니었지만 다시 해당 코드를 찾아 효과를 나눠서 넣어주느라 조금 복잡했다. 해당 페이지의 레이아웃이 간단한 것도 한 몫 했지만, 꽤 완성도가 높게 만들어 진 것 같아 뿌듯하다. 😊

Author And Source

이 문제에 관하여(210812 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiyoon_jeong2005/210812-개발일지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

210812 개발일지