CSS3 속성

CSS3(Cascading Style Sheet) 속성

웹 페이지를 꾸미는 다양한 속성들

https://www.w3schools.com/cssref/pr_border-style.asp 참조

2

CSS3(Cascading Style Sheet) 기본단위

키워드 단위: W3C에서 미리 정의한 단어, 스타일 값으로 입력하면 키워드에 해당하는 스타일이 적용

크기 단위: CSS3에서 가장 많이 사용되는 단위, %, em, cm, px 등이 있음

3

display 속성의키워드단위들

단위 설명

% 백분율단위

em 배수단위

px 픽셀

CSS3(Cascading Style Sheet) 기본단위

색상 단위: 색상을 입력하는 단위

URL 단위: 이미지나 글꼴 파일을 불러올 때 사용

4

단위 설명

keword 키워드

rgb RGB 색상단위

rgba(alpha) RGBA 색상단위

#000000 HEX 코드단위

빨간색을나타내는단위들

박스속성

웹 페이지 레이아웃을 구성 할 때 가장 중요한 속성

5

글자

margin 속성

border 속성

padding 속성

height 속성

width 속성

속성 설명

padding 테두리와 글자 사이의 간격

margin 다른 태그 사이와의 간격

예제 1. 박스속성

6

예제 1. 박스속성

7

margin: 상 우 좌 하

– ex) maring: 50px 0px 0px 50px;

margin: 상하 좌우

– ex) margin: 50px 50px;

padding 속성도 위와 동일

테두리속성

테두리 두께, 형태를 지정

border: <border-width> || <border-style || <color> 형태로 한번에 정할 수 있음

8

속성 설명

border-width 테두리 두께

border-style 테두리 형태

border-radius 테두리의 꼭지점 형태

border-collapse 테이블의 이웃 셀에서 테두리를 겹치거나 분리

예제 2. 테두리속성

9

display속성

태그의 타입을 결정

10

키워드 설명

none 태그를 화면에서 보이지 않게 만듦

block 태그를 블록 형식으로 지정

inline 태그를 인라인 형식으로 지정

inline-block 태그를 인라인-블록 형식으로 지정

예제 3. display 속성

11

예제 3. display 속성

12

inline inline-block

widthheight

적용 X 적용 O

margin 좌우만적용 4방향 적용

배경속성

배경 속성을 사용하여 해당 태그의 배경 이미지 또는 색상을 지정

13

속성 설명

background-image 배경 이미지 지정

background-size 배경 이미지 크기 지정

background-repeat 배경 이미지 반복 형태 지정

background-attachment 배경 이미지 부착 형태 지정

background-position 배경 이미지 위치 지정

background 한 번에 모든 배경 속성 입력

예제 4. 배경속성

14

글자속성

HTML 문서의 글자를 지정

15

속성 설명

font-size 글자 크기 지정

font-family 글꼴 지정

font-style 폰트 스타일

font-weight 폰트 굵기

text-align 글자 정렬

text-decoration 글자 밑줄 제거

예제 5. 글자속성

16

예제 5. 글자속성

17

개발에 사용되는 컴퓨터는 글꼴이 설치되어 있지만, 사용

자의 컴퓨터에는 글꼴이 없을 수 있음

여러 개의 글꼴을 입력하여 사용자의 컴퓨터에 있는 글

꼴을 적용

그렇지만 워낙 사용자가 다양하기 때문에 웹 브라우저에

서 지원하는 generic-family 글꼴을 적용

예제 6. 글자속성

18

float속성

HTML 문서의 레이아웃을 설정 할 때 사용

태그를 부유하게 하는 속성

19

키워드 설명

left 태그를 왼쪽에 붙임

right 태그를 오른쪽에 붙임

예제 7. float속성

HTML 문서의 레이아웃을 설정 할 때

사용

20

감사합니다