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

4953 단어 html웹UICSSCSS

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>

좋은 웹페이지 즐겨찾기