[작성자:] admin

팝업 외 영역 클릭시 닫기

HTML

<a href="javascript:;" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 공유하기 클릭</a>
<div class="share-pop">
     <div class="inner">팝업내용</div>
</div>

CSS

.share-pop {
     display: none;
     width: 200px;
     height: 200px;
     background: tomato;
}
.share-pop .inner {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     color: #fff;
}

JS

$(".share").click(function () {
     $(".share-pop").stop().fadeToggle(500);
     return false; //중요
});
//공유하기 팝업 외에 영역 클릭
$(document).click(function (e) {
     //문서 body를 클릭했을때
     if (e.target.className == "share-pop") {
          return false;
     } //내가 클릭한 요소(target)를 기준으로 상위요소에 .share-pop이 없으면 (갯수가 0이라면)
     $(".share-pop").stop().fadeOut(500);
});

See the Pen 다른영역 클릭시 팝업 닫기 by Juyeon (@Juyeon) on CodePen.

HTML

<div id="load">
     <span class="loader"></span>
</div>

CSS

#load {position: fixed;left:0;top:0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);z-index: 9999;display: flex;align-items:center;justify-content:center}
.loader {
     width: 48px;
     height: 48px;
     border: 5px dotted #fff;
     border-radius: 50%;
     display: inline-block;
     position: relative;
     box-sizing: border-box;
     animation: rotation 2s linear infinite;
}

@keyframes rotation {
     0% {
          transform: rotate(0deg);
     }
     100% {
          transform: rotate(360deg);
     }
}

JS

$(document).ready(function () {
     $("#load").fadeOut(500);
});

결과

See the Pen loader by Juyeon (@Juyeon) on CodePen.

aos-data-delay 순차적으로 실행하기

HTML

<div class="grid">
  <div class="grid-item" data-aos="fade-up">Item 1</div>
  <div class="grid-item" data-aos="fade-up">Item 2</div>
  <div class="grid-item" data-aos="fade-up">Item 3</div>
  <div class="grid-item" data-aos="fade-up">Item 4</div>
  <div class="grid-item" data-aos="fade-up">Item 5</div>
  <div class="grid-item" data-aos="fade-up">Item 6</div>
  <div class="grid-item" data-aos="fade-up">Item 7</div>
  <div class="grid-item" data-aos="fade-up">Item 8</div>
</div>

CSS

.grid {display: flex; flex-wrap: wrap; margin: 0 -5px; overflow: hidden;}
.grid-item {width: calc(25% - 10px);margin: 0 5px;margin-top: 10px; height: 200px;background: #f8f8f8}

JS

$(document).ready(function () {
  const $gridItems = $(".grid-item");
  let delay = 0; // 초기 delay 값
  const delayIncrement = 100; // delay 증가 값 (밀리초 단위)

  $gridItems.each(function () {
    $(this).attr("data-aos-delay", delay);
    delay += delayIncrement; // delay 값을 증가시킴
  });
});

결과보기

See the Pen aos-data-delay 순차적으로 by Juyeon (@Juyeon) on CodePen.

CSS 형제 선택자

CSS에서 특정 요소의 형제 요소를 선택하는 방법을 알고 있으면, 스타일을 더욱 정교하게 조정할 수 있습니다. 이번 글에서는 CSS의 형제 선택자에 대해 자세히 알아보고, 실용적인 예제도 함께 살펴보겠습니다.

1. 형제 선택자란?

HTML 문서에서 같은 부모 요소를 가진 요소들을 “형제 요소”라고 합니다. CSS에서는 이러한 형제 요소를 선택할 수 있는 두 가지 형제 선택자가 있습니다.

  1. 인접 형제 선택자 (+): 바로 다음에 오는 형제 요소를 선택합니다.
  2. 일반 형제 선택자 (~): 특정 요소 다음에 위치하는 모든 형제 요소를 선택합니다.

2. 인접 형제 선택자 (+)

+ 선택자는 특정 요소 바로 뒤에 오는 형제 요소 하나만 선택합니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인접 형제 선택자 예제</title>
    <style>
        h1 + p {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>제목입니다</h1>
    <p>이 문장은 파란색으로 표시됩니다.</p>
    <p>이 문장은 스타일이 적용되지 않습니다.</p>
</body>
</html>

설명

  • h1 + p 선택자는 <h1> 바로 다음에 오는 <p> 요소 하나만 선택하여 스타일을 적용합니다.
  • 두 번째 <p> 요소는 스타일이 적용되지 않습니다.

3. 일반 형제 선택자 (~)

~ 선택자는 특정 요소 다음에 위치하는 모든 형제 요소를 선택합니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>일반 형제 선택자 예제</title>
    <style>
        h1 ~ p {
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>제목입니다</h1>
    <p>이 문장은 빨간색으로 표시됩니다.</p>
    <p>이 문장도 빨간색으로 표시됩니다.</p>
</body>
</html>

설명

  • h1 ~ p 선택자는 <h1> 다음에 나오는 모든 <p> 요소에 스타일을 적용합니다.
  • 따라서 모든 <p> 요소가 빨간색이 됩니다.

4. 인접 형제 선택자와 일반 형제 선택자의 차이점

선택자적용 범위
+ (인접 형제 선택자)특정 요소 바로 다음 형제 하나만 선택
~ (일반 형제 선택자)특정 요소 다음에 나오는 모든 형제 요소 선택

5. 인접 형제 선택자와 리스트 (ul li)

li + li를 사용하면 모든 <li>가 선택되는 것처럼 보일 수 있지만, 사실 각 <li> 바로 뒤에 오는 <li>만 선택됩니다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인접 형제 선택자 테스트</title>
    <style>
        li + li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>첫 번째 항목</li>
        <li>두 번째 항목 (빨간색)</li>
        <li>세 번째 항목 (빨간색)</li>
        <li>네 번째 항목 (빨간색)</li>
    </ul>
</body>
</html>

설명

  • li + li 선택자는 각 <li> 바로 뒤에 있는 <li> 하나만 선택합니다.
  • 첫 번째 <li>는 선택되지 않지만, 그 뒤에 오는 두 번째, 세 번째, 네 번째 <li>는 각각 앞의 <li>의 바로 뒤이므로 선택됩니다.

만약 모든 <li>를 한꺼번에 선택하고 싶다면 ul li 또는 일반 형제 선택자(~)를 사용할 수도 있습니다.

ul li {
    color: red;
}

이렇게 하면 모든 <li>가 빨간색이 됩니다. 😊

6. 실용적인 활용 예제

메뉴 항목 디자인

형제 선택자를 이용하여 특정 메뉴 항목이 활성화되었을 때, 다음 메뉴 항목에 스타일을 적용할 수 있습니다.

.menu-item.active + .menu-item {
    background-color: yellow;
}

마우스 호버 효과

마우스를 특정 요소에 올렸을 때, 그 다음 형제 요소에 효과를 줄 수 있습니다.

div:hover + p {
    color: green;
    font-weight: bold;
}

7. 마무리

CSS 형제 선택자는 특정 요소의 바로 뒤에 오는 형제 요소(+)와 모든 형제 요소(~)를 선택하는 강력한 기능을 제공합니다. 이를 활용하면 보다 유연한 스타일링이 가능하니, 다양한 상황에서 적극 활용해 보세요!

CSS :has() 가상 선택자

CSS에서 :has() 선택자는 부모 요소가 특정 자식 요소를 포함하고 있는지를 확인할 때 유용한 가상 선택자입니다. 이를 활용하면 기존 CSS만으로는 어렵던 스타일링을 보다 쉽게 적용할 수 있습니다. 이번 글에서는 :has() 선택자의 개념과 활용법을 자세히 알아보겠습니다.

1. :has() 가상 선택자란?

:has() 선택자는 특정 요소가 특정 자식 요소를 포함하고 있는지 확인하여 스타일을 적용할 수 있도록 합니다. 보통 CSS는 부모 요소가 자식 요소를 선택하는 방식으로 동작하지만, :has()를 사용하면 반대로 자식을 기준으로 부모 요소를 선택하는 것이 가능합니다.

:has() 기본 문법

selector:has(child-selector) {
  property: value;
}

예제

div:has(p) {
  border: 2px solid blue;
}

위 코드에서는 p 요소를 포함한 모든 div 요소에 파란색 테두리가 적용됩니다.

2. :has()의 주요 기능

  1. 부모 요소 스타일 변경: 특정 자식 요소를 포함하는 부모에게 스타일을 적용할 수 있습니다.
  2. 동적 스타일링 가능: 특정 요소가 존재할 때와 존재하지 않을 때의 스타일을 구분할 수 있습니다.
  3. 자바스크립트 없이 인터랙티브한 디자인 가능: 기존 CSS만으로도 UI를 동적으로 스타일링할 수 있습니다.

3. :has() 활용 예제

(1) 특정 자식을 포함하는 부모 요소 스타일링

article:has(img) {
  background-color: #f4f4f4;
  padding: 20px;
}
  • img 요소를 포함한 article 요소에 배경색과 패딩을 적용합니다.

(2) 특정 자식 요소가 있을 때만 부모 요소 강조

.card:has(.featured) {
  border: 3px solid red;
}
  • .featured 클래스를 포함하는 .card 요소에 빨간색 테두리를 적용합니다.

(3) 폼 검증 스타일 적용

form:has(input:invalid) {
  border: 2px solid red;
}
  • 유효하지 않은 input 필드를 포함한 form 요소에 빨간색 테두리를 적용합니다.

(4) 네비게이션 메뉴에서 활성 링크가 있는 경우 스타일 변경

nav:has(a.active) {
  background-color: #333;
}
  • a.active 클래스를 포함한 nav 요소에 배경색을 변경하여 강조합니다.

(5) 체크박스가 선택되었을 때 관련 컨테이너 스타일 변경

div:has(input[type="checkbox"]:checked) {
  background-color: lightgreen;
}
  • input[type="checkbox"]가 체크된 경우 해당 div의 배경색을 연두색으로 변경합니다.

See the Pen Untitled by Juyeon (@Juyeon) on CodePen.

4. :has() 사용 시 주의할 점

  1. 브라우저 호환성
    • :has()는 최신 브라우저에서만 지원되므로, 구형 브라우저에서는 사용할 수 없습니다. Can I use에서 지원 여부를 확인하세요.
  2. 성능 고려
    • :has()는 강력하지만 성능 비용이 높을 수 있습니다. 특히 많은 요소를 검사해야 하는 경우 주의가 필요합니다.

5. 마무리

:has() 선택자는 부모 요소를 동적으로 스타일링할 수 있도록 해주는 강력한 기능입니다. 기존 CSS만으로 해결하기 어려웠던 스타일링을 보다 쉽게 구현할 수 있으며, 자바스크립트를 사용하지 않고도 반응형 디자인을 적용할 수 있습니다.

이제 :has()를 활용하여 더욱 유연하고 직관적인 스타일링을 적용해 보세요!