w3.css
연락처 칩
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%; }
기본 예시
예제 보기닫을 수 있는 연락처 칩
연락처 칩을 닫거나 숨기려면 “when you click you on me, hide my parent element”라는 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; }
기본 예시
예제 보기참고
W3C School - How TO - Contact Chips