CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 )
Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85
1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용 크기단위 3/85
1. CSS3 단위 [ 예제 6-1] 다양한크기의단위적용 1. HTML 페이지만들기 4/85
1. CSS3 단위 2. % 단위적용 : % 단위는기본으로설정된크기를기준으로상대적인크기를지정. 100% 가초기에설정된크기임 5/85
1. CSS3 단위 3. em 단위적용 : 배수를나타내는단위. 1 배 =1em=100% 이고, 1.5 배 =1.5em=150% 4. px 단위적용 : 크기를절대적으로지정 6/85
1. CSS3 단위 색상단위 RGB 단위 : R( 빨간색 ) 과 G( 초록색 ) 와 B( 파란색 ) 를조합해색상을표현, 0 부터 255 사이의숫자를입력 7/85
1. CSS3 단위 RGBA 색상단위 : RGB 색상단위에알파값을추가한형태. 알파값은투명도를나타내며 0.0 부터 1.0 사이의숫자를입력. 0.0 은완전투명상태, 1.0 은완전불투명상태 HEX 코드단위 : RGB 색상단위를짧게입력하는방법, 16 진수로입력 8/85
1. CSS3 단위 색상을 16 진수로표현 각색상요소에 00 에서 FF 사이의값을입력 16 진수 F 는 10 진수 16 을의미하므로 16 16 = 256 을나타냄 ColorPicker 와같은색상선택도구를사용 9/85
1. CSS3 단위 URL 단위 이미지나글꼴파일을불러올때사용 10/85
1. CSS3 단위 URL 경로를입력해파일에접근 11/85
2. 박스속성 웹페이지의레이아웃을구성할때가장중요 12/85
2. 박스속성 width 와 height, margin 과 padding 속성 width와 height 속성 : 글자를감싸는영역의크기를지정 Margin : 테두리와다른태그의간격을지정 Padding : 테두리와글자사이의간격을지정하는속성 [ 예제 6-2] 박스속성 1 width와 height 속성적용 : div 태그의박스너비와높이가 100px로지정 13/85
2. 박스속성 2 margin 과 padding 속성적용 : margin 10px 을적용, padding 30px 을적용 14/85
2. 박스속성 검사로코드분석 태그전체의크기구하기 margin, border, padding 속성은양쪽에위치하므로 2 를곱함 전체너비 = width + 2 (margin + border + padding) 전체높이 = height + 2 (margin + border + padding) 15/85
2. 박스속성 테두리속성 border-width : 테두리의두께를지정하는속성 border-style : 테두리의형태를지정하는속성 16/85
2. 박스속성 border 속성 17/85
2. 박스속성 border-radius 속성 CSS3 에서추가된속성, 테두리가둥근사각형이나원을표현 border-radius 속성을사용하기전 18/85
2. 박스속성 [ 예제 6-3] 테두리속성 - 1 기본테두리만들기 19/85
2. 박스속성 2 border-radius 속성적용 20/85
2. 박스속성 3 모서리마다다른둥글기적용 21/85
3. display 속성 display 속성 22/85
3. display 속성 [ 예제 6-4] display 속성 1 none 키워드적용 : 태그가화면에서보이지않음 23/85
3. display 속성 2 block 키워드적용 : #box 태그의 display 속성을 block 키워드로바꿈 3 inline 키워드와 inline-block 키워드적용 24/85
3. display 속성 inline 과 inline-block 키워드적용예 25/85
4. 배경속성 배경속성 26/85
4. 배경속성 background-image 속성 배경이미지를지정하는속성 27/85
4. 배경속성 background-size 속성 배경이미지크기를조절하는속성 28/85
4. 배경속성 [ 예제 6-5] 배경이미지삽입과크기조절 1 배경으로사용할이미지파일준비 2 배경이미지 1 개삽입 29/85
4. 배경속성 3 배경이미지 2 개삽입 30/85
4. 배경속성 4 배경이미지의너비조절 31/85
4. 배경속성 5 배경이미지높이조절 32/85
4. 배경속성 background-repeat 속성 repeat : 이미지를패턴처럼표시 repeat-x를입력하면 X축방향으로만이미지가반복, repeat-y를입력하면 Y축방향으로만이미지가반복됨 33/85
4. 배경속성 background-attachment 속성 배경이미지를화면에고정하는속성 34/85
4. 배경속성 background-position 속성 background-position : 키워드 ; background-position : X축위치 ; background-position : X축위치 Y축위치 ; 35/85
4. 배경속성 [ 예제 6-6] 배경이미지배치 1 배경이미지반복없애기 : background-repeat 속성에 no-repeat 키워드입력 36/85
4. 배경속성 2 스크롤이가능한분량의텍스트추가 태그내부에글을입력. 결과화면에서스크롤을내리면배경이미지가위로올라가사라짐 37/85
4. 배경속성 38/85
4. 배경속성 3 배경이미지화면에고정 : background-attachment 속성값에 fixed 를입력 39/85
4. 배경속성 4 배경이미지아래쪽에배치 40/85
4. 배경속성 5 배경이미지위치조절 41/85
5. 글자속성 font-size 속성 글자크기를지정하는속성 42/85
5. 글자속성 font-family 속성 글꼴을지정속성 43/85
5. 글자속성 generic-family 글꼴 : 다국적사용자대상용글꼴 44/85
5. 글자속성 [ 예제 6-7] 글자속성적용 1 글자크기조절 45/85
5. 글자속성 2 글꼴 1 개지정 46/85
5. 글자속성 3 글꼴여러개지정 47/85
5. 글자속성 4 웹브라우저고유글꼴적용 코드를실행하면웹브라우저는 없는글꼴 이있는지확인 사용자의컴퓨터에설치되어있지않으면사용자의웹브라우저에설정된고유의글꼴을출력 48/85
5. 글자속성 font-style 과 font-weight 속성 글자의두께와기울기를조절하는속성 49/85
5. 글자속성 [ 예제 6-8] 글자두께와기울기조정 50/85
5. 글자속성 text-align 속성 정렬 51/85
5. 글자속성 [ 예제 6-9] 글자정렬 52/85
5. 글자속성 line-height 속성 [ 예제 6-10] 글자를수직중앙정렬 1 간단한버튼만들기 53/85
5. 글자속성 54/85
5. 글자속성 2 글자를수직중앙정렬 55/85
5. 글자속성 text-decoration 속성 href 속성이적용된 a 태그 : 밑줄이생김 text-decoration 속성을적용해서밑줄을제거함 56/85
5. 글자속성 [ 예제 6-11] 링크의밑줄제거 57/85
6. 위치속성 절대위치좌표 : 요소의 X 좌표와 Y 좌표를설정해절대위치를지정 상대위치좌표 : 요소를입력한순서에따른상대위치를지정 position 속성 58/85
6. 위치속성 [ 예제 6-12] position 속성 1 absolute 키워드적용 59/85
6. 위치속성 2 left 와 top 속성적용 60/85
6. 위치속성 61/85
6. 위치속성 z-index 속성 : 숫자가클수록앞에위치 [ 예제 6-13] z-index 속성 62/85
6. 위치속성 위치속성공식 [ 예제 6-14] 위치조절응용 - HTML 페이지만들기 63/85
6. 위치속성 64/85
6. 위치속성 2 문제파악하기 ❶ h1 태그 2 개가붙어있음 (div 태그가영역을차지하지않음 ) ❷ 색상이적용된상자가자신의부모를기준으로위치를잡지않음 3 문제해결 ❶ 부모에게 height 속성을입력 65/85
6. 위치속성 ❷ 부모의 position 속성에 relative 키워드를적용 66/85
6. 위치속성 overflow 속성 내부의요소가부모의범위를벗어날때요소를처리하는방법 [ 예제 6-15] overflow 속성 1 hidden 키워드적용 67/85
6. 위치속성 2 scroll 키워드적용 - overflow 속성에 scroll 입력, div 태그에스크롤이생김 3 overflow-x 와 overflow-y 속성적용 68/85
7. float 속성 float 속성 69/85
7. float 속성 [ 예제 6-16] float 기본속성 1 HTML 페이지만들기 - img 는인라인형식태그, p 는블록형식태그여서 이미지와글자가분리됨 70/85
7. float 속성 2 img 태그에 float 속성적용 - 이미지와글이어우러진형태로출력 71/85
7. float 속성 [ 예제 6-17] 수평정렬 1 float 속성을적용할대상만들기 72/85
7. float 속성 2 float 속성이 left 키워드일때확인 73/85
7. float 속성 3 float 속성이 right 키워드일때확인 74/85
8. 그림자속성 text-shadow 속성 글자에그림자를부여 box-shadow 속성 박스에그림자를부여 75/85
8. 그림자속성 [ 예제 6-18] 글자와박스에그림자생성 1 글자에그림자만들기 76/85
8. 그림자속성 2 박스에그림자만들기 77/85
8. 그림자속성 3 중첩그림자만들기 78/85
8. 그림자속성 CSS3 Generator 사용 CSS3 Generator 웹사이트 (http://css3generator.com/) 에접속 box-shadow 와 text-shadow 속성을쉽게생성가능함 79/85
9. 그레이디언트 그레이디언트 : 두가지이상의색상을혼합하는채색기능 CSS3 이전의웹은그레이디언트를지원하지않아 background-image 을사용함 80/85
9. 그레이디언트 [ 예제 6-19] 그레이디언트생성 1 툴을사용해그레이디언트코드생성 81/85
9. 그레이디언트 2 복사한 CSS 코드를사용해 HTML 페이지만들기 82/85
9. 그레이디언트 83/85
9. 그레이디언트 선형그레이디언트 linear-gradient ( ) 함수에선형그레이디언트가진행될각도와색상블록을입력 원형그레이디언트 radial-gradient ( ) 함수를사용 84/85
Thank You