CSS color, background

다람·2022년 6월 22일
0

CSS

목록 보기
2/8

CSS color

  • 웹에서의 색상 표현
  1. 색상명으로 표현
    --> w3c에서 정의한 16가지의 표준 색상이 있다.
  2. rgb 색상값으로 표현 (0~255 사이의 값으로 표현)
    --> 더 다양한 색을 표현할 수 있다.
    rgb(red비율, green값, blue값)
  3. 16진수 색상값으로 표현 (#000000 ~ #ffffff까지)

색상 참고 사이트

http://www.hipenpal.com/tool/html-color-charts-rgb-color-table-in-korean.php

css color 예시

<style>
#rgbCode{
  color: rgb(125, 150, 75);
}
#Hexa{
   color: #0A82FF;
}
</style>
<h1 id="rgbCode">rgb를 적용하여 색상변경</h1>
<h1 id="Hexa">16진수를 적용하여 색상변경</h1>

background

  • 배경 (해당 요소에 배경을 부여하는 속성)
  1. background-color
    --> 해당 HTML 요소의 배경색 설정
  2. background-image
    --> 해당 HTML 요소의 배경으로 나타날 이미지 설정
    --> background-image: url("경로")
  3. background-repeat
    --> 이미지의 반복(배경의 반복)
    기본적으로 body에 image를 배경으로 둔다면 바둑판식 배열이 기본값
    no-repeat이라는 속성값을 부여해 반복을 없앨 수 있으며 x,y축의 제어도 가능
    no-repeat : 반복제거
    repeat-x, repeat-y : 속성값을 이용해 x축 혹은 y축으로만 반복을 진행할 수도 있다.

    repeat 예시

      background-repeat: no-repeat; 
       background-repeat: repeat-y;   
       background-repeat: no-repeat;

    top, left 등의 값으로도 배경의 위치를 지정할 수 있지만 px 등의 단위를 이용한 배경이 자주 사용되는 편이다.

  1. background-position(x축, y축 / 수치로 조정하면 x,y축)
    --> 반복되지 않는 배경이미지의 상대 위치 설정
    --> 단, 배경 이미지가 반복되지 않아야 한다.

    position 예시

    ```
    background-position : 150px 250px;
    ```
  2. background-attachment
    --> 위치 고정

    attachment 예시

    background-attachment: fixed; 
  3. background shorthand
    --> 속성명을 일일히 쓰지 않고 한 줄에 전부 모든 속성을 표현하는 방법
    --> background : color/image(url로 쓰면 됨) | repeat | attachment | position

    shorthand 예시

    div{
        background : red url("../img/test4.jpg") no-repeat fixed 50px 50px;
    }
profile
안녕

0개의 댓글