코딩하는 김딸기
INCREDIBLE_CASTS예제 / 툴팁 응용 본문
.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;: 테두리를 실선으로 설정합니다.