✔ TODAY

다시 계발일지를 정리중에 해당 시리즈에 포함을 안시킨 것을 9.4일에 알게 되었다... 뒤늦게 시리즈에 넣어 수정하니... 가장 늦게 배치가...ㅜㅜㅜㅜㅜㅜㅜㅜㅜ

---

✔ 학습한 내용

네이버 오디오 3

auido-main-right

#auido-discovery

#auido-discovery .auido-header {
	position: relative;
}

#auido-discovery 를 position relative로 감싸는 이유는 link-setting의 위치배치를 위한것.

#auido-discovery .auido-header .link-setting{
	position: absolute;
	display: block;
	padding: 10px 18px 8px;
	background-color: #ffffff;
	font-size: 13px;
	border: solid 1px rgba(0, 0, 0, 0.10);
	border-radius: 20px;
	box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);
	color: #157efb;
	right: 0;
	top: 0;
}

a테그를 전체보기 버튼식으로 보이게 꾸미는 소스

#auido-discovery .auido-body .btn-more {
	display: block;
	font-size: 16px;
	color: #222;
	padding: 12px 21px 12px 21px;
	border: solid 1px rgba(0, 0, 0, .1);
	border-radius: 24px;
	background-color: #ffffff;
	box-shadow: 0 2px 10px 0 rgb(80 85 91 / 7%);
	font-weight: 500;

	margin: 0 auto;
}

버튼은 디스플레이가 인라인-블럭이기 때문에 마진(중앙정렬값)이 먹히지 않는다.
그래서 버튼의 디스플레이를 인라인-블럭>블럭으로 바꾼다.

auido-footer

html 특수문자
링크텍스트

#auido-footer .footer-nav li:last-child a:after{
	display: none;
	content: none;
}

둘 중 하나 선택해서 사용하면 된다.

#auido-footer .footer-nav a:after{
	display: inline-block;
	content: '';
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background-color: #959595;

	/*margin: 4px 7px;*/
	vertical-align: top;
	margin: 9px 7px 0;
}

1)margin: 4px 7px;
2)vertical-align: top;
margin: 9px 7px 0;
3) position: relative; 를 사용해서 top를 조정

audio-category

실습대상
flex 박스를 만능이라고 생각하지 말것!!

마진 병합현상

transform: rotate(25deg); 오버젝트를 회전시키는 효과

뛰어나온 영역은 가리고 위해 부모 a태그에
.audio-category .audio-category-list a{
overflow: hidden;
를 효과를 준다.

.audio-category .audio-category-list a .thumbnail{
	position: absolute;

	width: 78px;   103px인 이미지를 사이즈 조정
	height: 78px;

	right: -13px;
	bottom: 0;

	transform: rotate(25deg);
}

.audio-category .audio-category-lists{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 22px;
}

• flex-between의 한계

해결방법

.audio-category .audio-category-lists{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin-top: 22px;
}
.audio-category .audio-category-list{
	width: 162px;
	height: 164px;
	margin-right: 20px;
	margin-bottom: 20px;
}
.audio-category .audio-category-list:nth-child(6n) {
	margin-right: 0;
} 안하면 레이어가 깨진다

nth-child의 활용

.audio-category .audio-category-list:nth-child(6n) {
	margin-right: 0;
}
.audio-category .audio-category-list:nth-child(odd) a{
	background-color: yellow;
	/*홀수*/
}
.audio-category .audio-category-list:nth-child(even) a{
	/*짝수*/
	background-color: pink;
}

https://lalacode.tistory.com/6