본문 바로가기
HTML5

21. 02. 01. 07장- 색상과 배경을 위한 스타일

Levinni 2021. 2. 2. 06:48

7-1. 색상 표현

        #RRGGBB

        #RGB

        #000000 ~ #ffffff

 

7-2. 배경과 관련된 속성

              background-color: 배경 색

              background-clip: 배경 적용범위

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        .box {width: 300px; border:5px dotted black; padding: 15px; margin: 15px auto;}
        body {background-color: #09f;}
        .box {background-color: #fff;}

        .clip1 {background-clip: border-box;} /* 기본값 */
        .clip2 {background-clip: padding-box;}
        .clip3 {background-clip: content-box;}
    </style>
</head>
<body>
    <div class="box clip1">
        <h2>여기는 제목 부분입니다.</h2>
        <p>여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.</p>
    </div>    
    <div class="box clip2">
        <h2>여기는 제목 부분입니다.</h2>
        <p>여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.</p>
    </div>    
    <div class="box clip3">
        <h2>여기는 제목 부분입니다.</h2>
        <p>여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.여기는 본문 부분입니다.</p>
    </div>    
</body>
</html>

border-box,(기본값) padding-box, content-box

 

              background-image: 배경 이미지

              backgrouund-size: 배경 크기

              backgrouund-repeat: 배경 반복 no-repeat , x 많이씀

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        /* background image: url(경로) */
        /* body {background-image: url(images/bg1.png); background-repeat: repeat-x;} */
        .box {width: 500px; height: 500px; border: 1px solid black; margin: 10px auto;
        background: url(images/bg4.jpg) no-repeat left top;
        }
        .bg1 {background-size: auto;}
        .bg2 {background-size: 200px 150px;}
        .bg3 {background-size: 60% 40%;} /* 500px의 % */
        .bg4 {background-size: contain;}
        .bg5 {background-size: cover;} /* 많이 씀 */
        .bg6 {background-size: 100% 100%;}
    </style>
</head>
<body>
        <div class="box bg1"></div>
        <div class="box bg2"></div>
        <div class="box bg3"></div>
        <div class="box bg4"></div>
        <div class="box bg5"></div>
        <div class="box bg6"></div>
</body>
</html>

 

 

              background-position: 배경 배치

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        /* background image: url(경로) */
        /* body {background-image: url(images/bg1.png); background-repeat: repeat-x;} */
        .box {width: 500px; height: 500px; border: 1px solid black; margin: 10px auto;
        background: url(images/bg4.jpg) no-repeat left top;
        }
        .bg1 {background-size: auto;}
        .bg2 {background-size: 200px 150px;}
        .bg3 {background-size: 60% 40%;} /* 500px의 % */
        .bg4 {background-size: contain;}
        .bg5 {background-size: cover;} /* 많이 씀 */
        .bg6 {background-size: 100% 100%;}
    </style>
</head>
<body>
        <div class="box bg1"></div>
        <div class="box bg2"></div>
        <div class="box bg3"></div>
        <div class="box bg4"></div>
        <div class="box bg5"></div>
        <div class="box bg6"></div>
</body>
</html>

              background-origin: 배치 기준

              background-attachment: 배경을 붙이는 방법

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        body {
            min-height: 3000px;
            /* background-image: url(images/bg3.jpg);
            background-repeat: no-repeat;
            background-position: center bottom;
            background-attachment: fixed; */
            background: url(images/bg3.jpg) no-repeat center bottom fixed #ff3; /* 축약으로 한번에 */
        }
    </style>
</head>
<body>
    
</body>
</html>

 

 

저작자표시 (새창열림)

'HTML5' 카테고리의 다른 글

21. 02. 02. 09장- CSS 포지셔닝  (0) 2021.02.02
21. 02. 02. 08장- 레이아웃을 위한 스타일  (0) 2021.02.02
21. 02. 01. 06장- 텍스트·문단·목록 관련 스타일,  (0) 2021.02.01
21. 01. 29. 05장- CSS의 기초, 6장. 글꼴 관련 스타일  (0) 2021.02.01
21. 01. 28. 4장. 폼  (0) 2021.01.29

'HTML5' Related Articles

티스토리툴바