네이버 오디오2
오늘은 어제와 계속해서 오디오 페이지를 계속 작성해본다.
.auido-section .auido-header h2 {
font-size: 22px;
font-weight: 500;
letter-spacing: -.8px;
}
#auido-main .audio-container {
/*overflow: hidden;*/
align-items: flex-start;
}
#auido-main .auido-main-left {
/*float: left;*/
width: 660px;
height: 100%;
}
#auido-main .auido-main-right{
/*float: right;*/
width: 330px;
height: 100%;
}
top💖 3차원 공간내의 x축 중앙정렬 공식
left: 50%; transform: translateX(-50%);
#auido-live ul li a .img-wrap .live-state .live {
display: block;
padding: 4px 8px ;
color: red;
border: solid 2px red;
border-radius: 3px;
font-size: 10px;
background-color: #ffffff;
}
#auido-live ul li.active .img-wrap .live-state .live{
border: solid 2px red;
background-color: red;
color: #ffffff;
}
#auido-live ul li.active a .img-wrap {
border: solid 2px red;
}
📚 학습하기
앞의 선택자로 볼더의 설정에 색상만 바꾸는 것이라 할지라도,
볼더 속성에 색상만 기입하면 볼더속성 자체가 작동을 하지 않는다.
그러니 속성값에 대한 모든 값은 기입하도록 하자.
#auido-book .auido-body .img-wrap {
position: relative;
width: 100%;
}
#auido-book .auido-body .img-wrap img {
/*position: absolute;*/
width: 100%;
}
#auido-book .auido-body .img-wrap .time {
position: absolute;
background-color: rgba(17, 17, 17, .75);
font-size: 11px;
color: #ffffff;
right: 5px;
bottom: 5px;
}
부모인 img-wrap의 높이를 설정하지 않았기 때문에, .time에 설정한 위치값이 제대로 적용되지 않았다.
+ 이런 경우 img-wrap에 높이를 설정하면 되나, 여기는 2차원 속성이라 높이값을 설정할 수 가 없다
💦Q
(???? 같은 구조로 카피켓을 한 라이브에서는 동일한 선택자에 높이 값을 설정했는데 여기에서는 왜 2차원이라고 하는지 이해 할 수 가 없다.?????)
✨A
(이번 레이어에 관해, 이미지크기 변동에 상관없이 .time의 위치에 영향을 받지 않게 하기 위해서다.)
이런 경우 심플하게 해결하는 방법은 구조를 변경하는 것
이번 실습에서는 img에 position: absolute를 제거.
자식(img)의 높이 값이 부모에게 영향을 주도록 만든다.
여기의 경우 이미지 높이를 바꾸어도 자동 설정되게 되어 있는 구조
즉 , 자식의 높이 값이 부모에게 영향을 줘서 자동으로 time의 위치가 이미지 크기에 맞게 설정된다.
💖tip
position: absolute를 설정하면 부모에게 영향을 줄 수가 없다.(.time)의 경우
📚학습하기
3차원의 관계의 부모, 자식간의 관계를 정확하게 정리하자.
학습의 후반인데도 아직까지도 헷갈리는 개념이 있다는 것에 현타가 온다...ㅜㅜ 분명 학습을 한 것인데 시간이 지나거나 실제로 적용을 할때 개념이 헷갈리는 거 보니 아직도 부족한것 같다...ㅜㅜㅜ