HTML5 + CSS3 _ 14강

songi Jeon·2020년 9월 2일
0

HTML

목록 보기
3/19

CSS 값에 입력할 수 있는 기본 단위


1.CSS 속성을 공부하기 전에


  • 전부 다 외우려고 하지 마라
  • 자주 사용하는 것 위주로만 알아둘것
  • W3schools.com


2. CSS 값에 입력할 수 있는 기본 단위


* CSS에서 사용하는 단위

<style>
	h1 {
    	<스타일 속성>: <스타일 값>;
        <스타일 속성>: <스타일 값>;
        <스타일 속성>: <스타일 값>;
    }
</style>

* 스타일 값에 들어가는 것들에 대해

- 키워드 단위 :스타일 값에 입력하는 것, 키워드 단위를 입력하는 것, 속성에 따라 다름

(예: color:다양한 색상의 키워드가 들어갈 수 있음)

<style>
  h2 {
    font-weight: normal;
    color: coral;
    color: #ffffff;
    color: #000000 color: rgb(255, 173, 64);
  }
  </style>

- 크기 단위 : 크기를 나타낼 때 사용하는 단위

<style>
  h3 {
    % : 크기를 % 단위로 지정 
    em/rem : 크기를 배수 단위, rem은 최상위의 태그만 적용 %와 em/rem는 상대적인 크기 지정 
    px : 절대적인 크기 단위 
    background-image: url(http://placekitten.com/100/100)
  }
</style>

h1의 폰트 사이즈는 기본적으로 2em으로 되었음. 기본 사이즈가 16p며이면 h1은 32px가 됨
rem 단위는 가장 최상위의 태그가 적용한 크기만을 따라감

- 색상 단위

color: #RRGGBB : 16진수로 빨강,초록,파란색의 단위를 입력

#### tip
color pick을 이용해 쉽게 색상을 선택할 수 있음
Adobe color에서 어울리는 색상을 고를 수 있음
알파값 = 투명값 설정 가능
rgb(000,000,000) = 빨강, 녹색, 파랑을 10진수로 표현

- url 단위

<style>
  h3 {
    background-image: url(http://placekitten.com/100/100)
  }
</style>
<h1>HELLO</h1>
profile
비전공자가 백엔드 개발자 도전하는 블로그

0개의 댓글