여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. How To - 연락처 칩
How To – 연락처 칩
1개월전 작성
2개월전 수정

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

기본 예시
예제 보기

참고

Mingg`s Diary
밍구
밍구
공부 목적 블로그