방법 - 연락처 칩
CSS로 연락처 칩을 만드는 방법을 알아보세요.
연락처 칩
존 도우
제인 로우
×
연락처 칩 만들기
1단계) HTML 추가:
예시
<div class="chip">
<img src="img_avatar.jpg" alt="Person"
width="96" height="96">
John Doe
</div>
2단계) CSS 추가:
예시
.chip {
display: inline-block;
padding: 0 25px;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1;
}
.chip img {
float: left;
margin: 0 10px 0 -25px;
height: 50px;
width: 50px;
border-radius: 50%;
}
닫을 수 있는 접촉 칩
연락처 칩을 닫거나 숨기려면 "나를 클릭할 때 내 상위 요소를 숨깁니다"라는 onclick 이벤트 속성이 있는 요소를 추가합니다. 이는 컨테이너 div(class="chip")입니다.
예시
<div class="chip">
<img src="img_avatar.jpg" alt="Person"
width="96" height="96">
John Doe
<span class="closebtn"
onclick="this.parentElement.style.display='none'">×</span>
</div>
팁: HTML 엔터티 " ×
"를 사용하여 문자 "x"를 만듭니다.
다음으로 닫기 버튼의 스타일을 지정합니다.
예시
.closebtn {
padding-left: 10px;
color: #888;
font-weight: bold;
float: right;
font-size: 20px;
cursor: pointer;
}
.closebtn:hover
{
color: #000;
}