#6. 버튼(class)에 효과 주기 - 버튼 장식 및 효과

3. 장식 및 효과

• box-shadow: 박스 그림자
  • box-shadow: 10px 10px 5px gray;
• text-shadow: 텍스트 그림자
  • 오프셋, 흐림 반경, 색상: text-shadow: 2px 2px 5px red;
• background-image: 배경 이미지
  • URL: background-image: url('image.png');
• background-size: 배경 이미지 크기
  • 픽셀, 퍼센트, cover, contain: background-size: cover; 
• background-position: 배경 이미지 위치
  • background-position: center;, background-position: 10px 20px;
• background-repeat: 배경 이미지 반복
  • repeat, no-repeat, repeat-x, repeat-y

4. 애니메이션 및 변환

• transition: 전환 효과
• transform: 변형 (이동, 회전, 확대/축소 등)
• animation: 애니메이션 설정

 

5. 상태에 따른 스타일링 (가상 클래스)

• hover: 마우스를 올렸을 때:active: 클릭했을 때
• focus: 포커스를 가졌을 때
• disabled: 비활성화 되었을 때

 

6. 기타

• cursor: 커서 모양
• opacity: 불투명도
• outline: 외곽선

 

  <style>
        /* 3. 장식 및 효과 */

        /* box-shadow 예제 */
        .box-shadow-example {
            width: 100px;
            height: 100px;
            background-color: lightgray;
            box-shadow: 10px 10px 5px gray;
            margin: 10px;
        }

        /* text-shadow 예제 */
        .text-shadow-example {
            font-size: 24px;
            color: black;
            text-shadow: 2px 2px 5px red;
            margin: 10px;
        }

        /* background-image 예제 */
        .background-image-example {
            width: 200px;
            height: 100px;
            background-image: url('https://via.placeholder.com/200x100');
            background-size: cover; /* cover, contain, px, % */
            background-position: center; /* center, px, % */
            background-repeat: no-repeat; /* repeat, no-repeat, repeat-x, repeat-y */
            margin: 10px;
        }

        /* 4. 애니메이션 및 변환 */

        /* transition 예제 */
        .transition-example {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: background-color 0.5s ease;
            margin: 10px;
        }
        .transition-example:hover {
            background-color: blue;
        }

        /* transform 예제 */
        .transform-example {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            transform: rotate(15deg) scale(1.2);
            margin: 10px;
        }

        /* animation 예제 */
        @keyframes example-animation {
            from {background-color: red;}
            to {background-color: yellow;}
        }
        .animation-example {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: example-animation 2s infinite;
            margin: 10px;
        }

        /* 5. 상태에 따른 스타일링 (가상 클래스) */

        .pseudo-class-example {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin: 10px;
        }
        .pseudo-class-example:hover {
            background-color: coral;
        }
        .pseudo-class-example:active {
            background-color: darkred;
        }
        .pseudo-class-example:focus {
            outline: 2px solid blue;
        }
        .pseudo-class-example:disabled {
            background-color: lightgray;
        }

        /* 6. 기타 */

        /* cursor 예제 */
        .cursor-example {
            width: 100px;
            height: 100px;
            background-color: lightyellow;
            cursor: pointer; /* pointer, default, text, move, etc. */
            margin: 10px;
        }

        /* opacity 예제 */
        .opacity-example {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            opacity: 0.5; /* 0.0 to 1.0 */
            margin: 10px;
        }

        /* outline 예제 */
        .outline-example {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            outline: 2px dashed red; /* width, style, color */
            margin: 10px;
        }
    </style>