1. HTML&CSS의 기초 (5) 단위, 배경, 박스모델_1

Yujin Lee·2021년 3월 26일

CSS html 웹UI

Web_UI

목록 보기

11/28

1. CSS 속성을 공부하기 좋은 사이트

1. CSS 속성을 정의하는 W3C에서 제공하므로 가장 정확하다

2. 간단하게 스펙과 예제를 확인하기 좋다

3. 브라우저 지원범위를 확인할 수 있다

2. 단위

절대 길이
상대 길이

1) 절대 길이

px ( 1px = 1/96th of 1 inch )
다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적이다.

pt ( 1pt - 1/72 of 1 inch )
웹개발 시 권장하는 단위가 아니다!!

2) 상대 길이

%
부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.
em
font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.
rem
root의 font-size를 기준으로 값을 환산합니다.
vw
viewport의 width값을 기준으로 1%의 값으로 계산됩니다.

3. 색상 & background

1) 색상

(1) 쓰는 법

h1  {  color: 색상 값; }

(2) 색상 값 지정 방식

컬러 키워드

16 진법 ex. #RRGGBB
16 진법 ex. #RGB
RGB( )
RGBA( )

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>color</title>
</head>
<body>
    <h1 style="color: red"> heading </h1>
    <h1 style="color: #ff0000"> heading </h1>
    <h1 style="color: #f00"> heading </h1>
    <h1 style="color: rgb(255,0,0)"> heading </h1>    
    <h1 style="color: rgba(255,0,0, 0.5)"> heading </h1>
</body>
</html>

2) background

background 관련 속성

background-color : 배경의 색상을 지정
background-image : 배경으로 사용할 이미지의 경로를 지정
background-repeat : 이미지의 반복 여부와 방향을 지정
background-position : 0% 요소에서 배경 이미지의 위치를 지정
background-attachment : 화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정

background 축약

background: [-color] [-image] [-repeat] [-attachment] [-position];

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>background</title>
  <style>
    div {
      height: 500px;
      background-color: yellow;
      background-image: url(https://www.w3schools.com/CSSref/img_tree.gif);
      background-repeat: no-repeat;
      background-position: center top;
      /* 축약형 */
      background: yellow url(https://www.w3schools.com/CSSref/img_tree.gif) no-repeat center top;
    }
  </style>
</head>
<body>
    <div> css background 속성 실습 </div>
</body>
</html>