[CSS] background-color, background-image, :focus

WEB/CSS

[CSS] background-color, background-image, :focus

developer of the night sky 2023. 9. 25. 22:16

background-color와 background-image는 CSS에서 요소의 배경을 스타일링하는 속성들이다.

🔻1. background-color🔻

요소의 배경 색상을 지정한다.
CSS 색상 표현법
- 1. Color Name : red, yellow, bule
- 2. RGB Color(16진수) : #FFFFFF
- 3. RGB Color(10진수) : rgb(255,255,255)
- 4. RGBA Color(10진수) : rgba(255,255,255,1)
- a : alpha channel의 약자,(0~1 사이의) 불투명도를 의미한다. 0으로 갈 수록 투명

 <style>
        body {
            /* background-color: aqua; */
            /* background-color: #FF0000; */
            /* background-color: rgb(0,255,255); */
            background-color: rgb(0,255,255, 0.1);
        }
 </style>

🔻2. background-image🔻

background 속성과 함께 사용되어 요소의 배경을 스타일링하는 데에 사용되는 속성들

1) background-image

요소의 배경에 이미지를 삽입한다.
값으로는 이미지 경로를 사용한다.

    <style>
        body {
            background-image: url(../asset/images/dog01.jpg);
        }
    </style>

2) background-repeate

배경 이미지가 요소 내에서 반복되는 방법을 설정한다.
repeat: 가로와 세로로 이미지가 반복된다 (기본값)
repeat-x: 가로로만 이미지가 반복된다.
repeat-y: 세로로만 이미지가 반복된다.
no-repeat: 이미지가 반복되지 않는다.

    <style>
        body {
            background-image: url(../asset/images/dog01.jpg);
            background-repeat: repeat-x;
        }
    </style>

3) background-position

배경 이미지의 위치를 설정한다.
왼쪽 상단 끝이 0,0 위치이다.
단위 생략이 안된다.
값으로는 키워드, 픽셀, 백분율 등을 사용할 수 있다.
- 키워드: top, bottom, left, right, center 등
- 픽셀: 20px 30px과 같이 가로와 세로의 위치를 지정한다.
- 백분율: 50% 50%과 같이 가로와 세로의 위치를 백분율로 지정한다.

    <style>
        body {
            background-color: beige;
            background-image: url(../asset/images/dog01.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>

4) background-attachment

배경 이미지가 스크롤될 때 어떻게 동작할지 설정힌다.
이 속성은 다음 값들 중 하나를 가질 수 있다:
- scroll: 배경 이미지는 요소와 함께 스크롤된다. (기본값)
- fixed: 배경 이미지는 고정되어 스크롤되지 않는다.

    <style>
        body {
            background-color: beige;
            background-image: url(../asset/images/dog01.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
        }
    </style>

🔻3. focus🔻

:focus
포커스를 받거나 마우스 커서가 요소 위에 있을 때 스타일을 적용하는 가상 클래스이다.
즉, 객체가 활성화된 상태를 말한다.
:focus 가상 클래스는 요소가 포커스를 받았을 때 스타일을 적용한다.
일반적으로 입력 요소(input, textarea 등)나 링크(<a>) 등에 사용되어, 키보드 또는 탭 키를 사용하여 요소에 포커스를 주었을 때 스타일을 변경하거나 강조할 때 사용한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #search {
            background-image: url(../asset/images/hangame.png);
            background-repeat: no-repeat;
            background-position: center center;
        }

        #search:focus {
            /* url() > 빈칸으로 두면 이미지가 사라진다 */
            background-image: url();
        }

    </style>

</head>
<body>
    <h1>한게임</h1>

    <div>
        <input type="text" id="search">
    </div>

</body>
</html>

입력필드가 활성화되면 이미지가 사라지고 비활성화되면 다시 나타난다.

저작자표시 (새창열림)