슬라이드 1

Size: px

Start display at page:

Download "슬라이드 1"

한나 서문
5 years ago
Views:

1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성

2 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2

3 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3

4 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음 DHTML, FLASH 를이용한동적인 HTML 작성 사용자에게동영상및배경음악등을들려주기위한멀티미디어파일을홈페이지에포함하는경우가급증 HTML 에서는멀티미디어파일을문서에포함하기위한다양한방법을제공하고있음 4

5 3.1 멀티미디어 멀티미디어파일을삽입하는방법 단순파일링크 ( 멀티미디어파일을사용자가다운로드받음 ) 문서자체에서해당컨텐츠를실행 태그사용법 <A HREF = URL > 링크될문자열 </A> ( 다운로드방식 ) <EMBED SRC= URL > ( 플레이어방식 ) 본장에서는플레이어방식에대해서만다룸 5

6 3.1.1 배경음악삽입하기 <EMBED> 태그의속성 속 성 설 명 SRC = URL or 파일경로 재생파일의위치를지정 WIDTH = 00px 플레이어의가로크기지정 HEIGHT = 00px 플레이어의세로크기지정 LOOP = TRUE or FALSE 연속재생여부를지정 AUTOSTART = TRUE or FALSE 자동시작여부를지정 HIDDEN = TRUE or FALSE 화면에나타낼것인가를지정 VOLUME = 1 ~ 100 초기볼륨을지정 6

7 3.1.1 배경음악삽입하기 배경음악삽입예제 예제 3-1 Embed.html <HTML> <HEAD><TITLE> 배경음악삽입하기 </TITLE></HEAD> <BODY> Emi Hujita - Moon River <EMBED SRC ="SRC/BG.MP3" AUTOSTART = "TRUE" HIDDEN = "TRUE" LOOP = "TRUE"> </BODY> </HTML> 최근악성코드를막기위해 ACTIVE X 설치 / 엑서스동의를묻는다동의하면배경음악을들을수있음 또한재생할파일이모두다운로드된후재생되기때문에음악파일의크기가너무크면재생되기까지대기시간이증가함 7

8 3.1.2 동영상삽입하기 최근 UCC 에대한관심이증가하면서 HTML 문서에동영상을삽입하는경우가크게증가하고있음 (User Created Contents) 배경음악과마찬가지로 <EMBED> 태그를사용하면쉽게 HTML 문서에포함할수있음 하지만최근많이이용되는 mncast, pandoratv 등과는달리사용자의 PC 에다운로드한후재생하는방식임 mncast, pandoratv 등은스트리밍방식 8

9 3.1.2 동영상삽입하기 동영상삽입예제 예제 3-2 Embed-movie.html <HTML> <HEAD><TITLE> 동영상삽입하기 </TITLE></HEAD> <BODY> 이승환 - 어떻게사랑이그래요 <BR> <EMBED SRC ="SRC/LSH.wmv" LOOP = "TRUE"> </BODY> </HTML> 배경음악과마찬가지로엑서스에동의하고동영상다운로드가종료된후플레이됨 9

10 3.2 스타일시트 (Style Sheet) 스타일시트란구조화된문서를작성하기위해문서의전체적인레이아웃, 글꼴, 문자크기등을미리정의해놓고제작되는모든문서가이정보를이용하여정해진규격대로문서를작성하기위해사용됨 일반적으로스타일시트를사용하기위해 CSS (Cascading Style Sheet) 문법을사용함 CSS 는많은문서를작성하거나홈페이지등을제작할때매우중요한요소임 10

11 3.2.1 CSS CSS 에서스타일시트를적용하기위해서 3 가지방법을사용할수있음 내장스타일시트 외부스타일시트 인라인스타일시트 정의방법에따라다음과같이나누어볼수있음 기본스타일시트정의 고급스타일시트정의 11

12 3.2.1 CSS 내장스타일시트 내장스타일시트란스타일시트를 HTML 문서에직접삽입하는방식을말함 예제 3-3 Embedded-style.html <HTML><HEAD> <TITLE> 내장스타일 </TITLE> <STYLE> H1 {BACKGROUND : GREEN} FONT {COLOR : RED} </STYLE></HEAD> <BODY> <H1> 배경색이자동으로녹색 </H1> <FONT> 속성을지정하지않아도빨간글씨 </FONT> </BODY></HTML> 12

13 3.2.1 CSS 외부스타일시트 (1) 외부스타일시트는마치프로그래밍언어에서 heder파일을 include 시키는것과같이미리스타일을정의하고파일로만들어놓고필요할때 HTML 문서에적용하는방법임 style.css H1 {BACKGROUND : GREEN} FONT {COLOR : RED} 위와같이스타일파일을미리만들어놓고문서에삽입함 13

14 3.2.1 CSS 외부스타일시트 (2) 예제 3-4 Linked-Style.html <HTML> <HEAD> <TITLE> 외부스타일 </TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF ="SRC/style.css"> </HEAD> <BODY> <H1> 배경색이자동으로녹색 </H1> <FONT> 속성을지정하지않아도빨간글씨 </FONT> </BODY> </HTML> 여러문서의스타일을일괄적으로변경할때매우편리함 14

15 3.2.1 CSS 인라인스타일시트 인라인스타일시트란일반적으로특정부분에 1회성으로다른스타일을적용하고싶을때주로사용하게됨 예제 3-5 Inline-Style.html <HTML><HEAD><TITLE> 인라인스타일 </TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF ="SRC/style.css"> </HEAD> <BODY> <H1 STYLE ="BACKGROUND : BLUE"> 배경은파란색 </H1> <H1> 배경은녹색 </H1> </BODY> </HTML> 15

16 3.2.1 CSS 예제결과확인 내장스타일시트외부스타일시트인라인스타일시트 내장과외부스타일은그표현방법이다를뿐결과물은같음 인라인스타일의경우배경을일시적으로파란색으로바꾸는데인라인스타일을적용하였음 16

17 3.2.1 CSS 스타일정의방법 일반적으로스타일은다음과같이정의한다. 태그 { 속성 : 속성값 } 태그 { 속성1 : 속성값 ; 속성2 : 속성값 ; 속성3 : 속성값 ;} 태그1, 태그2 { 속성 : 속성값 } 속성은한개, 또는다수의속성을설정할수있으며, 한번에여러개의태그에동일한속성값을적용할수도있음 일반적인적용방법은위에서이미사용하였음 (p13) 17

18 3.2.1 CSS 고급스타일정의방법 하나의태그에여러가지스타일을만들고싶을때사용, 쉽게설명하면제목은붉은글씨, 내용은파란글씨로문서를작성하고싶을때, <FONT> 태그에다중으로속성을적용할수있음 정의 : 태그명. 클래스명 { 속성 : 속성값 } 적용 : < 태그명 CLASS= 클래스명 >~</ 태그명 > 예를통하여사용법에대해알아보자 18

19 3.2.1 CSS 고급스타일시트정의예제 예제 3-6 ClassStyle.html <HTML> <HEAD><TITLE> 다중속성 </TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF ="SRC/class-style.css"> </HEAD> <BODY> <H1> 기본스타일사용 </H1> <H1 CLASS="YELLOW"> YELLOW CLASS를사용 </H1> <FONT CLASS="REDTXT"> 전역 REDTXT CLASS 사용 </FONT><BR> <P CLASS="BOLDTXT"> BOLDTXT CLASS를사용 </P> <P> 일반적인 P 태그 </P> <FONT CLASS="REDTXT"> 전역 REDTXT CLASS 사용 </FONT><BR> <FONT CLASS="YELLOW"> H1 태그의 YELLOW CLASS 사용 </FONT> </BODY></HTML> 19

20 3.2.1 CSS 고급스타일시트정의예제 class-style.css H1 {BACKGROUND : GREEN} H1.YELLOW {BACKGROUND : YELLOW; COLOR : BLUE} FONT {COLOR : BLUE} P.BOLDTXT {FONT-WEIGHT : BOLD}.REDTXT {COLOR : RED}.GREENTXT {COLOR : GREEN} 20

21 3.2.2 CSS 속성 FONT 속성 텍스트문자속성 색, 배경관련속성 BORDER 속성 목록관련속성 21

22 3.2.2 CSS 속성 FONT 속성 폰트속성은문서에작성되는폰트의세부속성을지정하기위해사용됨태그안에사용되는모든폰트는폰트속성에서적용된값에따라적용됨 font-family font-style font-variant font-weight font-size 속성설명글자체를지정하는속성글자모양을지정하는속성대문자크기를표현하는속성글자의굵기를지정하는속성글자의크기를지정하는속성 22

23 3.2.2 CSS 속성 텍스트문자속성 텍스트문자속성이란텍스트의좌우정렬, 들여쓰기, 자간등을조절하는데사용. 즉, 문장에관련된속성들을말함속성설명 text-decoration 문자열, 글자를꾸미는속성 text-align 글자의가로정렬을지정하는속성 vertical-align 글자의세로정렬을지정하는속성 text-indent 문장의들여쓰기를지정하는속성 text-spacing 문자간간격을지정하는속성 ( 자간 ) word-spacing 단어간간격을지정하는속성 line-height 줄간격을지정하는속성 23

24 3.2.2 CSS 속성 색과배경속성 각태그에서사용되는문자의색상이나배경의색, 또는이미지를결정하는속성속성설명 color 색상을지정하는속성 background-color 바탕색을지정하는속성 background-image 바탕이미지를지정하는속성 background-repeat 바탕이미지의반복여부를지정 background-attachment 바탕이미지의고정여부를지정 background-position 바탕이미지의시작위치를지정 24

25 3.2.2 CSS 속성 BORDER 속성 BORDER 속성이란, 테이블, FRAME 등의외각선, 테이블의 여백, 및선색등을지정하는속성임 속 성 설 명 border-style 테두리의모양을지정하는속성 border-width 테두리의굵기를지정하는속성 border-color 테두리의색상을지정하는속성 margin 테두리의여백을지정하는속성 padding 테두리의안쪽여백을지정하는속성 25

26 3.2.2 CSS 속성 목록관련속성 파워포인트등에서쉽게접할수있는들여쓰기및말머리기능할사용할수있게해주는목록태그의말머리및들여쓰기정도를지정하는속성임 속 성 설 명 list-style-type 말머리의모양을지정하는속성 list-style-position 각목록의들여쓰기 / 내어쓰기를지정 list-style-image 말머리이미지를지정하는속성 26

27 3.2.2 CSS 속성 각각의속성은비슷하면서도다른내용을가지고있음 속성의이름과방법을모두외울필요는없으나자주사용하는속성의경우그사용법과결과는기억하여사용해야함 세부적인예제는실습을통해알아보도록하겠음 27

28 3.3 레이어 (Layer) 포토샵과같은이미지툴에서쉽게들을수있는단어로마치투명셀로판지여러장을겹쳐하나의그림이되도록하는방법을말함 HTML 문서도이와같은레이어를생성하여비슷한효과로문서를작성할수있음 레이어의생성과, 레이어의배치에대해알아보자 28

29 3.3.1 레이어의생성 레이어생성 레이어는 <DIV> 태그를이용하여생성함 <DIV> 는많은속성값을가지고있어일반적으로 CSS에미리정의해놓고사용하는경우가많음 생성방법 <DIV><SPAN> ~ </SPAN></DIV> <DIV> 태그안의내용은레이어로표현된다. 29

30 3.3.2 레이어의위치지정 레이어위치 생성된레이어는위치를지정할수있음 위치지정방식은절대위치와상대위치로나눌수있음 레이어의위치는일반적으로 CSS로정의해놓고사용한다. <STYLE> #ID { position : (absolute or relative); 위치지정 (left, top) : (pt, px, in, cm); 크기속성 (width, height) : (pt, px, in, cm); } </STYLE> 30

31 3.3.2 레이어의위치지정 레이어위치 ( 절대위치 ) 예제 3-17 Layer-absolute.html <HTML> <HEAD><TITLE> 레이어절대위치 </TITLE> <STYLE> #layer1 {position : absolute; left : 300; top : 50; width : 600; background-color : blue;} </STYLE></HEAD> <BODY> <BR> 레이어를어디에서생성하건 <BR><BR> <BR> LEFT : 300, TOP : 50 위치에레이어가생성된다. <DIV ID="layer1"> <p><span> 이곳은레이어구역입니다.</SPAN></p> </DIV> </BODY></HTML> 절대위치는창의왼쪽위를 (0,0) 으로계산된위치를말한다. 31

32 3.3.2 레이어의위치지정 레이어위치 ( 상대위치 ) 예제 3-18 Layer-relative.html <HTML><HEAD><TITLE> 레이어절대위치 </TITLE> <STYLE> #layer1 {position : relative; left : 10; top : 10; width : 300; background-color : blue;} #layer2 {position : relative; left : 10; top : 10; width : 300; background-color : red;} </STYLE></HEAD> <BODY> <BR> 상대위치로레이어배치하기 <DIV ID="layer1"><p><SPAN> Layer 1</SPAN></p></DIV> <BR> 레이어를생성하는위치가중요하다. <DIV ID="layer2"><p><SPAN> Layer 2</SPAN></p></DIV> </BODY></HTML> 상대위치는레이어생성을선언하는부분을기준으로위치를계산한다. 32

33 3.3 레이어 레이어 자바스크립트와 ASP를통해레이어를사용한동적인홈페이지만들기등을배우게될것임 레이어는절대위치상대위치를계산하여정확한위치에배치시키는것이가장중요한요소임 또한실습을통해간단한레이어응용에대해알아볼것임 33

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width