📌 학습한 내용
네이버 오디오 실습
전체 코드 : 💾
상단 영역
👉 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 가상 선택자를 이용해 버튼이 없었다 나타나는 효과를 주려 했는데, 그리 어려운 작업은 아니었지만 다시 해당 코드를 찾아 효과를 나눠서 넣어주느라 조금 복잡했다. 해당 페이지의 레이아웃이 간단한 것도 한 몫 했지만, 꽤 완성도가 높게 만들어 진 것 같아 뿌듯하다. 😊
늘 새로운 배움을 추구하는 개린이 🌱