2018년 10월 08일 박성진 parks@kangwon.ac.kr Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진 parks@kangwon.ac.kr.

Presentation on theme: "2018년 10월 08일 박성진 parks@kangwon.ac.kr Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진 parks@kangwon.ac.kr."— Presentation transcript:

1 2018년 10월 08일 박성진 parks@kangwon.ac.kr
Web & Internet [05] CSS3 속성 2018년 10월 08일 박성진

2 CSS3 (Cascading Style Sheet) 속성
웹 페이지를 꾸미는 다양한 속성들 참조

3 CSS3 (Cascading Style Sheet) 기본 단위
키워드 단위: W3C에서 미리 정의한 단어, 스타일 값을 입력하면 키워드에 해당하는 스타일이 적용

4 CSS3 (Cascading Style Sheet) 기본 단위
색상 단위: 색상을 입력하는 단위 URL 단위: 이미지나 글꼴 파일을 불러올 때 사용 단위 설명 % 백분율 단위 em 배수 단위 px 픽셀 단위 설명 keyword 백분율 단위 rgb 배수 단위 rgba(alpha) 픽셀 #000000 HEX 코드 단위

5 글자 박스 속성 웹 페이지 레이아웃을 구성 할 때 가장 중요한 속성 margin 속성 border 속성 padding 속성
height 속성 width 속성 속성 설명 padding 테두리와 글자 사이의 간격 margin 다른 태그 사이와의 간격 DBLab Template by Suan

6 예제 1. 박스 속성 margin: 상 우 좌 하 ex) margin: 50px 0 0 50px margin: 상하 좌우
padding 속성도 위와 동일 border (X) DBLab Template by Suan

7 테두리 속성 테두리 두께, 형태를 지정 <border-width>, <border-style>, <border-color> 형태로 한번에 정할 수 있음 속성 설명 border-width 테두리 두께 border-style 테두리 형태 border-radius 테두리의 꼭지점 형태 border-collapse 테이블의 이웃 셀에서 테두리를 겹치거나 분리 DBLab Template by Suan

8 예제 2. 테두리 속성 DBLab Template by Suan

9 Display 속성 태그의 타입을 결정 키워드 설명 none 태그를 화면에서 보이지 않게 만듦 block
태그를 블록 형식으로 지정 inline 태그를 인라인 형식으로 지정 inline-block 태그를 인라인-블록 형식으로 지정 DBLab Template by Suan

10 예제 3. display 속성 DBLab Template by Suan

11 예제 3. display 속성 width height margin inline inline-block 적용 X 적용 O
좌 우만 적용 4방향 적용 DBLab Template by Suan

12 background-attachment
배경 속성 백ㅇ 속성을 사용하여 해당 태그의 배경 이미지 또는 색상을 지정 속성 설명 background-image 배경 이미지 지정 background-size 배경 이미지 크기 지정 background-repeat 배경 이미지 반복 형태 지정 background-attachment 배경 이미지 부착 형태 지정 background-position 배경 이미지 위치 지정 background 한 번에 모든 배경 속성 입력 DBLab Template by Suan

13 예제 4. 배경 속성 DBLab Template by Suan

14 글자 속성 HTML 문서의 글자를 지정 속성 설명 font-size 글자 크기 지정 font-family 글꼴 지정
font-style 폰트 스타일 font-weight 폰트 굵기 text-align 글자 정렬 text-decoration 글자 밑줄 제거 DBLab Template by Suan

15 예제 5. 글자속성 DBLab Template by Suan

16 예제 5. 글자속성 DBLab Template by Suan

17 예제 6. 글자 속성 DBLab Template by Suan

18 Float 속성 HTML 문서의 레이아웃을 설정 할 때 사용 태그를 부유하게 하는 속성 키워드 설명 left
태그를 왼쪽에 붙임 right 태그를 오른쪽에 붙임 DBLab Template by Suan

19 예제 7. float 속성 DBLab Template by Suan

20 과제 4 과제2 HTML파일에서 CSS3을 사용해 자기소개 홈페이지를 꾸며보시오. 10월 15일 오전 9:10 까지 제출
Sublime Text 또는 메모장으로 사용해 과제물을 학번 및 학생이름 (예 _박성진) HTML으로 저장한 후 으로 제출 제출하시기 전에 파일을 열고 볼 수 있는지 확인해 주시기 바랍니다. 아니면, HTML 파일을 A4용지로 프린트한 뒤 제출 도움 필요하실 경우, 매주 목요일 오후 4시-5시 한빛관 408호를 방문하시거나 예약 DBLab Template by Suan