네이버 오디오2

✔ TODAY

오늘은 어제와 계속해서 오디오 페이지를 계속 작성해본다.

✔ 학습한 내용

#auido-main

• 앞써 만든 header 가 fixed라, 항상 고정이 되는데, 이때 main에 겹치지 않도록 padding-top를 준다.

.auido-section .auido-header h2 {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -.8px; 
}

• letter-spacing : 글자의 위&아래이 아니라, 좌&우 간격를 조정하는 속성. 각 단어간 x축간격을 조정한다.

#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%;
}

• overflow : hidden를 사용하면 auido-body의 button들 중 일부가 메인컨테이너 밖에 나가게되, 해당부분이 출력이 안되게 된다.
  + 그래서 해당 속성과 float를 지우고,
  + audio-container부분에 auido-flex-between사용해서 해결.
  

top💖 3차원 공간내의 x축 중앙정렬 공식

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

.auido-main-left

#auido-live

#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;
}

• 라이브 표시 유무의 공간은 만들고 그걸 판단하는 활성화 선택자는 li태그에 class를 포함 시킨다.

#auido-live ul li.active a .img-wrap {
	border: solid 2px red;	
}

• 실제 네이버 해당 페이지에서는 원의 라이프 테두리는 이미지로 들어왔으나, 앞과 같은 방법으로 활용해서 아래와 같이 코드를 포함해 작성해 보았다.

📚 학습하기
앞의 선택자로 볼더의 설정에 색상만 바꾸는 것이라 할지라도,
볼더 속성에 색상만 기입하면 볼더속성 자체가 작동을 하지 않는다.
그러니 속성값에 대한 모든 값은 기입하도록 하자.

#auido-book

#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차원의 관계의 부모, 자식간의 관계를 정확하게 정리하자.

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

• 아직까지도 css속성에 대해 이해가 덜 된 속성이 있는 듯하다...
• position내의 부모&자식간의 서로 영향을 주고 받는 관계에 대해 어떻게 출력에 영향을 주는 지에 이해가 부족하다.

✔ 해결방법작성

• 실제 코드를 입력하거나 그전의 학습한 자료를 참고 하여, 이해해갔다.

✔ 학습 소감

학습의 후반인데도 아직까지도 헷갈리는 개념이 있다는 것에 현타가 온다...ㅜㅜ 분명 학습을 한 것인데 시간이 지나거나 실제로 적용을 할때 개념이 헷갈리는 거 보니 아직도 부족한것 같다...ㅜㅜㅜ