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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기