Section 03 CSS CSS HTML HTML HEAD STYLE
- Slides: 52
Section 03 CSS 사용법 문서 내에 CSS를 삽입하는 예: HTML <HTML> <HEAD> <STYLE type="text/css"> <!-- h 1 {font-style : italic ; color : red} h 2 {font-style : normal ; color : blue} --> </STYLE> </HEAD> <BODY> <H 1> 문자를 기울임꼴에 빨간색으로 표현 </H 1> <H 2> 문자를 보통에 파란색으로 표현</H 2> </BODY> </HTML> css_test. html 7
Section 03 CSS 사용법 문서 내에 CSS를 삽입하는 예: XML <? xml version='1. 0' encoding='euc-kr'? > xml_style. xml <? xml-stylesheet type="text/css" href="#xmlstyle"? > <students> <style id="xmlstyle"> <!-- style {display: none; visibility : hidden} name {font-style : normal; color : blue} age {font-style : italic; color : red} address {font-style : italic; color : green} email {font-style : italic; color : blue} </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </student> </students> 8
Section 03 CSS 사용법 스타일 속성을 각 태그에 적용하는 예: HTML <HTML> <Head> <title> CSS 활용 </title> </Head> <BODY> <H 1 style="font-style: italic; color: blue"> 문자를 기울임꼴에 파란색으로 표현 </H 1> <P> <H 2 style="font-style: normal; color: red"> 문자를 보통에 빨간색으로 표현</H 2> </BODY> </HTML> css_style. html 9
Section 03 CSS 사용법 스타일 속성을 각 태그에 적용하는 예: XML <? xml version='1. 0' encoding='euc-kr'? > student_css. xml <? xml-stylesheet type="text/css"? > <students> <student> <name STYLE="color: blue"> 홍 현 </name> <age STYLE="color: green"> 30 </age> <address STYLE="color: green ; font-weight: bold"> 서울면목동 </address> <email STYLE="color: red; text-decoration: underline"> hong@dankook. ac. kr </email> </student> </students> 10
Section 03 CSS 사용법 외부 스타일시트를 연결하는 예: 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> 11
Section 03 CSS 사용법 3. 외부 스타일시트를 연결하는 예: 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 version='1. 0' encoding='euc-kr'? > xml_link. xml <? xml-stylesheet type="text/css" href="xml_link. css"? > <students> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </student> </students> 12
Section 03 CSS 사용법 @import 명령을 사용한 예: HTML 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_import 2. html 14
Section 03 CSS 사용법 @import 명령을 사용한 예: XML name {font-style : normal; color : blue} xml_import. css age {font-style : italic; color : red} address {text-decoration: underline; color : green} xml_import. xml <? xml version='1. 0' encoding='euc-kr'? > <? xml-stylesheet type="text/css" href="#importstyle"? > <students> <style id="importstyle"> <!-- @import url(xml_import. css); email {font-style : italic; color : blue} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </student> </students> 15
Section 03 CSS 사용법 여러 CSS 적용 방법을 사용한 예: HTML <HTML> css_mix. 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> <H 3 style="font-style: italic; color: blue"> 문자를 기울임꼴에 파란색으로 표현 </H 3> <P> <H 5>Link에 의한 CSS 적용 </H 5> </BODY> </HTML> 16
Section 03 CSS 사용법 여러 CSS 적용 방법을 사용한 예: XML <? xml version='1. 0' encoding='euc-kr'? > xml_mix. xml <? xml-stylesheet type="text/css" href="xml_mix 1. css"? > <? xml-stylesheet type="text/css" href="#mixstyle"? > <students> <style id="mixstyle"> <!-- @import url(xml_mix 2. css); address {font-style : italic; color : blue} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email STYLE="color: red; text-decoration: underline"> hong@dankook. ac. kr </email> </student> </students> 17
Section 04 CSS 문법 문맥 선택자 사용 예 <students> <name> 단국대학교 </name> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </student> </students> students. xml name { color : red } student name { color : blue; font-style : italic } students. css name { color : red } students 2. css student , name { color : blue; font-style : italic } 21
Section 04 CSS 문법 클래스를 선택자로 사용한 예: HTML <HTML> <HEAD><TITLE>클래스 사용</TITLE> <STYLE TYPE="text/css"> H 1. class 1 { color: red } H 1. class 2 { color: blue } </STYLE> </HEAD> <BODY> <H 1 class=class 1>빨간색으로 문자 표현</H 1> <H 1 class=class 2>파란색으로 문자 표현</H 1> </BODY> </HTML> class. htm 22
Section 04 CSS 문법 클래스를 선택자로 사용한 예: XML <? xml-stylesheet type="text/css" href="#class"? > xml_class. xml <students> <style id="class"> <!-- name. class 1 { color: red } name. class 2 { color: blue } name. class 3 { color: green } --> </style> <student> <name class="class 1"> 고소영 </name> </student> <name class="class 2"> 고소영 </name> </student> <name class="class 3"> 고소영 </name> </students> 23
Section 04 CSS 문법 ID를 선택자로 사용 CSS 규칙에 특정 ID를 부여해서 쉽게 적용하는 방법 형식 #CSS_ID { 선언 } ID를 선택자로 사용한 예 1 selector_id. xml <? xml-stylesheet type="text/css" href="#idstyle"? > <students> <style id="idstyle"> <!-- #cssid 1 {font-style : normal ; color : blue} #cssid 2 {font-style : italic ; color : red} --> </style> <student> <name id="cssid 1"> 홍 현 </name> <age id="cssid 2"> 30 </age> <address id="cssid 1"> 서울 면목동 </address> <email id="cssid 2"> hong@dankook. ac. kr </email> </students> 24
Section 04 CSS 문법 ID 를 선택자로 사용한 예 2 selector_id 2. xml <? xml-stylesheet type="text/css" href="#idstyle"? > <students> <style id="idstyle"> <!-- #cssid 1 {font-style : normal ; color : blue} age#cssid 1 {font-style : italic ; color : red} --> </style> <student> <name id="cssid 1"> 홍 현 </name> <age id="cssid 1"> 30 </age> </students> 25
Section 04 CSS 문법 네임스페이스 참조 선택자 정의에서 콜론(: ) 앞에 역슬래시()를 반드시 삽입 네임스페이스 참조를 사용한 예 1 st: sid {font-style : normal; color : green} st: name {font-style : normal; color : blue} css_namespace. css bk: name {font-style : italic; color : red} bk: price {font-style : italic; color : blue} bk: publishing {font-style : italic; color : yellow} <? xml version='1. 0' encoding='euc-kr'? > css_namespace. xml <? xml-stylesheet type="text/css" href="css_namespace. css"? > <st: students xmlns: st="http: //www. dankook. ac. kr/2003/students" xmlns: bk="http: //www. hanbit. co. kr/xml/"> <st: student> <st: sid>100</st: sid> <st: name>홍 현 </st: name> <st: book> <bk: name> XML 활용백서 </bk: name> <bk: price unit="원"> 23000 </bk: price> <bk: publishing> 한빛출판사 </bk: publishing> </st: book> </st: student> </st: students> 26
Section 04 CSS 문법 네임스페이스 참조를 사용한 예 2 name_space. xml <? xml version='1. 0' encoding='euc-kr'? > <? xml-stylesheet type="text/css" href="name_space. css"? > <address_list> <address> 서울 면목동 </address> <Address> 대전 면목동 </Address> <ADDRESS> 부산 면목동 </ADDRESS> </address_list> address {font-style : normal; color : blue} Address {font-style : italic; color : red} ADDRESS {font-style : italic; color : green} name_space. css 27
Section 04 CSS 문법 네임스페이스 참조를 사용한 예 3 name_space. xml <? xml version='1. 0' encoding='euc-kr'? > <? xml-stylesheet type="text/css" href="name_space 2. css"? > <address_list xmlns: s="http: //www. dankook. ac. kr/s/" xmlns: t="http: //www. dankook. ac. kr/t/" xmlns: b="http: //www. dankook. ac. kr/b/"> <s: address> 서울 면목동 </s: address> <t: Address> 대전 면목동 </t: Address> <b: ADDRESS> 부산 면목동 </b: ADDRESS> </address_list> name_space 2. css s: address {font-style : normal; color : blue} t: Address {font-style : italic; color : red} b: ADDRESS {font-style : italic; color : green} 28
Section 04 CSS 문법 이미지 사용 예 1 xml_image. xml <? xml-stylesheet type="text/css" href="#imagestyle"? > <students> <style id="imagestyle"> <!-- student {background-image: url(bg. gif); font-style : italic; color : yellow} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </student> </students> 29
Section 04 CSS 문법 이미지 사용 예 2 xml_image 2. xml <? xml-stylesheet type="text/css" href="#imagestyle"? > <students> <style id="imagestyle"> <!-- name {background-image: url(bg. gif); font-style : italic; color : yellow} address {background-image: url(bg 2. gif); font-style : italic; color : red} --> </style> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </student> </students> 30
Section 04 CSS 문법 그룹핑 스타일시트 크기를 줄이기 위해 선택자를 컴마(, )로 분리해서 그룹 으로 묶은 목록 형식 1 name, address, email{font-style: italic; color : yellow } 형식 2 name { font-weight: bold; font-size: 12 pt; line-height: 14 pt; font-family: helvetica; font-variant: normal; font-style: italic; } 31
Section 04 CSS 문법 그룹핑 사용 예 <? xml-stylesheet type="text/css" href="#idstyle"? > grouping. xml <students> <style id="idstyle"> <!-- name { font: bold 12 pt/14 pt helvetica} address, email { font: bold 16 pt/18 pt helvetica} --> </style> <student> <name> 홍 현 </name> <address> 서울 면목동 </address> <email> hong@dankook. ac. kr </email> </students> 32
Section 04 CSS 문법 가상 클래스와 가상 요소 사용 예 1 <HTML> anchor. html <HEAD> <STYLE type="text/css"> A: link { color: red } A: visited { color: blue } A: active { color: black } A: hover { color: green } </STYLE> </HEAD> <BODY> name : 고소영 address : 서울 압구정 E-mail: <A HREF="mailto: gosoyoung@dankook. ac. kr">gosoyoung@dankook. ac. kr</A> </BODY> </HTML> 33
Section 04 CSS 문법 가상 클래스와 가상 요소 사용 예 2 <HTML> <HEAD> <STYLE type="text/css"> A. class 1: link { color: red } A. class 2: visited { color: blue ; font-weight: bold} A. class 3: active { color: black } A. class 4: hover { color: green ; font-style: italic} </STYLE> </HEAD> <BODY> name : 고소영 address : 서울 압구정 E-mail: <A class="class 1" HREF="mailto: go@dankook. ac. kr"> go@dankook. ac. kr</A> <hr> name : 김현주 address : 서울 잠원동 E-mail: <A class="class 2" HREF="mailto: kim@dankook. ac. kr"> kim@dankook. ac. kr</A> <hr> name : 심은하 address : 서울 홍제동 E-mail: <A class="class 3" HREF="mailto: sim@dankook. ac. kr"> sim@dankook. ac. kr</A> <hr> name : 이효리 address : 서울 신사동 E-mail: <A class="class 4" HREF="mailto: lee@dankook. ac. kr"> lee@dankook. ac. kr</A> </BODY> </HTML> anchor 4. html 34
Section 04 CSS 문법 가상 클래스와 가상 요소 사용 예 3 <HTML> first_line. html <HEAD> <STYLE type="text/css"> P: first-letter { color: red; font-weight: bold; texttransform: uppercase } P: first-line { color: blue; font-style: italic } </STYLE> </HEAD> <BODY> <p>name : 고소영 <p>address : 서울 압구정 <p> E-mail: <A HREF="mailto: go@dankook. ac. kr"> go@dankook. ac. kr</A> </P> </BODY> </HTML> 35
Section 04 CSS 문법 CSS 적용 우선순위를 살펴보는 예제 name {font-style: italic ; color : green} xml-priority. css <? xml-stylesheet type="text/css" href="xml_priority. css"? > <? xml-stylesheet type="text/css" href="#priority"? > <students> <style id="priority"> <!-- name {font-style: italic ; color : green} address {font-style : italic ! important ; color : green ! important} --> </style> <student> <name STYLE="font-style: normal ; color : blue" > 홍 현 </name> <age> 30 </age> <address STYLE="font-style: normal ; color : blue"> 서울 면목동 </address> <email STYLE="color: red; text-decoration: underline"> hong@dankook. ac. kr </email> </student> </students> 37
Section 04 CSS 문법 디스플레이 속성 사용 예 xml_display. css student {display : block; margin-top: 20 pt ; font-size : 16 pt } name { font-style: italic ; color : green} age { font-style: italic ; color : red} address { font-style: normal ; color : blue} email { display : none; color : aqua} xml_display. xml <? xml-stylesheet type="text/css" href="xml_display. css"? > <students> <student> <name> 홍 현 </name> <age> 30 </age> <address> 서울 면목동 </address> <email> <homeemail>hong@dankook. ac. kr</homeemail> <officeemail>hong@dku. edu</officeemail> </email> </student> </students> 39
Section 04 CSS 문법 visibility 속성값 관련 예제 student {display : block; margin-top: 20 pt ; font-size : 16 pt } xml_display 2. css name { font-style: italic ; color : green} age { visibility : hidden; font-style: italic ; color : red} address {visibility : hidden; font-style: normal} city { visibility : visible; color : blue} zipcode { visibility : visible; color : blue} email { visibility : hidden; color : blue} officeemail { visibility : visible; color : red} <? xml-stylesheet type="text/css" href="xml_display 2. css"? > xml_display 2. xml <students> <student> <name> 홍 현 </name> <age> 30 </age> <address> <nation> 한국 </nation> <city> 서울 </city> <zipcode> 123 -456 </zipcode> </address> <email> <homeemail>hong@dankook. ac. kr</homeemail> <officeemail>hong@dku. edu</officeemail> </email> </student> </students> 41
Section 04 CSS 문법 속성 구성과 속성 효과값 관련 예제 student { display : list-item; list-style-type: decimal; list-style-position: outside; margin-left: 30 pt; margin-top: 20 pt ; font-size : 13 pt } name { font-style: italic ; color : green} address { color : blue ; font-weight: bold} email { font-style: italic ; color : black} xml_liststyle. css <? xml-stylesheet type="text/css" href="xml_liststyle. css"? > <students> <student> <name> 고소영 </name> <address> 서울 압구정 </address> <email> go@dankook. ac. kr </email> </student> <name> 송혜교 </name> <address> 서울 잠원동 </address> <email> song@dankook. ac. kr </email> </student> <student> <name> 김현주 </name> <address> 서울 한남동 </address> <email> kim@dankook. ac. kr </email> </student> </students> xml_liststyle. xml 43
Section 04 CSS 문법 글자 속성 속성명 설명 사용 방법 font-family 사용되는 글꼴을 표현 NAME {font-family: Arial} font-size 글자크기를 절대값, 상대값, 백분율로 표현 NAME {font-size: 12 pt} NAME {font-size: 150%} NAME {font-size: small} font-style 글자 속성을 지정 보통 문자로 표시할지, 기울임꼴로 표시할지 제어 NAME {font-style: italic} NAME {font-style: oblique} NAME {font-style: normal} font-weight 글자 굵기를 표현 NAME {font-weight: normal} NAME {font-weight: bolder} NAME {font-weight: lighter} NAME {font-weight: 200} font-variant 글자를 대소문자로 표현 NAME {font-variant: small-caps} NAME {font-variant: normal} font 모든 글자 모양을 모아서 한번에 표현 NAME {font : normal bold 12 pt/16 pt Arial} NAME {font-size: 12 pt; font-weight: bold } 44
Section 04 CSS 문법 글자 속성 관련 예 <? xml-stylesheet type="text/css" href="#font"? > xml_font. xml <students> <style id="font"> <!-- name { font-family: serif; font-size: 12 pt; font-weight: 300} address { font-family: sans-serif; font-size: 150%; font-weight: 400} email { font-family: cursive; font-size: large; font-weight: 500} job { font-family: fantasy; font-size: small; font-weight: 600} book { font-family: monospace; font-size: medium; font-weight: 700} --> </style> <student> <name> Go Soyong </name> <address> Seoul </address> <email> go@dankook. ac. kr </email> <job> student </job> <book> XML </book> </students> 45
Section 04 CSS 문법 색상과 배경 속성 속성명 설명 사용 방법 color 요소의 텍스트 색을 지정 NAME {color : red} NAME {color : rgb(255, 0, 0)} NAME {color : rgb(100%, 0%)} NAME {color : #FF 0000} background-color 요소의 배경색을 지정 NAME {background-color : red} NAME {background-color : #FF 0000} NAME {background-color : transparent} background-image 배경 이미지를 표현 NAME {background-image: url(image. gif)} NAME {background-image: none} background-repeat 배경 이미지를 반복적으로 사용할 것인지 지정 NAME {background-repeat: repeat} /*기본값*/ NAME {background-repeat: repeat-x} NAME {background-repeat: repeat-y} NAME {background-repeat: no-repeat} 46
Section 04 CSS 문법 색상과 배경 속성 속성명 설명 사용 방법 background-attachment 배경 이미지가 스크롤과 함께 이동할 것인지를 지정 NAME {background-attachment: scroll} NAME {background-attachment: fixed} background-position 배경색이나 배경 이미지의 시작 위치를 지정 NAME {background-position: 100%} NAME {background-position: right top } /* 100% 0% */ background 배경 속성을 모아서 지정할 수 있으며, 순서는 상관 없다. NAME {background: url(image. gif) red repeat scroll} 47
Section 04 CSS 문법 색상과 배경 속성 관련 예 xml_background. xml <? xml-stylesheet type="text/css" href="#background"? > <students> <style id="background"> <!-- name, address, email, job, book {display: block; color: rgb(255, 255)} student { background-color: #ffffff; background-image: url(bg. gif); background-repeat: repeat; background-attachment: scroll; background-position: 100% } email { background-image: url(bg 2. gif)} --> </style> <student> <name> 고소영</name> <address> 서울 </address> <email> go@dankook. ac. kr </email> <job> 연예인 </job> <book> XML 활용백서 </book> </student> </students> 48
Section 04 CSS 문법 문자 간격과 맞춤 속성 속성명 설명 사용 방법 letter-spacing 요소 텍스트의 문자 사이 간격을 늘이거나 줄일 수 있다. NAME {letter-spacing: . 25 em} NAME {letter-spacing: -. 5 pt} NAME {letter-spacing: 0 cm} word-spacing 전체 단어 사이의 간격을 늘이거나 줄일 수 있다. NAME {word-spacing: 2 em} NAME {word-spacing: 3 cm} vertical-align 위첨자 또는 아래 첨자 생성 NAME {vertical-align: baseline} /* 기본값 */ NAME {vertical-align: sub} NAME {vertical-align: super} NAME {vertical-align: text-top} NAME {vertical-align: text-bottom} NAME {vertical-align: top} NAME {vertical-align: bottom} text-decoration 요소 텍스트에 다양한 타입의 선을 그릴 수 있다 NAME {text-decoration: underline} NAME {text-decoration: overline} 49
Section 04 CSS 문법 문자 간격과 맞춤 속성 속성명 설명 사용 방법 text-align 요소 텍스트의 수평 맞춤을 제어 NAME {text-align: left} NAME {text-align: right} NAME {text-align: center} NAME {text-align: justify} text-indent 요소 텍스트의 첫 줄에 들여 쓰기 NAME {text-indent: 3 em} NAME {text-indent: -2 em} NAME {text-indent: 50%} line-height 요소 텍스트의 기본 선 사이의 간격을 조정 NAME {line-height: normal} /* 기본값 */ NAME {line-height: 3} NAME {line-height: 3. 5 em} NAME {line-height: 120%} text-transform 요소 텍스트의 대. 소문자를 제어 NAME {text-transform: uppercase} NAME {text-transform: lowercase} 50
Section 04 CSS 문법 문자 간격과 맞춤 속성 관련 예 <? xml-stylesheet type="text/css" href="#text"? > <students> <style id="text"> <!-- name, address, job, book, office, phone {display: block} name { letter-spacing : 3 cm} address { word-spacing : 2 em} job { text-align : center} book { text-indent : 20%} office { text-transform : uppercase} phone { text-decoration : line-through } --> </style> <student> <name> 고소영</name> <address> 서울 서초구 잠원동 </address> <job> 연예인 </job> <book> XML 활용백서 </book> <office> dankook university </office> <phone> 02 -1234 </phone> </student> </students> xml_text. xml 51
Thank you
- Doctype html html head
- Doctype html html head
- Slidetodoc.com
- Bhtml?title=
- 12.html?title=
- Css comprises of style rules that are interpreted
- Css button style generator
- Td vs th
- Html feladatok megoldással
- Html css
- Language html css
- Css html
- Q.html
- Html css
- Singkatan css html
- Language css
- Html css
- Html css nedir
- Lexique css
- Html link syntax
- Html body css
- Dividing head calculation formula
- The attacking firm goes head-to-head with its competitor.
- Tagi html
- The head of a moving head disk
- Neck parts
- What is a tonic syllable
- Flooded suction vs suction lift
- Patientsite.com
- Pre-head head tonic syllable tail
- Moving head disk mechanism
- Apa format in powerpoint
- Head style
- Head style
- Head body html
- Script html head
- 01.html?title=
- Html head title body
- Html head title body
- .html?title=
- Fungsi tag pada html
- Html head body title
- Document queryselector
- Xmldom
- Doctype php
- Html head body
- Slidetodoc.com
- Html head font
- Html head
- 다운로드 링크 만들기
- Full block style with mixed punctuation
- Is persuasive writing formal or informal
- Formal vs informal writing style