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

Slides:



Advertisements
Similar presentations
일정 관리 다이어리 제작 JSP Programming with a Workbook. 학습 목표  사용자의 일정을 관리할 수 있는 다이어리에 대하여 알아보자. JSP Programming with a Workbook2.
Advertisements

2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.
© 2013 인피니티북스 All rights reserved CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기 CHAPTER 7. HTML 와 CSS 로 웹사이트 만들 기.
406 문서에 표를 작성하고 크기를 조절할 수 있다. 표에 서식을 적용하여 다양하게 표현할 수 있다. 표를 편집하여 다양한 형태로 나타낼 수 있다. 학습목표 5 부. HTML 의 기본 4 장. 표를 이용한 문서작성 - 17 주 차시 : 1/3 ∼ 3/3 배당시간 : 18.
스타일 시트(테두리) 오산대학 컴퓨터정보과 김 영 권.
보도메일 HTML 소스 사용 안내 Version 1.0( 미디어국 제작)
보도메일 HTML 소스 사용 안내 Version 1.0( 미디어국 제작)
Chapter05 HTML 홈페이지 만들기
파워포인트 2007.
CSS Web Page Construction
CHAPTER 4. CSS 스타일시트 기초.
HTML과 CSS HTML과 CSS 세미나에 오신 것을 환영합니다.
HTML & CSS 겉핥기 2012 SUMMER SPARCS.
HTML5 웹 프로그래밍 입문 (개정판) 4장. CSS3 스타일시트 기초.
명품 웹 프로그래밍.
HTML5 웹 프로그래밍 입문(교수용) 7장. 웹사이트제작실습.
Chapter04 HTML 회원 정보 입력 양식 만들기
CSS CSS.
CHAPTER 5. CSS 박스모델과 응용.
Internet Computing KUT Youn-Hee Han
CSS – 개요 Cascading Style Sheets의 약자 “계단형 스타일시트”라고 한다.
준비학습 2: CSS 11장. CSS 12장. 이미지, 목록, 하이퍼링크 스타일
HTML5 웹 프로그래밍 입문 (개정판) 5장. 고급 표현을 위한 CSS3 활용.
HYPER TEXT MARKUP LANGUAGE
CSS BOX MODEL Chapter 5 Part 1
07장. <TABLE> 태그로 표 디자인하기
Raster 애니메이션은 GIF Animator로 만들면 쉽다
iframe 사용하기 Chapter 3 Part 2
HTML5+CSS3 실무 테크닉 김은기 저.
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
~ 초콜릿 공작소 ~ 프로젝트 완료 조은아.
Html(front end) & jsp(back end)
학습목표 학습목차 박스 모델에 대한 개념을 이해할 수 있습니다.
10강_CSS 속성-I CSS3 단위 url() display 속성 visibility 속성 opacity 속성
게임웹사이트운영 [9] div & span.
배경 그림 다루기 목록 꾸미기 하이퍼링크 꾸미기 마우스 커서 모양
게임웹사이트운영 [10] 폼 작성.
CSS Layout Chapter 6 Part 1
준비학습 2: CSS 11장. CSS 12장. 이미지, 목록, 하이퍼링크 스타일
Chapter07 CSS3 글꼴과 문자 HTML5 Programming.
CSS2(Cascading Style Sheets)
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
Web & Internet [03] HTML5 다양한 태그
13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어.
명지대학교 통합모바일앱 E-Book 이용안내
HTML CSS 자바스크립트 무작정 따라하기
Web & Internet [06] CSS3 응용과 레이아웃
11강_CSS 속성-II margin 및 padding 속성 box-sizing 속성 border 속성
12강_CSS 속성-III font-family , font-size 속성
HTML 5+ 자바스크립트 발표자 : 김동한 5주차.
Chap6. CSS(Cascading Stytle Sheet) 김만수
Web & Internet [11] JavaScript & BootStrap
2018년 10월 01일 박성진 Web & Internet [04] CSS3 2018년 10월 01일 박성진
게임웹사이트운영 [7] 폰트,색,박스모델.
Chapter05 HTML 홈페이지 만들기 HTML & JavaScript.
박성진 컴퓨터 프로그래밍 기초 [04] 연산자 박성진
Web & Internet [02] HTML5 기본구조와 작성법
Web & Internet [01] 인터넷 기술의 개요
자료관리 : 현 화면에서 인쇄할 자료를 입력하여 발행하는 화면 입니다.
시스템 인터페이스 Lab1 X-window 및 명령어 사용.
문서 작성에 사용되는 기본태그 HR, PRE, B, I, U, S.
2018년 11월 12일 박성진 Web & Internet [09] 레이아웃 P2 2018년 11월 12일 박성진
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
웹과 모바일 홈페이지의 이해와 제작 CSS 깊이 알기
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
웹과 모바일 홈페이지의 이해와 제작 그리드 레이아웃_웹폼
Homework #3 - 페이지 모듈화 및 로그인처리 -
Web & Internet [10] 입문 – input 태그
스타일 시트란? HTML만으로 홈페이지를 만드는 것보다 더 많은 페이지의 디자인을 업그레이드하고자 할 때 사용
Chapter 11. 문서 인쇄 및 파일 형식.
Presentation transcript:

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

CSS3 (Cascading Style Sheet) 속성 웹 페이지를 꾸미는 다양한 속성들 https://www.w3schools.com/cssref/ 참조

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

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

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

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

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

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

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

예제 3. display 속성 DBLab Template by Suan

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

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

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

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

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

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

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

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

예제 7. float 속성 DBLab Template by Suan

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