[ex12~13] CSS(background)

ex12

            HTML/CSS
            - 케밥 표기법 많이 사용
            - aaa-bbb-cc

            *** CSS의 대부분의 속성은 모든 태그에 적용이 가능하다!!!

            배경
            1. 배경색
                - background-color

            2. 배경 이미지
                - background-image


            CSS 색상 표현법
            1. Color name: red, yellow, blue..
            2. RGB color(HEX): #FF0055
            3. RGB color(DEC): rgb(255,0,128)
            4. RGBA color(DEC): rgba(255,255,255,1)
                                a(alpha channel - 불투명도(0~1))

body {
    /* background-color: yellowgreen; */
    /* background-color: rgb(128, 0, 0); */
    /* background-color: rgba(0, 0, 255, .5); */

    background-image: url(images/cat01.jpg);
    /* background-repeat: repeat-x; 행반복 */
    /* background-repeat: repeat-y; 열반복 */
    background-repeat: no-repeat;

background-position
                수평: left|center|right
                수직: top|center|bottom
                수치(px): 절대위치
                수치(%): 상대위치

background-position: 50% 100px;

/* attachment(기본 scroll) > fixed(스크롤 내려도 고정) */
background-attachment: fixed;

/* background-position: center center; */

            <html>, <body>
            - 블럭 태그
            - 블럭 태그의 영역
                - 너비: 100%
                - 높이: 내용물만큼

ex13
- 검색창 style 설정

/* 검색창에 이미지 넣기 */
#search {
    background-image: url(images/hangame.png);
    background-repeat: no-repeat;
    background-position: center center;
}

/* 검색창 클릭하면 광고 사라짐 */
#search:focus {
    background-image: url();
}

/* 검색창 클릭할때 테두리 사라짐 */
.data {
    outline: none;
}

/* 검색창 클릭했을때 배경색 지정*/
.data:focus {
    background-color: yellow;
}

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

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

        #search:focus {
            background-image: url();
        }

        .data {
            outline: none;
        }

        .data:focus {
            background-color: yellow;
        }

    </style>
</head>
<body>
    <!-- ex13_background.html -->

    <h1>네이버</h1>

    <input type="text" id="search">
    <input type="button" value="검색하기">

    <hr>

    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>
    <input type="text" class="data"><br>

</body>
</html>

'프로그래밍 공부 > HTML&CSS' 카테고리의 다른 글

[ex15~17] CSS(box) (2)	2023.04.14
[ex14] CSS(text) (0)	2023.04.14
[ex11] CSS(Emmet) (1)	2023.04.13
[ex03~10] CSS (Selector) (0)	2023.04.13
[ex01~02] CSS (Style Sheet) (0)	2023.04.13

🚀

[ex12~13] CSS(background)

'프로그래밍 공부 > HTML&CSS' 카테고리의 다른 글

티스토리툴바

[ex12~13] CSS(background)

'프로그래밍 공부 > HTML&CSS' 카테고리의 다른 글

'프로그래밍 공부/HTML&CSS' Related Articles

티스토리툴바