카테고리 없음

INCREDIBLE_CASTS예제 / 툴팁 응용

김딸기* 2024. 8. 24. 17:06


.casts{
  display: flex;
}

.casts-icon{
  border-radius: 50%;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 4px solid #111;
  margin-right: -20px;
  position: relative;
}

.casts-icon img{  border-radius: 50%;
}

.casts-icon figcaption{
  background-color: dodgerblue;
  position: absolute;
  left: 50%;
  top: 0;
  white-space: nowrap;
}

이 CSS 코드는 .casts 클래스와 그 안에 있는 .casts-icon 요소 및 그 내부의 이미지와 캡션(figcaption)에 대한 스타일을 정의합니다. 각 부분을 해석해 보겠습니다.

.casts

  • display: flex;:
    • .casts 요소는 자식 요소들을 수평으로 배치하는 플렉스 컨테이너로 설정됩니다. 자식 요소들은 .casts 내에서 플렉스 아이템으로 동작합니다.

.casts-icon

  • border-radius: 50%;:
    • 이 속성은 요소를 원형으로 만듭니다. 이미지가 원형으로 표시됩니다.
  • width: 64px; height: 64px;:
    • 요소의 너비와 높이를 각각 64픽셀로 설정합니다. 요소의 크기는 정사각형이 됩니다.
  • flex-shrink: 0;:
    • 이 속성은 플렉스 컨테이너 내에서 요소가 줄어들지 않도록 방지합니다. 즉, 다른 플렉스 아이템들에 의해 크기가 줄어들지 않습니다.
  • border: 4px solid #111;:
    • 요소에 4픽셀 두께의 검정색(#111) 테두리를 추가합니다.
  • margin-right: -20px;:
    • 요소의 오른쪽 마진을 -20픽셀로 설정하여, 다음 요소와의 간격이 겹치게 만듭니다. 이로 인해 원형 아이콘들이 약간 겹쳐서 표시됩니다.
  • position: relative;:
    • 요소를 relative로 위치 지정하여, 이후에 자식 요소의 위치를 상대적으로 조정할 수 있도록 합니다.

.casts-icon img

  • border-radius: 50%;:
    • 이미지 요소도 원형으로 만들어, 부모 요소의 테두리에 맞게 이미지를 둥글게 표시합니다.

.casts-icon figcaption

  • background-color: dodgerblue;:
    • figcaption 요소의 배경색을 dodgerblue(선명한 파란색)로 설정합니다.
  • position: absolute;:
    • figcaption 요소를 부모 요소(.casts-icon)를 기준으로 절대 위치시킵니다. relative로 설정된 부모 요소를 기준으로 위치가 결정됩니다.
  • left: 50%;:
    • 부모 요소의 왼쪽 경계선으로부터 figcaption 요소의 왼쪽 경계선까지 50% 이동합니다. 이로 인해 figcaption이 부모 요소의 가운데에 위치하게 됩니다.
  • top: 0;:
    • 부모 요소의 위쪽 경계선에 figcaption을 맞춥니다.
  • white-space: nowrap;:
    • 텍스트가 줄바꿈되지 않도록 설정합니다. figcaption의 내용이 한 줄로 표시됩니다.

요약

  • .casts: 플렉스 컨테이너로서 자식 요소들을 수평으로 배치합니다.
  • .casts-icon: 원형 아이콘을 만들고, 각 아이콘이 약간 겹쳐지게 배치합니다.
  • .casts-icon img: 이미지가 원형으로 표시됩니다.
  • .casts-icon figcaption: 부모 요소의 중앙 위쪽에 배치되며, 배경색이 파란색이고 텍스트는 줄바꿈 없이 한 줄로 표시됩니다.

이 스타일은 원형 아이콘들이 겹쳐서 배치되고, 각 아이콘 위에 작은 설명 텍스트(캡션)가 표시되는 레이아웃을 구현합니다.

.casts-icon figcaption{
  background-color: dodgerblue;
  position: absolute;

  /*왼쪽 좌표를 컨테이닝 블록 너비 기준으로 이동
  하지만 해당 요소의 왼쪽 상단 쪽지점 기준이니 불편함*/
  left: 50%;
  top: 0;
  white-space: nowrap;/*무조건 툴팁이 한줄로 나오도록 설정*/

  /*자기자신의 너비의 절반을 translateX이동 개념으로 취함
  자기자신의 크기기준이라 매우 유용*/
  transform: translateX(-50%);
}

이 CSS 코드 블록은 .casts-icon figcaption 요소의 스타일을 정의합니다. 주요 속성과 그 역할은 다음과 같습니다:

속성 설명

  • background-color: dodgerblue;:
    • figcaption 요소의 배경색을 dodgerblue로 설정합니다. 즉, 배경색이 선명한 파란색이 됩니다.
  • position: absolute;:
    • figcaption 요소를 부모 요소(.casts-icon)를 기준으로 절대 위치로 배치합니다. 부모 요소에 대해 위치를 정확하게 설정할 수 있습니다.
  • left: 50%;:
    • 부모 요소의 너비를 기준으로 figcaption 요소의 왼쪽 경계가 부모 요소의 50% 위치에 오도록 합니다. 즉, 요소의 왼쪽이 부모 요소의 중앙에 맞춰지게 됩니다.
  • top: 0;:
    • 부모 요소의 상단에 figcaption 요소의 상단을 맞춥니다. 즉, figcaption의 상단이 부모 요소의 상단과 일치하게 됩니다.
  • white-space: nowrap;:
    • figcaption 요소 내의 텍스트가 줄바꿈되지 않도록 설정합니다. 텍스트가 한 줄로 계속 표시됩니다.
  • transform: translateX(-50%);:
    • figcaption 요소를 자신의 너비의 절반만큼 왼쪽으로 이동시킵니다. 이 속성은 left: 50%로 인해 요소의 왼쪽 경계가 부모 요소의 중앙에 위치하도록 한 것을 보정하여, 요소의 중심이 정확히 부모 요소의 중앙에 오도록 합니다.

요약

  • 위치: figcaption은 부모 요소의 상단 중앙에 위치하며, 자신의 너비의 절반만큼 왼쪽으로 이동하여 정확히 중앙에 배치됩니다.
  • 텍스트 처리: 요소 내부의 텍스트는 줄바꿈 없이 한 줄로 표시됩니다.
  • 배경색: 요소의 배경색은 dodgerblue로 설정됩니다.

 

 

<div class="l_wrapper">
      <div class="casts">
        <figure class="casts-icon">
          <img src="images\member01.png">
          <figcaption>밥파</figcaption>
        </figure>

        <figure class="casts-icon">
          <img src="images\member02.png">
          <figcaption>대쉬파</figcaption>
        </figure>

        <figure class="casts-icon">
          <img src="images\member03.png">
          <figcaption>밥파1</figcaption>
        </figure>

        <figure class="casts-icon">
          <img src="images\member04.png">
          <figcaption>밥파2</figcaption>
        </figure>

      </div>
    </div>

1. CSS Reset

/* Reset 기본값을 초기화함*/
body {
  margin: unset;
}

img{
  max-width: 100%;
  vertical-align: top;
}
figure{
  margin: unset;
}

설명

  • body { margin: unset; }: 기본 여백을 제거하여 모든 브라우저에서 일정한 스타일을 유지하도록 합니다.
  • img { max-width: 100%; vertical-align: top; }: 이미지의 최대 너비를 부모 요소의 100%로 설정하고, 이미지의 수직 정렬을 상단으로 맞춥니다.
  • figure { margin: unset; }: figure 요소의 기본 여백을 제거합니다.

2. CSS Variables

/* CSS Variables */
:root {
  --color-green: #8FBC8F;
  --color-red: #FF2E00;
  --color-white: #fff;
  --color-gray-50: #999;
  --color-gray-80: #222;
  --color-gray-90: rgb( var(--color-gray-90-rgb) / 1 );
  --color-gray-90-rgb: 17 17 17; /* #111 */
  --color-black: #000;
}
  • :root: 문서의 루트 요소(일반적으로 <html>)에 CSS 변수를 정의합니다. 이를 통해 전역적으로 색상 등의 값을 재사용할 수 있습니다.
  • --color-*: 다양한 색상 변수들을 정의하여 스타일에 일관성을 유지하고, 나중에 쉽게 변경할 수 있도록 합니다.

3. 기본 스타일


/* Component */
body {
  background-color: var(--color-gray-90);
  color: var(--color-green);
  text-align: center;
}

.l_wrapper {
  margin: 100px auto;
  max-width: 240px;
}
  • body:
    • background-color: var(--color-gray-90);: 배경색을 --color-gray-90 변수로 설정합니다.
    • color: var(--color-green);: 텍스트 색상을 --color-green 변수로 설정합니다.
    • text-align: center;: 텍스트를 중앙 정렬합니다.
  • .l_wrapper:
    • margin: 100px auto;: 수직으로 100픽셀 여백을 주고, 수평으로 중앙에 배치합니다.
    • max-width: 240px;: 요소의 최대 너비를 240픽셀로 설정합니다.

4. .casts 컴포넌트/ casts-icon


.casts{
  display: flex;
}

.casts-icon{
  border-radius: 50%;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 4px solid #111;
  margin-right: -20px;
  position: relative;
}
.casts-icon img{  border-radius: 50%;}
  • display: flex;: .casts 요소를 플렉스 컨테이너로 설정하여 자식 요소들이 수평으로 배치되도록 합니다.
  • .casts-icon:
    • border-radius: 50%;: 원형 요소로 만듭니다.
    • width: 64px; height: 64px;: 너비와 높이를 각각 64픽셀로 설정합니다.
    • flex-shrink: 0;: 플렉스 컨테이너 내에서 크기가 줄어들지 않도록 합니다.
    • border: 4px solid #111;: 4픽셀 두께의 검정색 테두리를 추가합니다.
    • margin-right: -20px;: 다음 요소와의 간격을 겹치게 만듭니다.
    • position: relative;: 자식 요소의 절대 위치를 기준으로 설정합니다.
  • .casts-icon img:
    • border-radius: 50%;: 이미지도 원형으로 만듭니다.

6. .casts-icon figcaption


.casts-icon figcaption{
  background-color: dodgerblue;
  position: absolute;

  /*왼쪽 좌표를 컨테이닝 블록 너비 기준으로 이동
  하지만 해당 요소의 왼쪽 상단 쪽지점 기준이니 불편함*/
  left: 50%;
  top: 0;
  white-space: nowrap;/*무조건 툴팁이 한줄로 나오도록 설정*/

  /*자기자신의 너비의 절반을 translateX이동 개념으로 취함
  자기자신의 크기기준이라 매우 유용*/
  transform: translateX(-50%) translateY(0);

  transition: all .4s;
  opacity: 0.4;
}
  • background-color: #ddd;: 배경색을 연한 회색으로 설정합니다.
  • color: black;: 텍스트 색상을 검정색으로 설정합니다.
  • font-size: 10px;: 폰트 크기를 10픽셀로 설정합니다.
  • padding: 0 6px;: 좌우 여백을 6픽셀로 설정합니다.
  • border-radius: 12px;: 모서리를 둥글게 만듭니다.
  • position: absolute;: 부모 요소를 기준으로 절대 위치로 배치합니다.
  • left: 50%; top: 0;: 부모 요소의 중앙에 위치시키고, 상단에 맞춥니다.
  • white-space: nowrap;: 텍스트 줄바꿈을 방지하여 한 줄로 표시합니다.
  • transform: translateX(-50%) translateY(-100%);: 요소의 중앙을 기준으로 수평으로 왼쪽으로 이동하고, 상단을 기준으로 위로 이동시킵니다.
  • transition: all .4s;: 모든 스타일 속성에 대해 0.4초 동안 부드럽게 전환되도록 설정합니다.
  • opacity: 0;: 기본적으로 투명하게 설정합니다.
  • pointer-events: none;: 마우스 클릭 등의 포인터 이벤트를 무시합니다.

7. .casts-icon:hover/ .casts-icon:hover figcaption

.casts-icon:hover {
  z-index: 10;
}

.casts-icon:hover figcaption {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
  • z-index: 10;: 요소의 쌓임 순서를 변경하여, 마우스를 올렸을 때 다른 요소들보다 위에 위치하도록 설정합니다.
  • opacity: 1;: 호버 상태에서 figcaption 요소를 완전히 불투명하게 만듭니다.
  • transform: translateX(-50%) translateY(0);: figcaption 요소를 부모 요소의 중앙에 맞추고, 상단으로 이동하여 보이도록 합니다.

9. .casts-icon figcaption::after

.casts-icon figcaption::after {
  content: ' ';
  position: absolute;

  /* 좌우로 가용 공간을 최대치로 늘림 */
  left: 0;
  right: 0;

  /* 아랫쪽 기준으로 배치 */
  bottom: 0;

  /* 만들어진 툴팁 꼬랑지가 밑으로 표시될 수 있게끔 구현 */
  margin: 0 auto -8px;
 
  /* border로만 모양이 만들어지게 트릭을 씀 */
  width: 0;
  height: 0;

  /* 보더를 툴팁의 꼬랑지 컨셉으로 만듦 */
  border-width: 4px;
  border-color: #ddd transparent transparent transparent;
  border-style: solid;
}
  • content: ' ';: 가상 요소에 빈 문자열을 설정하여 콘텐츠를 생성합니다.
  • position: absolute;: 부모 요소를 기준으로 절대 위치로 배치합니다.
  • left: 0; right: 0; bottom: 0;: 요소를 부모 요소의 하단에 맞춥니다.
  • margin: 0 auto -8px;: 가로 중앙에 위치시키고, 아래쪽으로 8픽셀 이동시킵니다.
  • width: 0; height: 0;: 가로와 세로 크기를 0으로 설정하여 삼각형 모양을 만듭니다.
  • border-width: 4px;: 테두리 두께를 4픽셀로 설정합니다.
  • border-color: #ddd transparent transparent transparent;: 위쪽 테두리만 보이게 하여 삼각형 모양을 만듭니다.
  • border-style: solid;: 테두리를 실선으로 설정합니다.