강사님과 함께하는 커스텀 셀렉트
h2 {
margin: 30px;
}
.cont-select {
position: relative;
width: 200px;
}
.btn-select {
width: 100%;
padding: 13px 20px 13px 14px;
font-size: 12px;
line-height: 14px;
background-color: #fff;
border: 1px solid #C4C4C4;
box-sizing: border-box;
border-radius: 10px;
cursor: pointer;
text-align: left;
background: url('./image/icon-Triangle-down.png') center right 14px no-repeat;
/* 말줄임 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.btn-select:hover {
border: 1px solid #9B51E0;
outline: 3px solid #F8E4FF;
}
.list-member {
display: none;
position: absolute;
width: 100%;
top: 49px;
left: 0;
border: 1px solid #C4C4C4;
box-sizing: border-box;
box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
border-radius: 10px;
}
.btn-select.on {
background: url('./image/icon-Triangle-up.png') center right 14px no-repeat;
}
.btn-select.on + .list-member {
display: block;
}
.list-member li {
height: 40px;
padding: 5px 8px;
box-sizing: border-box;
}
.list-member li button {
width: 100%;
padding: 7px 0;
border: none;
background-color: #fff;
border-radius: 8px;
cursor: pointer;
/* 말줄임 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.list-member li button:hover,
.list-member li button:focus {
background-color: #F8E4FF;
}- 컨텐츠가 길어져서 컨테이너의 크기가 변형되는 것을 방지하기 위해 말줄임을 적용한다.
/* 말줄임 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;- 백그라운드 축약속성은 속성의 순서가 중요 :
url('')b-position-xb-position-y/b-sizeb-repeat
.btn-select.on {
background: url('./image/icon-Triangle-up.png') right center 14px no-repeat;
}right center 14px위의 속성은 모두 background-position을 위한 속성
- 화살표의 위치와 말줄임이 곂치는 것을 대비해서 오른쪽
padding을 충분히 더 적용한다.
padding: 13px 20px 13px 14px;outline으로 네온부분 표현 가능 : 나는 가상요소를 이용했는데 이렇게 편하고 직관적인 속성이 있었다. 앞으로는 이렇게~
.btn-select:hover {
border: 1px solid #9B51E0;
outline: 3px solid #F8E4FF;
}동영상 제어
-
padding-top, padding-bottom 값에 %값은 부모의 width값 기준이다!
-
이를 이용해서 interactive 하면서도 검은 배경을 없앤 유튜브 동영상 스트리밍 구현가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cont-video {
position: relative;
padding-top: 56.25%;
/* padding-top, padding-bottom 속성의 % 값은 부모 요소의 넓이에 비례합니다. */
/* 예를 들어 부모의 넚이가 1200px 이라면 padding-top=50% 의 값은 600px 과 같습니다. */
}
.video-next-level {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<article class="cont-video">
<iframe class="video-next-level"
src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
title="YouTube video player" frameborder="0" allowfullscreen>
</iframe>
</article>
</body>
</html>
start!
화이팅입니다!!