CSS3 속성 - Kangwoncs.kangwon.ac.kr › ~whcho › 2018_Spring › lecture › lecture5.pdf ·...
Transcript of CSS3 속성 - Kangwoncs.kangwon.ac.kr › ~whcho › 2018_Spring › lecture › lecture5.pdf ·...
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. 박스속성
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 테이블의 이웃 셀에서 테두리를 겹치거나 분리
display속성
태그의 타입을 결정
10
키워드 설명
none 태그를 화면에서 보이지 않게 만듦
block 태그를 블록 형식으로 지정
inline 태그를 인라인 형식으로 지정
inline-block 태그를 인라인-블록 형식으로 지정
배경속성
배경 속성을 사용하여 해당 태그의 배경 이미지 또는 색상을 지정
13
속성 설명
background-image 배경 이미지 지정
background-size 배경 이미지 크기 지정
background-repeat 배경 이미지 반복 형태 지정
background-attachment 배경 이미지 부착 형태 지정
background-position 배경 이미지 위치 지정
background 한 번에 모든 배경 속성 입력
글자속성
HTML 문서의 글자를 지정
15
속성 설명
font-size 글자 크기 지정
font-family 글꼴 지정
font-style 폰트 스타일
font-weight 폰트 굵기
text-align 글자 정렬
text-decoration 글자 밑줄 제거
예제 5. 글자속성
17
개발에 사용되는 컴퓨터는 글꼴이 설치되어 있지만, 사용
자의 컴퓨터에는 글꼴이 없을 수 있음
여러 개의 글꼴을 입력하여 사용자의 컴퓨터에 있는 글
꼴을 적용
그렇지만 워낙 사용자가 다양하기 때문에 웹 브라우저에
서 지원하는 generic-family 글꼴을 적용