CSS l CSS HTML 5 DOCTYPE html head

CSS 사용 l 문서 내에 CSS를 삽입하는 예 : HTML 5 <!DOCTYPE html> <head>

CSS 사용 l 스타일 속성을 각 태그에 적용하는 예 : HTML 5 <!DOCTYPE html>

CSS 사용 l 외부 스타일시트를 연결하는 예 : HTML h 1 {font-style: normal; color:

CSS 사용 l 외부 스타일시트를 연결하는 예 : XML name {font-style: normal; color: blue;

CSS 사용 l @import 명령을 사용한 예: h 4 {color: green; text-decoration: underline; }

CSS 사용 l @import 명령을 사용한 예: html 5_import. html <!DOCTYPE html> <head> <title>

$CSS 사용 l 다양하게 CSS 적용 Css_mix. css h 5 {color: red; text-decoration; underline;$

문맥 선택자 l 문맥 선택자 사용 예 <? xml version="1. 0" encoding="utf-8"? > <?

문맥 선택자 l 클래스를 선택자로 사용한 예 <!DOCTYPE html> <head> <title> class CSS 적용

$문맥 선택자 l id를 선택자로 사용 예 selector_id. css #cssid 1 {font-style: normal; color:$

문맥 선택자 l 요소 속성을 선택자로 사용한 예 <!DOCTYPE html> <head> <style> a[target] {

문맥 선택자 l 요소 속성을 선택자로 사용한 예 <!DOCTYPE html> <head> <style> [title~="animal"] {

Slides: 18

Download presentation

CSS 사용 l 문서 내에 CSS를 삽입하는 예 : HTML 5 <!DOCTYPE html> <head> <style> body {background-color: lightgray; } h 1 {color: blue; } p {color: green; } </style> </head> <body> <h 1> 이 부분은 파란색으로 표현됩니다. </h 1> <p> 이 부분은 초록색으로 표현됩니다. </p> </body> </html> 3

CSS 사용 l 스타일 속성을 각 태그에 적용하는 예 : HTML 5 <!DOCTYPE html> <head> <title> HTML 5 & CSS 활용 </title> </head> <body> <students> <student> <name style="color: blue; "> 홍 민 성 </name> <p> </p> <age style="color: #00 FFFF; "> 20 </age> <address style="color: green; font-weight: bold; "> 서울 면목동 </address> <email style="color: red; text-decoration: underline; "> gosyhong@gmail. com </email> </students> </body> </html> 4

CSS 사용 l 외부 스타일시트를 연결하는 예 : HTML h 1 {font-style: normal; color: blue; } h 2 {font-style: italic; color: green; } css_link. css <html> css_link. html <head> <link rel="stylesheet" type="text/css" href="css_link. css"> </head> <body> <h 1> 문자를 보통에 파란색으로 표현 </h 1> <p> <h 2> 문자를 기울임꼴에 녹색으로 표현 </h 2> </body> </html> 5

CSS 사용 l 외부 스타일시트를 연결하는 예 : XML name {font-style: normal; color: blue; } age {font-style: italic; color: red; } address {font-style: italic; color: green; } email {font-style: italic; color: yellow; } xml_link. css xml_link. xml <? xml version=” 1. 0” encoding=“utf-8”? > <? xml-stylesheet type="text/css" href="xml_link. css"? > <students> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </students> 6

CSS 사용 l @import 명령을 사용한 예: h 4 {color: green; text-decoration: underline; } @import url(css_import 2. css); h 3 {color: red; text-decoration: underline; } <html> <head> <style type="text/css"> @import url(css_import. css); h 1 {font-style: italic; color: red; } h 2 {font-style: normal; color: blue; } </style> </head> <body> <h 1> 문자를 기울임꼴에 빨간색으로 표현 </h 1> <p> <h 2> 문자를 보통에 파란색으로 표현 </h 2> <p> <h 3> @import명령문에 의한 CSS 적용 </h 3> <p> <h 4> CSS 파일 내에 @import 명령문에 의한 CSS 적용 </h 4> </body> </html> css_import 2. css css_import 2. html 8

CSS 사용 l @import 명령을 사용한 예: html 5_import. html <!DOCTYPE html> <head> <title> HTML 5 & CSS 활용 </title> <style id="importstyle"> @import url(html 5_import. css); address {text-decoration: underline; color: blue; } email {font-style: italic; color: blue; } </style> </head> <body> <students> <student> <name> 홍 민 성 </name> <p> </P> <age> 20 </age> <address> 서울 면목동 </address> <email> gosyhong@gmail. com </email> </students> </body> </html> html 5_import. css student {font-size: 200%; } name {font-style: normal; color: blue; } age {font-style: italic; color: red; } address {text-decoration: underline; color: green; } email {text-decoration: underline; font-style: italic; color: green; } 9

$CSS 사용 l 다양하게 CSS 적용 Css_mix. css h 5 {color: red; text-decoration; underline;$

CSS 사용 l 다양하게 CSS 적용 Css_mix. css h 5 {color: red; text-decoration; underline; } <html> <head> <link rel="stylesheet" type="text/css" href="css_mix. css"> <style type="text/css"> @import url(css_file. css); h 1 {font-style: italic; color: red; } </style> </head> <body> <h 1> 문자를 기울임꼴에 빨간색으로 표현 </h 1> <p> </p> <h 3 style="font-style: italic; color: blue; "> 문자를 기울임꼴에 파란색으로 표현 </h 3> <p> </p> <h 5> Link에 의한 CSS 적용 </h 5> </body> </html> 10

문맥 선택자 l 문맥 선택자 사용 예 <? xml version="1. 0" encoding="utf-8"? > <? xml-stylesheet type="text/css" href="students. css"? > <students> <name> 한국대학교 </name> <student> <name> 홍 민 성 </name> <age> 20 </age> <address> 서울 면목동 </address> <email> gosyhong@gmail. com </email> </students> students. xml students. css name {color: red; } student name {font size: 200% color: blue; font-style: italic; } name {color: red; } student, name {color: blue; font-style: italic; } students 2. css 14

문맥 선택자 l 클래스를 선택자로 사용한 예 <!DOCTYPE html> <head> <title> class CSS 적용 </title> <link rel="stylesheet" type="text/css" href="xml_class. css"> </head> <body>  <students> <student> <name class="class 1"> 고소영 </name> </student> <name class="class 2"> 고소영 </name> </student> <name class="class 3"> 고소영 </name> </students>  </body> </html> xml_class. css name. class 1 {color: red; font-size: 100%; } name. class 2 {color: blue; font-size: 150%; } name. class 3 {color: green; font-size: 200%; } 15

$문맥 선택자 l id를 선택자로 사용 예 selector_id. css #cssid 1 {font-style: normal; color:$

문맥 선택자 l id를 선택자로 사용 예 selector_id. css #cssid 1 {font-style: normal; color: blue; text-decoration: overline; } #cssid 2 {font-style: italic; color: red; text-decoration: underline; text-transform: uppercase; } <!DOCTYPE html> <head> <title> selector id CSS 적용 </title> <link rel="stylesheet" type="text/css" href="selector_id. css"> </head> <body>  <students> <student> <name id="cssid 1"> 홍 민 성 </name> <p> </p> <age id="cssid 2"> 20 </age> <address id="cssid 1"> 서울 면목동 </address> <email id="cssid 2"> gosyhong@gmail. com </email> </students>  </body> </html> 16

문맥 선택자 l 요소 속성을 선택자로 사용한 예 <!DOCTYPE html> <head> <style> a[target] { background-color: yellow; } a[target=_blank] { background-color: green; } a[target=_top] { background-color: pink; font-size: 150%; } </style> </head> <body> <p> Attribute Selector: </p> <a href="http: //www. google. com" target=""> www. google. com </a> <a href="http: //www. apple. com" target="_blank"> www. apple. com </a> <a href="http: //www. facebook. com" target="_top"> www. facebook. com </a> </body> </html> 17

문맥 선택자 l 요소 속성을 선택자로 사용한 예 <!DOCTYPE html> <head> <style> [title~="animal"] { border: 5 px solid blue; } [title*="sh"] { border: 5 px solid yellow; } [title^="my"] { border: 5 px solid green; } </style> </head> <body> <p> 이미지 속성 설명에 특정 키워드 포함하면 CSS 적용 </p> <img src="tiger. jpg" title="animal tiger" width="200" height="120">  <img src="fish. jpg" title="fish" width="200" height="120">  <img src="lion. jpg" title="animal lion" width="200" height="120">  <img src="horse. jpg" title="my horse" width="200" height="120"> </body> </html> 18