Download presentation
Presentation is loading. Please wait.
1
웹과 모바일 홈페이지의 이해와 제작 CSS 깊이 알기
2
강의 자료 다운로드
3
CSS로 꾸미기 CSS(Cascading Style Sheet) -HTML 문서의 색이나 모양 등 외관을 꾸미는 언 어 -CSS로 작성된 코드를 스타일 시트라고 부름 - 색상, 배경, 텍스트, 폰트, 박스모델, 비주얼 포 맷 및 효과, 리스트, 테이블, 사용자 인터페이스
4
CSS로 꾸미기 CSS 스타일 시트 만드는 방법 3가지 1. <style> </style> 태그에 스타일 시트 작성 2. style 속성에 스타일 시트 작성 3. 별도 파일로 작성
5
CSS로 꾸미기 1. <style> </style> 태그에 스타일 시트 작성 <head>
body { background-color : mistyrose; } h3 { color : purple; } hr { border : 5px solid yellowgreen; } span { color : blue; font-size : 20px; } </style> </head>
6
CSS로 꾸미기 2. style 속성에 스타일 시트 작성
7
CSS로 꾸미기 3. 별도 파일로 작성 <head>
<link href="mystyle.css" type="text/css" rel="stylesheet"> </head> <head> <style> @import url(mystyle.css); </style> </head>
8
CSS로 꾸미기 Id셀렉터와 class 셀렉터 <body>
<div class=“div1”>class 셀렉터</div> <div id=“div2”>id 셀렉터</div> </body> <style> .div1 { color : red; } #div2{ color : blue; </style>
9
CSS로 꾸미기 CSS의 박스모델 - HTML 태그는 사각형 박스로 다루어짐 margin(여백) 콘텐츠
border(테두리) padding(패딩) 콘텐츠 HTML 태그의 텍스트나 이미지가 출력되는 부분 패딩 콘텐츠를 직접 둘러싸고 있는 내부 여백 테두리 패딩 외부의 테두리로서, 직선이나 점선 혹은 이미지로 테두리를 그릴 수 있음 여백 박스의 맨 바깥 영역이며 테두리 바깥의 공간으로 인접한 아래위 이웃 태그의 박스와의 거리
10
CSS로 꾸미기 지난시간 완성된 홈페이지 정리하기 - 여백 / 레이아웃 정리 - 하이퍼링크 삽입 - 내용 추가
11
오늘 실습은 이곳에서… Jsbin.com
12
CSS 스타일 상속 CSS 스타일 상속 <body> <ul id="test">
<li>first</li> <ul> <li>하나</li> <li>둘</li> </ul> <li>second</li> <li>third</li> </body>
13
CSS 스타일 상속 CSS 스타일 상속 <style> html { color:blue; } ul {
color:red; </style>
14
CSS 스타일 상속 CSS 스타일 상속 <style> html { color:blue; } #test li{
color:red; </style>
15
CSS 스타일 상속 CSS 스타일상속 <style> html { color:blue; } #test > li{
color:red; </style>
16
CSS 우선순위 <style> p { color : blue; font-size : 12px; }
p { color : black; font-size : 16px; } 브라우저 디폴트 스타일 p { background : mistyrose; } external.css <p style="font-size: 25px">안녕하세요</p> style 속성 우선 순위 높음 우선 순위 낮음 background: mistyrose; color : blue; font-size : 25px; <p>안녕하세요</p>의 최종 스타일 시트
17
셀렉터 가상 클래스 셀렉터
18
CSS에서 색 표현 # 8A2BE2 3 가지 방법 사례 rgb(138, 43, 226) 16진수 코드로 표현
색 이름으로 표현 CSS3 표준에서는 140개 색의 이름을 정하고 있음 사례 # 8A2BE2 green red blue 빨간색(r) 성분 0x8A(138), 초록색(g) 성분 0x2B(43), 파란색(b) 성분 0xE2(226) 이 혼합된 보라색(blueviolet) rgb(138, 43, 226) green red blue 빨간색(r) 성분 138, 초록색(g) 성분 43, 파란색(b) 성분 226 이 혼합된 보라색(blueviolet) div { color : #8A2BE2; } /* blueviolet의 16진수 코드 */ div { color : rgb(138, 43, 226); } /* blueviolet의 10진수 색 코드 */ div { color : blueviolet; } /* blueviolet 색 이름 */
19
CSS 표준 단위
20
텍스트를 꾸미는 CSS
21
텍스트 그림자 div { text-shadow : 3px 3px 5px red; }
22
폰트 제어 CSS 폰트 패밀리, font-family 폰트 크기, font-size 폰트 스타일, font-style
폰트 굵기, font-weight font-size : 40px; /* 40픽셀 크기 */ font-size : medium; /* 중간 크기. 크기는 브라우저마다 다름 */ font-size : 1.6em; /* 현재 폰트의 1.6배 크기 */ font-style : italic; /* 이탤릭 스타일로 지정 */ font-weight : 300; /* 100~900의 범위에서, 300 정도 굵기 */ font-weight : bold; /* 굵게. 700 크기 */
23
배경 만들기 가상 클래스 셀렉터
24
배경만들기 배경 속성 div { background-color : skyblue;
background-size : 100px 100px; background-image : url("media/spongebob.png"); background-repeat : no-repeat; background-position : left center; }
25
CSS 애니메이션 @keyframes textColorAnimation { 0% { color : blue; }
30% { color : green; } 100% { color : red; } } span { animation-name : textColorAnimation; animation-duration : 5s; animation-iteration-count : infinite;
26
감사합니다. See you next week!!
Similar presentations
