[2021/12/20]국비지원 CSS3 2-(2) Background

background property : 통합 가능하며, 그 순서는 color부터 attachment의 순으로 이뤄짐

background-color : 배경색.
색상은 red blue black과 같은 naming color
또는 rgb, rgba, hsl, hsla과 같은 색상코드로 입력 가능
background-image : 배경에 넣을 이미지
background-repeat : 배경이미지 등을 반복적으로 표현할 것인가, 에 대한 것
- 한번만 하겠다 : no-repeat
- 반복적이어야 한다 : repeat
- x축반복 : repeat-x
- y축 반복 : repeat-y
background-position : 위치값 설정
- default = left top, 0 0
- 50% 50% = center center
- 100% 100% = right bottom
background-attachment : 화면을 기준으로 그 위치에 딱 고정시켜둘 것인지, 스크롤 할 때마다 따라다닐 건지 설정 가능
default = scroll / 고정 = fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>background 예제<title>
    <style type="text/css">
        body{font-family: Dotum, "돋움", sans-serif; 
            line-height: 150%;
            background-color:#ccc; 
            background-image: url(images/smile.jpg);
            background-repeat:no-repeat;
            background-position:right bottom;
            background-attachment:fixed;}
            /* repeat 반복, repeat-x, repeat-y,no-repeat */
            /* position 기준 left top, 0 0 / left top, center center, right bottom*/
            /* attachment 기본값 scroll 화면 기준 고정 fixed */
            /* background:#ccc url(background/images/smile.jpg) no-repeat 100% 100% fixed;*/
        h1{font-size: 20px;}
        h2{font-size: 15px;background-color:#fff}
        p{background: #00ff00 url(images/bg_red.gif) no-repeat -18px -10px; 
            font-size: 12px;
            text-indent: 20px;}
        .first{color: red;}
        .second{color: orange;}
        .third{color: green;}
        .fourth{color: blue}
        .fifth{color: aqua}
        .sixth{color: lime;}
        .seventh{color: purple;}
    </style>
</head>
<body>
    <h1>슬럼프를 탈출하는 7가지 방법</h1>
    <h2 class="first">첫째, 생활 속도를 늦춘다.</h2>
    <p>
        슬럼프가 닥치면 스스로 '슬럼프가 왔구나'라고 판단 하고, 우선 그 원인이 무엇인지를 찬찬히 생각해 본다. 그리고 슬럼프가 회복될 때까지 
        생활의 잔가지를 과감하게 처 버리고 꼭 해야 할 일과 시급한 일을 제외한 사소한 일들은 뒤로 미룬다.
    </p>
    <h2 class="second">둘째, 핸드폰을 꺼 버린다</h2>
    <p>
        슬럼프가 닥치면 스스로 '슬럼프가 왔구나'라고 판단 하고, 우선 그 원인이 무엇인지를 찬찬히 생각해 본다. 
        그리고 슬럼프가 회복될 때까지 생활의 잔가지를 과감하게 처 버리고 꼭 해야 할 일과 시급한 일을 제외한 사소한 일들은 뒤로 미룬다.
    </p>
    <h2 class="third">셋째, 혼자서 서점을 방문하라.</h2>
    <p>
        핸드폰에 너무 익숙해져째있기에 그것을 꺼 버린 상태에선 불안감을 느끼는 사람들도 있다. 
        그러나 슬럼프가 왔을 때 완전히 꺼 버리거나 진동 모드로 돌려 놓아야 한다. 
        그리고 일정 시간 동안 특별한 일이 아니면 연락을 취하지 않는 것이 도움이 된다. 
        아마도 여러분은 자신이 그다지 시급하지 않은 일들로 항상 긴장하면서 생활해 왔는지를 알 수 있게 될 것이다. 
        고요함은 슬럼프를 극복하는 강력한 방법 중의 하나다.
    </p>
    <h2 class="fourth">넷째, 독서로 자신과 대화하라</h2>
    <p>
        색다른 책은 여행관련서, 박물관이나 역사책, 자기 계발서, 정상을 향해 힘겹게 살아온 사람들의 이야기 등이 고려대상이 될 수 있다. 
        일상의 분주함을 우리들로 하여금 정신적이고 심리적인 에너지를 고갈시키는 경향이 있다. 슬럼프가 오면 편안한 시간을 갖고 고갈된 
        에너지를 충전하는 시간을 갖는 것이 좋겠다. 내면 세계를 다듬는 시간, 자신과 대화를 나누는 시간을 가지도록 한다.
    </p>
    <h2 class="fifth">다섯째, 몸을 움직여라.</h2>
    <p>
        그냥 앉아서 기다리는 방법보다는 몸을 적극적으로 움직이는 것이 좋겠다. 바깥에 나가서 빠른 속도로 걸어 보라. 
        조깅을 해 온 사람이라면 그것 하나만으로 슬럼프를 단시간 안에 극복할 수 있을 것이다. 
        놀라운 것은 심신이 매우 밀접하게 연결되어 있음을 확인하게 될 것이다. 
        신체적으로 유쾌해지면 정신적으로나 심리적으로 원기를 회복할 수 있다.
    </p>
    <h2 class="sixth">여섯째, 따뜻한 물로 목욕하라</h2>
    <p>
        운동을 마친 후에 따뜻한 물로 목욕을 할 수도 있고 반신욕을 할 수도 있다. 
        30분에서 1시간 정도면 원기를 상당 부분 회복할 수 있을 것이다.
    </p>
    <h2 class="seventh">일곱째, 자신에게 휴식을 선물하라.</h2>
    <p>
        가장 편안한 자세로, 가장 편안한 의복을 입고 그 동안 열심히 뛰어온 자신에게 잠시나마 휴식을 제공하라. 
        나는 누워서 평소에 접하지 못했던 책을 읽으면서 여행을 떠나겠다. 아주 노곤한 상태에서 떠나는 여행은 잠으로 이어지게 될 것이다. 
        요컨대 슬럼프를 삶의 필수적인 부분으로 인정하고 그것을 즐길 수 있는 경지까지 끌어올려 보라.
        때로는 슬럼프도 빠져볼필요도 있지만 너무 깊게 빠지게 되면 결국 힘들어지는것은 본인 스스로 임을 깨달아야 한다.
    </p>
</body>
</html>

결과물

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바