css

📌 ::before, ::after

::before와 ::after는 CSS에서 사용되는 가상 요소 선택자입니다. 이 두 가상 요소 선택자는 요소의 내용(content)의 앞(::before) 또는 뒤(::after)에 가상 요소를 생성하여 스타일을 적용할 수 있도록 합니다.

차이점은 다음과 같습니다:

1. 위치

• ::before : 요소의 내용(content)의 앞에 가상 요소를 생성
• ::after : 요소의 내용(content)의 뒤에 가상 요소를 생성합니다.

2. 생성 순서

• ::before : 요소의 내용(content)의 앞에 생성되므로, 생성된 가상 요소는 실제 내용(content) 이전에 오게 됩니다.
• ::after : 요소의 내용(content)의 뒤에 생성되므로, 생성된 가상 요소는 실제 내용(content) 이후에 위치합니다.

3. 스타일 적용 : ::before와 ::after는 생성된 가상 요소에 스타일을 적용할 수 있습니다. 예를 들어, content, position, display, background, border, padding, margin, width, height, color, font-size 등의 CSS 속성을 사용하여 가상 요소의 스타일을 지정할 수 있습니다.

.dropDown_List:first-child {
    /* 첫 번째 요소에 상단만 border-radius 적용 */
    border-radius: 12px 12px 0 0;
    position: relative;
}
.dropDown_List:first-child::after {
    /* 가상요소에 삽입될 콘텐츠 정의 */
    content: "";
    position: absolute;
    top: -10px;
    left: 57%;
    transform: translateX(-50%);
    border-width: 0 10px 10px; /* 삼각형의 크기에 따라 조정합니다 */
    border-style: solid;
    border-color: transparent transparent #000; /* 삼각형의 색상을 설정합니다 */
  }

📌 Position: relative, absolute

1. position: relative:

• 요소를 원래 위치 기준으로 상대적(relative)으로 배치해줌
• relative로 설정된 요소는 다른 요소들과의 상대적인 위치를 기준으로 배치됩니다.
• top, right, bottom, left와 같은 위치 관련 속성을 사용하여 요소를 이동시킬 수 있습니다.
• 자신을 이동시키더라도, 원래 위치가 유지되며 다른 요소들과의 상호작용이 일어날 수 있습니다.

2. position: absolute:

• absolute 포지션은 부묘 요소(가장 가까운 상위 요소) 중에서 position 속성 값이 relative, absolute, fixed, 또는 sticky인 요소를 기준으로 위치를 결정합니다.
• absolute로 설정된 요소는 문서 흐름에서 벗어나고, 다른 요소들과 겹치지 않습니다.
• 주로 요소를 원하는 위치에 자유롭게 배치하고 싶을 때 사용합니다.
  가장 가까운 조상 요소 중에 포지션 값이 relative, absolute, fixed, 또는 sticky인 요소가 없다면, absolute는 문서의 body 요소를 기준으로 위치를 결정합니다.

// 이미지 안에 별 아이콘 넣을때 사용
.product_profile {
    /* 별 아이콘을 이미지 안에 넣어주기 위해 아이콘의 부모요소에 relative 추가 */
    position:relative;
}
.star_icon {
    position: absolute;
    top: 5px;
    right: 5px;
}

📌 Z-index

: 요소의 쌓임 순서를 결정

• z-index 값은 정수 또는 auto로 설정할 수 있으며, 더 큰 값을 가진요소가 더 상위에 쌓이게 됨.
• 예를 들어, 아래 코드에서 box1요소는 box2요소보다 더 위에 쌓이게 됨

.box1 {
  z-index: 2;
}

.box2 {
  z-index: 1;
}

• 솔플 예시 : 이미지안에 별 아이콘을 넣기 위해 product를 relative로 주었더니 드롭다운이 내려올때 이미지가 덮어져서 보여서 부모요소에 z-index를 주어 드롭다운이 잘 표시되도록 해줌

.dropDown_container{
    display: flex;
    flex-direction: column;
    position: absolute;
    /* 햄버거 아래로 맞추기 위한 코드 */
    top: 90%;
    right: 0%;
    background-color: white;
    border-radius: 12px;
    z-index: 2; // 추가
}

.product_profile {
    /* 별 아이콘을 이미지 안에 넣어주기 위해 아이콘의 부모요소에 relative 추가 */
    /* relative: 요소를 기본 문서 흐름에 따라 배치한 다음,
    해당 요소의 위치를 기준으로 자신을 이동시키는것을 의미 */
    position:relative;
}