<step15>'css_background, float'

노력이 좋아서

<step15>'css_background, float'

zoaseo 2022. 4. 8. 15:31

<필기>

css배경 - 배경에 효과를 주는데 사용되는 속성들
1) background-color : 요소의 배경색을 지정
red/ #000000/ rgb(r, g, b)/ rgba(r, b, g, a)
2) background-image : 요소의 배경에 이미지를 지정
ex) bacground-image:url("dog.jpg")
3) background-repeat : 배경 이미지를 가로 및 세로 반복을 지정
no-repeat/ repeat-x/ repeat-y
4) background-position : 배경 이미지의 시작 위치를 지정
top center bottom
left center right
ex) div { background-position: right bottom; }
5) background-attachment : 배경 이미지 스크롤에 첨부할지를 지정
scroll/ fixed
6) background-size : 배경 이미지의 크기
cover
ex) div { background-size: 200px auto; }
background: url('') no-repeat 50px 50px / 200px; /* background-size / background-position ( /써서 구분하자! ) */
7) background-blend-mode : 블렌드 효과 주기

1) display : display: inline-block; 지정하고 요소의 부모요소에 font-size: 0 지정
2) float : 요소가 왼쪽, 오른쪽으로 떠있도록 지정
속성값: left/ right
clear : 요소의 왼쪽, 오른쪽에 부동 요소를 허용하지 않도록 지정
속성값: left/ right/ both
※float을 쓸 때는 clear를 같이 써준다!

※float으로 띄우고 난 뒤 남은 공간 clear 해주기!!

3) flexbox
4) gridbox

1) background_image.html

<!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>
        body {
            height: 3000px;
        }
        #box1 {
            width: 1000px;
            height: 700px;
            /* background-image: url("./images/dog.jpg");
            background-repeat: no-repeat;
            background-color: aquamarine;
            background-position: center center; */
            background: url("images/dog.jpg") 100px 50px/*왼쪽으로부터 100px 위쪽으로부터 50px*/ no-repeat aquamarine; /* 한번에 쓰기 */
            /*background-attachment: fixed; /* scroll - default값 */
            background-size: contain;
        }
        #box2 {
            width: 1000px;
            height: 700px;
            /* background-image: url("./images/dog.jpg");
            background-repeat: no-repeat;
            background-color: aquamarine;
            background-position: center center; */
            background: url("images/dog.jpg") 100px 50px /*왼쪽으로부터 100px 위쪽으로부터 50px*/ no-repeat aquamarine; /* 한번에 쓰기 */
            /*background-attachment: fixed; /* scroll - default값 */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</body>
</html>

2) float_test.html

<!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>
        * { margin: 0; padding: 0; box-sizing: border-box;}
        #container {
            background: pink;
            width: 1000px;
            margin: 0 auto;
        }
        .item {
            background: tomato;
            width: 200px;
            height: 200px;
            border: 3px solid #333;
            float: left;
        }
        /* #clear {
            float: none;
            clear: left;
        } */
        #container2 {
            width: 1000px;
            height: 400px;
            background: blue;
        }
        #container p {
            clear: left;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="item">box1</div>
        <div class="item">box2</div>
        <div class="item">box3</div>
        <div class="item" id="clear">box4</div>
        <p></p>
    </div>
    <div id="container2">
        <p>div입니다.</p>
        <p>div입니다.</p>
        <p>div입니다.</p>
        <p>div입니다.</p>
        <p>div입니다.</p>
        <p>div입니다.</p>
        <p>div입니다.</p>
        <p>div입니다.</p>
        <p>div입니다.</p>
        <p>div입니다.</p>
    </div>
</body>
</html>

3) float.html

<!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>
        * { margin: 0; padding: 0; box-sizing: border-box; vertical-align: middle;}
        a { text-decoration: none; color: inherit;}
        body {
            font-size:  14px;
            line-height: 1.5; /* 줄의 높이 */
            color: #2d2d2d;
        }
        li { list-style: none;} /* 리스트앞에 ●표시 없애기 */
        #wrap {
            width: 100%;
            max-width: 2000px; /* 최대 크기 지정 */
            margin: 0 auto;  /* 중앙배치 */
            /* background: lightcyan; */
        }
        #header {
            height: 100px;
            /* background: pink; */
            padding-top: 30px;
          
        }
        #header h1 {
            font-size: 32px;
            line-height: 40px;
            float: left;
        }
        #header ul {
            float: right;
        }
        #header li {
            font-size: 18px;
            text-align: center;
            float: left;
            width: 150px;
            line-height: 18px;
        }
        .clearboth /* ※float으로 띄우고 난 뒤 남은 공간 clear 해주기!!! */
        {
            clear: both;
        }
        #header li:not(:last-child) {
            border-right: 1px solid;
        } 
        #main h2 { 
            padding-top: 30px;
            text-align: center;
            padding-bottom: 30px;
            border-bottom: 1px solid #333; /* 테두리 주기 */
            margin-bottom: 30px;
        }
        #content li { 
            border: 1px solid #ccc;
            text-align: center; 
            font-size: 18px;
            float: left;
            padding: 30px 100px;
            width: 30%;
        }
        #content li:not(:last-child) {
            margin-right: 5%;
        }
        #notice li {
            border-bottom: 1px solid #ccc;
            line-height: 40px;
            font-size: 16px;
            padding: 10px;
        }
        #footer {
            padding-top: 30px;
        }
        #footer p {
            font-size: 16px;
            float: left;
        }
        #footer h1 {
            font-size: 32px;
            text-align: right;
            float: right;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1><a href="#">Green</a></h1>
            <ul>
                <li><a href="#">menu1</a></li>
                <li><a href="#">menu2</a></li>
                <li><a href="#">menu3</a></li>
                <li><a href="#">menu4</a></li>
            </ul>
            <p class="clearboth"></p>
        </div>
        <div id="main">
            <div id="content">
                <h2>메인 컨텐츠01</h2>
                <ul>
                    <li>
                        <h3>작은제목 입니다.</h3>
                        <p>내용적는 부분입니다.</p>
                        <span>2020.12.17</span>
                    </li>
                    <li>
                        <h3>작은제목 입니다.</h3>
                        <p>내용적는 부분입니다.</p>
                        <span>2020.12.17</span>
                    </li>
                    <li>
                        <h3>작은제목 입니다.</h3>
                        <p>내용적는 부분입니다.</p>
                        <span>2020.12.17</span>
                    </li>
                </ul>
                <p class="clearboth"></p>
            </div>
            <div id="notice">
                <h2>공지사항</h2>
                <ul>
                    <li>그린 컴퓨터 아카데미 소식<span>2020.12.17</span></li>
                    <li>코로나 바이러스 예방법<span>2020.12.17</span></li>
                    <li>그린 컴퓨터 아카데미 소식<span>2020.12.17</span></li>
                    <li>코로나 바이러스 예방법<span>2020.12.17</span></li>
                </ul>
            </div>
        </div>
        <div id="footer">
            <p>주소 : 서울특별시 용산구 한강대로 대표이사: 그린 사업자 등록번호 : 110-12-12345 통신판매 신고: 제 2020-서울용산-000호</p>
            <h1>Green</h1>
            <p class="clearboth"></p>
        </div>
    </div>
</body>
</html>