색상 표현법


종류

설명 

16진수 표기법 #색상값

16진수에 해당하는 색상값으로 색상을 표현합니다.   

16진수 표기법 0x색상값

설명은 위와같지만 0x로 표기합니다. 

rgb

(R)ed(G)reen(B)lue의 약어로 말그대로 red값, green값, blue값을 입력하면 됩니다.

rgba

위와같지만 뒤에 불투명도값을 0~1까지 쓰시면 됩니다. 

hsl

(H)ue(색조)(S)aturation(채도)(L)ightness(밝기)를 나타낸것으로 순서대로 입력하시면 됩니다.

hsla

위와설명이 같지만 불투명도값을 오른쪽 추가로 입력하시면 됩니다. 


소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html 문서</title>
    </head>
    <body>
        <style>
            #color1{
                color:rgb(146, 255, 218);
            }
            #color2{
                color:rgba(0, 0, 0, 0.5);
            }
            #color3{
                color:hsl(115, 100%, 84%);
            }
            #color4{
                color:hsla(268, 100%, 77%, 0.5);
            }
            #color5{
                color:#459a25;<!--0x로도 16진수 표현가능-->
            }
       </style>
        <h1 id="color1">rgb를 이용한 색깔지정</h1>
        <h1 id="color2">rgba를 이용한 색깔지정</h1>
        <h1 id="color3">hsl을 이용한 색깔지정</h1>
        <h1 id="color4">hsla를 이용한 색깔지정</h1>
        <h1 id="color5">16진수를 이용한 색깔지정</h1>
    </body>
</html>
cs



배경 스타일


  • background-color
배경의 색깔을 지정하는 것 입니다. background-color:색상값;과 같이 입력할 수 있습니다.

  • backgorund-clip

배경의 범위를 조절하는 것 입니다.

예를 들어 padding-box라는 속성으로 태두리를 뺀 범위까지 적용시킬 수 있습니다.


  • background-image

배경화면을 주소값으로 이미지를 넣을 수 있도록 해줍니다.

background-image:url('주소 값 아니면 경로');


  • background-repeat

배경화면에서 반복하는 것을 조절할 수 있습니다.(body태그에 이미지 배경화면을 적용해서 background-repeat:no-repeat;값을 넣어보시면 알 수 있습니다.)


속성의 종류

 값(기본값 repeat 반복한다는 것입니다.)

설명 

 no-repeat

반복을 없앱니다. 

 x-repeat

가로반복을 말합니다.

 y-repeat

세로반복을 말합니다.


  • background-size
딱보면 알 수 있듯이 배경화면의 크기를 조절하는 것 입니다.
사용방법은 background-size:가로너비 세로너비 이렇게 입력해야합니다.(값을 사용할때)

속성의 종류

값

설명 

auto 

기본값으로 원래 이미지 크기만큼만 표시합니다. 

contain

사용하는 요소안에 들어가게끔 크기를 조절합니다. 

cover 

사용하는 요소를 덮을 크기만큼 조절합니다. 



  • background-position
배경화면의 위치를 조절하는 것 입니다.
값을 넣으면 background-position:수평길이 수직길이 로 설정가능하며 속성 값으로는

수평위치: left, center, right
수직위치: top, center, bottom
이 있습니다.


  • backgroundj-origin
배경이미지를 배치할 기준을 정합니다.
예로 border이라는 속성값으로 테두리(외곽)를 기준으로 만들 수 있습니다.

  • background-attachment
배경이미지를 스크롤할 때 사진이 같이 내려가게 하거나 할 때 사용할 수 있습니다.
scroll: 기본값
fixed: 스크롤할 때 사진이 같이 내려갑니다.

소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <body id="bg_image">
        <style>
            h1{
                background-color:#83e7ff;
            }
            #bg_image{
                background-image:url('캡처.PNG');
                background-repeat:no-repeat;
                background-size:300px 300px;
                background-position:center center;
                background-origin:content-box;
                background-attachment:fixed;
            }
       </style>
        <h1>배경스타일 설정</h1>
    </body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08
목록 관련 스타일  (0) 2018.01.05
문단 스타일  (0) 2018.01.04
글 관련 스타일  (0) 2018.01.03

+ Recent posts

티스토리툴바