CSS3 속성(1)
CSS3 속성(1)
CSS3(Cascading Style Sheet) 속성
웹 페이지를 꾸미는 다양한 속성들
https://www.w3schools.com/cssref/pr_border-style.asp 참조
22018-01-03
CSS3(Cascading Style Sheet) 기본단위
키워드 단위: W3C에서 미리 정의한 단어, 스타일 값으로 입력하면 키워드에 해당하는 스타일이 적용
크기 단위: CSS3에서 가장 많이 사용되는 단위, %, em, cm, px 등이 있음
32018-01-03
display 속성의키워드단위들
단위 설명
% 백분율단위
em 배수단위
px 픽셀
CSS3(Cascading Style Sheet) 기본단위
색상 단위: 색상을 입력하는 단위
URL 단위: 이미지나 글꼴 파일을 불러올 때 사용
42018-01-03
단위 설명
keword 키워드
rgb RGB색상단위
rgba(alpha) RGBA 색상단위
#000000 HEX코드단위
빨간색을나타내는단위들
박스속성
웹 페이지 레이아웃을 구성 할 때 가장 중요한 속성
52018-01-03
글자
margin 속성
border 속성
padding 속성
height 속성
width 속성
속성 설명
padding 테두리와 글자 사이의 간격
margin 다른 태그 사이와의 간격
예제 1. 박스속성
62018-01-03
예제 1. 박스속성
72018-01-03
margin: 상 우 좌 하– ex) maring: 50px 0px 0px 50px;
margin: 상하 좌우
– ex) margin: 50px 50px;
padding 속성도 위와 동일
테두리속성
테두리 두께, 형태를 지정
border: <border-width> || <border-style || <color> 형태로 한번에 정할 수 있음
82018-01-03
속성 설명
border-width 테두리 두께
border-style 테두리 형태
border-radius 테두리의 꼭지점 형태
border-collapse 테이블의 이웃 셀에서 테두리를 겹치거나 분리
예제 2. 테두리속성
92018-01-03
display속성
태그의 타입을 결정
102018-01-03
키워드 설명
none 태그를 화면에서 보이지 않게 만듦
block 태그를 블록 형식으로 지정
inline 태그를 인라인 형식으로 지정
inline-block 태그를 인라인-블록 형식으로 지정
예제 3. display 속성
112018-01-03
예제 3. display 속성
122018-01-03
inline inline-block
widthheight 적용 X 적용 O
margin 좌우만적용 4방향 적용
배경속성
배경 속성을 사용하여 해당 태그의 배경 이미지 또는 색상을 지정
132018-01-03
속성 설명
background-image 배경 이미지 지정
background-size 배경 이미지 크기 지정
background-repeat 배경 이미지 반복 형태 지정
background-attachment 배경 이미지 부착 형태 지정
background-position 배경 이미지 위치 지정
background 한 번에 모든 배경 속성 입력
예제 4. 배경속성
142018-01-03
글자속성
HTML 문서의 글자를 지정
152018-01-03
속성 설명
font-size 글자 크기 지정
font-family 글꼴 지정
font-style 폰트 스타일
font-weight 폰트 굵기
text-align 글자 정렬
text-decoration 글자 밑줄 제거
예제 5. 글자속성
162018-01-03
예제 5. 글자속성
172018-01-03
개발에 사용되는 컴퓨터는 글꼴이 설치되어 있지만, 사용자의 컴퓨터에는 글꼴이 없을 수 있음
여러 개의 글꼴을 입력하여 사용자의 컴퓨터에 있는 글꼴을 적용
그렇지만 워낙 사용자가 다양하기 때문에 웹 브라우저에서 지원하는 generic-family 글꼴을 적용
예제 6. 글자속성
182018-01-03
float속성
HTML 문서의 레이아웃을 설정 할 때 사용
태그를 부유하게 하는 속성
192018-01-03
키워드 설명
left 태그를 왼쪽에 붙임
right 태그를 오른쪽에 붙임
예제 7. float속성
HTML 문서의 레이아웃을 설정 할 때사용
202018-01-03
감사합니다