1. HTML&CSS의 기초 (5) 단위, 배경, 박스모델_1
1. CSS 속성을 공부하기 좋은 사이트
1. CSS 속성을 정의하는 W3C에서 제공하므로 가장 정확하다
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>
Author And Source
이 문제에 관하여(1. HTML&CSS의 기초 (5) 단위, 배경, 박스모델_1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@imyourgenie/1.-HTMLCSS의-기초-5-단위-배경-박스모델1
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적이다.
웹개발 시 권장하는 단위가 아니다!!
%
부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.
em
font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.
rem
root의 font-size를 기준으로 값을 환산합니다.
vw
viewport의 width값을 기준으로 1%의 값으로 계산됩니다.
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>Author And Source
이 문제에 관하여(1. HTML&CSS의 기초 (5) 단위, 배경, 박스모델_1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@imyourgenie/1.-HTMLCSS의-기초-5-단위-배경-박스모델1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
