PowerPoint 프레젠테이션

Size: px
Start display at page:

Download "PowerPoint 프레젠테이션"

Transcription

1 기본과활용

2 목차 1. HTML와 CSS 시작 2. HTML 기본문서작성 3. 텍스트, 목록, 하이퍼링크 4. 박스, 표 5. 이미지와멀티미디어 6. 입력폼양식

3 웹개발환경 웹브라우저종류 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 웹개발편집기 메모장 (Notepad) 노트패드 ++(Notepad++) 아크로에디트 (AcroEdit) 드림위버 (Dreamweaver)

4 1. HTML5 특징 Hyper Text Markup Language 의약자 웹문서를만들기위해약속된언어

5 HTML5 시작 시작과종료태그 태그중첩 들여쓰기와줄바꿈 대소문자구분 태그내글자의공백처리 태그속성 < 태그이름속성 = 값 > <p> 시작과종료 </p> <p> <b> 태그중첩작성 </b> </p> <img src= rose.jpg >

6 HTML 실행 html 문서기록과저장 html 문서실행 html 문서편집 <html> <head> <title> 문서제목 </title> </head> <body> <p> 문장 1 </p> <p> 문장 2 </p> 문장 3 </body> </html>

7 CSS3 란? Cascading Style Sheet의약자 HTML 구조안에서구현 HTML로작성된태그의속성처럼적용 글자와박스의그림자효과, 둥근테두리, 이미지테두리, 불투명도적용 <head> <style type= text/css > p {color:blue;} </style> </head> <body> <p > 문장 1 </p> <p > 문장 2 </p> 문장 3 </body>

8 CSS3 작성과활용 참고 : exe1.html <p style= color:blue > 방법 1 태그안에직접스타일입력 </p> <style> 태그이름.class 이름 { css 스타일 ; }.class 이름 { css 스타일 ; } #id 이름 { css 스타일 ; } </style> 별도의 CSS 파일로저장하여연결하기 <link rel= styleheet type= text/css href= style.css /> 방법 2 방법 3

9 2. HTML 기본문서작성 <html> <head> <title> 문서의기본구조이해 </title> </head> <body> 본문의내용을입력합니다. </body> </html>

10 head 영역 <meta> : 문서를이해하기위한기본정보 참고 : exe2.html 속성 http-equiv name content 내용동적인페이지전환효과를위해정의항목의이름정의항목에대한값의미 <title> ~ </title> : 문서의제목 <meta http-equiv= 항목이름 name= 정보이름 content= 값 > <meta http-equiv= author content= 유선주강사 >

11 body 영역 태그이름 <h1> ~ <h6> <p> <div>, <span> <br> <hr> <blockquote> 설명단락의제목, 숫자가낮을수록큰제목단락구분내용영역을구분, div : 블록단위, span : 줄단위줄바꿈수평선인용문정의 참고 : exe3.html, exe3-1.html, exe3-2.html

12 문서배경색상 background-color: 색상코드 ; 예 : body { background-color:#c0c0c0; } 색상지정방법 : 16진수 (#ff0000), RGB(255,0,0), 색상이름 (RED) 배경투명도지정 : 0~1 사이값, 값이클수록불투명 예 : p {background-color:rgba(255,0,0,0.5);} 참고 : exe4.html

13 문서배경이미지 background-image:url( 이미지경로 ); 배경이미지반복 : background-repeat(repeat-x, repeat-y, no-repeat) 배경이미지크기조절 : background-size: 이미지크기 문서제목 <h> 등에배경이미지적용 h1 { background: url(./image/bg.jpg ) no-repeat; } 참고 : exe4-1.html, exe4-2.html

14 3. 텍스트, 목록, 하이퍼링크 태그이름 <i>, <em> <b>, <strong> <u>, <ins> <del> <sup>, <sub> 텍스트를이탤릭체로표시, 기울임꼴텍스트를굵게강조텍스트에밑줄표시텍스트에가로줄 ( 취소선 ) 표시위첨자, 아래첨자표시 설명 <ol> type 값 : decimal, lower-alpha, lowerroman, upper-alpha, upper-roman <ul> type값 : circle, disc, square 목록태그이름 설명 옵션 <ol> 순서있는목록 type(1, A, a, i), start, reversed <ul> 순서없는목록 <dl> 정의목록, 항목과내용 <dl> <dt> 항목 </dt> <dd> 설명 </dd> </dl> 참고 : exe5.html, exe5-1.html, exe5-2.html

15 목록태그로가로메뉴만들기.menu ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }.menu { width:800px; text-align: center; }.menu ul li a { text-decoration:none; color:#eee; }.menu ul { border-top:1px solid #fff; border-bottom:1px solid #fff; padding:10px 0; } /* 메뉴영역을 inline 선언가로배치 */ /* 메뉴의글자를모두대문자로표시 */ /* 메뉴간의간격을 10px로지정 */ /* 글자간격을 10px로지정 */ /* 메뉴영역의너비 800px, 가운데정렬 */ /* 글자색상과밑줄속성제거 */ /* 위쪽여백을 10, #eee 색상의구분선삽입 */ 참고 : exe5-3.html

16 하이퍼링크 웹페이지내에서다른사이트혹은문서다른위치로연결 <a>~</a> 참고 : exe6.html 속성 설명 클릭했을때실행할웹페이지, 실행하지않고자할경우 # 으로정의 href 상대경로 :./image/exe.html 절대경로 : target 클릭했을때웹페이지가실행되는방법, _blank( 새창 ), _self( 현재창 ) 기본형식 <a href= 링크페이지 target= 실행대상 > 링크될텍스트 </a>

17 하이퍼링크와책갈피 한페이지에서원하는영역으로이동 <a name= 책갈피이름 > <a href= # 책갈피이름 > 참고 : exe7.html

18 텍스트 CSS 스타일 font-family : 텍스트글꼴 serif, sans-serif, cursive, fantasy, monospace ( 항상지원 ) 글꼴이컴퓨터에설치되어있지않으면기본글꼴로적용 font-family: Arial, 굴림, serif; font-size : 텍스트크기 크기값 (em, pt, px, %), inherit, xx-smail, x-smaill, small, medium, large, x-large, xx-large, smaller, larger <h1> { font-size: medium; } font-style : 텍스트스타일 : normal, italic, oblique, inherit( 주변의텍스트동일한스타일로설정 ) font-weight : 텍스트굵기지정, font-variant : 텍스트대소문자지정 font : 통합지정, 글꼴, 크기, 굵기등을순서대로공백으로구분하여지정 p { font: 20px Arial, sans-serif; } 참고 : exe8.html

19 단락 CSS 스타일 color : 텍스트색상 body { color: red; } 또는 h1 { color: RGB(0,255,0); } 또는 16 진수표현 text-shadow : 텍스트그림자효과 h-shadow, v-shadow, blur, color line-height : 줄간격지정 p { line-height: 12pt; font-size: 10px; } text-align : 단락정렬 left, right, center, justify( 양쪽정렬 ), inherit 참고 : exe8-1.html

20 4. 박스와표 많은내용을일목요연하게정리할수있는기능으로사용 _top _left content padding border margin _right _bottom

21 Box 속성 참고 : exe9.html, exe9-1.html margin 속성 padding 속성 content margin-top padding-top width margin-right padding-right height margin-bottom padding-bottom margin-left padding-left margin padding 속성한번에지정, 위 / 오른쪽 / 아래 / 왼쪽순서대로공백구분 예 : h1 { margin: 10px 0px 10px 100px; border: 1 dotted; } border-width border-top(right, bottom, left)-width thin, medium, thick, 길이값 border-color border-style border-top(right, bottom, left)-color border-top(right, bottom, left)-style border border-width, style, color 속성을한꺼번에순서대로지정, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

22 표태그 <table> 표선언 <tr> 행선언 <td> 첫번째행첫번째열 </td> 열선언 <td> 두번째행두번째열 </td> </tr> <tr> <td> 두번째행두번째열 </td> <td> 두번째행두번째열 </td> </tr> </table> 참고 : exe10.html 1 행 1 열 1 행 2 열 2 행 1 열 2 행 2 열

23 표레이아웃 참고 : exe10-1.html 표내부구조이해 표속성설명예 <caption> <th> 표제목 표제목행 / 열삽입 <table> <caption> 표제목 </caption> <tr> <td> 내용 </td> </tr> </table> <table> <tr> <th> 제목 1</th> <th> 제목 2 </th> </tr> <tr> <td> 내용 1</td> <td> 내용 2</td> </tr> </table> <thead> 표머리말 <tbody> 본문 <tfoot> 표꼬리말

24 표합치기 ( 행 / 열합치기 ) 참고 : exe10-2.html 속성 colspan rowspan 설명 여러개의열을합친다 여러개의행을합친다 (colspan= 2 ) (rowspan= 2 )

25 표여백과테두리이해 margin height table border td border td height 번호날짜항목내용 월급입금 1,000, 학원비 250,000 width padding td width

26 5. 이미지와멀티미디어 <img> 태그 속성 src width height alt title 설명 이미지파일경로지정이미지가로크기지정이미지세로크기지정이미지를대체할수있는설명, 텍스트삽입이미지정보, 이미지설명, 풍선도움말 참고 : exe11.html <img src= 이미지경로 alt= 대체텍스트 title= 이미지설명 width= 너비 height= 높이 >

27 이미지파일의종류 파일형식 확장자 설명 gif.gif 256컬러, 작은아이콘, 움직이는이미지 jpg.jpg 웹에서가장많이사용되는이미지 png.png 색상손실없이이미지구현, 투명한배경지원 bmp.bmp 크기가커서다른형식으로변환하여사용

28 다양한이미지효과 그림자효과 둥근모서리효과 속성 h-shadow v-shadow blur spread color inset 속성 border-top-left/right-radius border-bottom-right/left-radius border-radius 참고 : exe11-1.html 설명 가로그림자세로그림자그림자의번짐정도그림자의퍼짐정도그림자의색상바깥그림자를안쪽으로변경 설명 왼쪽 / 오른쪽위모서리오른쪽 / 왼쪽아래모서리위의순서대로한번에지정

29 이미지반사효과와필터 ( 크롬, 사파리 ) 반사효과 : -webkit-box-reflect 참고 : exe11-2.html 필터효과.filter1 { -webkit-filter:blur(5px); }.filter2 { -webkit-filter:grayscale(1); }.filter3 { -webkit-filter:sepia(1); }.filter4 { -webkit-filter:invert(1); }.filter5 { -webkit-filter:brightness(1.5); }.filter6 { -webkit-filter:brightness(3) contrast(10); }

30 이미지변형 이미지회전 transform: rotate(30deg) -ms-transform: rotate(30deg) : 익스플로러용 -webkit-transform: rotate(30deg) : 크롬과사파리용 이미지기울이기 transform: skewx; skewy; 또는 transform: skew(x, y)

31 Position, float, display 속성 참고 : position.html position float display static left block relative right inline absolute none none fixed <img src=./image/photo1.jpg class= static > <div style= display:inline; background:yellow;> 문장 </div>

32 멀티미디어활용 HTML 5 에서지원하는비디오 / 오디오파일형식 비디오파일형식 mp4.mp4 video/mp4 ogg.ogg video/ogg webm.webm video/webm 오디오파일형식 mp3.mp3 audio/mpeg wav.wav audio/wav ogg.ogg audio/ogg

33 동영상파일삽입 <video src= 경로 ></video> 컨트롤버튼삽입 <video src= 경로 controls= control ></video> 자동으로재생하기 <video src= 경로 autoplay= autoplay ></video> 동영상미리다운로드하기 <video src= 경로 preload= auto ></video> 그외속성 auto= muted ( 음소거 ), loop= loop ( 반복재생 ) width, height ( 플레이어의너비와높이 ) 참고 : exe11-3.html

34 오디오파일삽입 <audio src= 경로 ></audio> 컨트롤버튼삽입 <audio src= 경로 controls= control ></audio> 자동으로재생하기 <audio src= 경로 autoplay= autoplay ></audio> 오디오미리다운로드하기 <audio src= 경로 preload= auto ></audio> 그외속성 auto= muted ( 음소거 ), loop= loop ( 반복재생 ) width, height ( 플레이어의너비와높이 ) 참고 : exe11-3.html

35 유튜브동영상가져오기 <iframe> 태그 : 웹페이지안에다른웹페이지표시 (inline frame 약자 ) <iframe src= 파일위치 width= 가로크기 height= 세로크기 name= 타겟으로설정할이 름 > 예 : <iframe src=" frameborder="0" width="560" height="315"></iframe> 참고 : exe11-3.html

36 <iframe> 태그속성 iframe 속성 설명 src= 주소 표시할내용의경로 (URL) 를지정 name= 이름 " 이름, target을이용지정된위치에표시 width= 0 가로폭설정 ( 숫자표시, 픽셀 ) height= 0 세로폭설정 ( 숫자표시, 픽셀 ) marginwidth= 0 좌, 우내부여백 ( 숫자표시, 픽셀 ) marginheight= 0 상, 하내부여백 ( 숫자표시, 픽셀 ) scrolling= auto 스크롤바생성여부 (yes, no, auto) frameborder= 0 프레임경계선의표시유무 (0, 1) align= 정렬위치 정렬위치 (left, center, right) border, bordercolor 경계선의두께, 색상

37 움직이는마퀴태그익스플로러, 크롬 <marquee>~ </marquee> 참고 : exe12.html 속성 설명 behavior slide, alternate, scroll direction 움직이는방향, left, right, up, down scrollamount 움직이는양, 속도 ( 숫자가클수록빠르다 ) scrolldelay 글자가마지막까지도달하는시간 ( 숫자가클수록느려진다 ) loop 반복횟수 hspace / wspace 스크롤좌우여백 bgcolor 스크롤글자의배경색 width / height 스크롤가로 / 세로넓이

38 6. 폼 (Form) 사용자로부터필요한자료를입력받아서버로전송하기위한양식 <form> 태그 속성 설명 name method action <form> 태그의고유이름정의 어떤방식으로입력된내용을전달할지에대한방식 get 방식과 post 방식 데이터를전달할대상페이지의주소 <form name= myform method= get action= result.html > <input type= text name= login-name > </form>

39 입력양식 <input> 태그 참고 : exe13.html type text password button submit reset checkbox radio file hidden 설명 한줄텍스트입력받을수있는양식비밀번호입력받을수있는필드 * 표시클릭가능한버튼폼의데이터를다른페이지혹은서버로전송하는버튼폼의데이터값을초기화여러항목선택체크가가능한사각형모양의필드한항목만선택가능한원형의필드파일을선택할수있는창을실행하는버튼실제화면에는보이지않고숨겨진상태로데이터를전송

40 선택목록양식 <select> ~ </select> 태그 : <option> 태그와함께사용 속성 name size multiple disable 속성 value selected disabled 설명 <select> 이름지정목록의크기지정, 2이상이면펼침목록이아닌스크롤형태로목록의값을선택 size가 2이상으로정의, ctrl 또는 shift 키로여러항목선택가능 <select> 태그를비활성화설명목록의값이선택되었을때서버로전송될약속된값문서를열었을때기본적으로선택되어진채로보이게하는속성목록의값을선택할수없도록비활성화 <option> 태그속성

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

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

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,

More information

웹의 뼈대 HTML의 이해 개요 및 텍스트 태그

웹의 뼈대 HTML의 이해 개요 및 텍스트 태그 HTML 의이해 - 개요및텍스트태그 최현종 ( 서원대학교 ) HTML 의개요 웹문서란무엇인가? 인터넷에올려진문서 HTML : 다양한멀티미디어요소까지다룰수있는인터넷표준웹문서 웹브라우저란무엇인가? 웹문서를보기위한프로그램 대표적인웹브라우저 - 인터넷익스플로러 - 넷스케이프내비게이터 - 오페라 그림 1. 인터넷익스플로러 HTML 의정의 - Hyper Text Markup

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴

More information

e-비즈니스 전략 수립

e-비즈니스 전략 수립 CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용

More information

PowerPoint Presentation

PowerPoint Presentation 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력

More information

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용

More information

미쓰리 파워포인트

미쓰리 파워포인트 computer & internet 07. FRAME TAG FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2 FRAME 문서의구조 HTML 문서에서 태그기능을 프레임문서구조에서는 이대신함 일반웹페이지구조 ..

More information

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것

More information

Lab1

Lab1 Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee HTML Web Server (World Wide Web: WWW)? (., FTP ). web 3 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,

More information

<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770> HTML/XML 인터넷보충학습자료 - 1 - (1) 글자색상 : color 속성사용 - 태그의 color 속성과같은역할을한다. (2) 배경지정 : background-color 속성사용. - HTML의 bgcolor 속성과같은역할. bgcolor 속성은일정한태그에만한정되어있지만 background-color 속성은어떤태그에서도모두적용된다.

More information

Week8-Extra

Week8-Extra Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4

More information

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자.

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 이장에서다룰내용 1 2 3 4 5 글꼴꾸밈관련스타일시트텍스트관련스타일시트배경관련스타일시트목록관련스타일시트하이퍼링크관련스타일시트 2 01. 글꼴꾸밈관련스타일시트 v 글자에관련된스타일시트는크기, 스타일, 모양등에관련된 font 속성이가장많이사용 속성값설명 color

More information

SK Telecom Platform NATE

SK Telecom Platform NATE SK Telecom Platform NATE SK TELECOM NATE Browser VER 2.6 This Document is copyrighted by SK Telecom and may not be reproduced without permission SK Building, SeRinDong-99, JoongRoGu, 110-110, Seoul, Korea

More information

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란?

Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? CSS Basic 과정소개 과정목표 : CSS 의기본개념이해 1. CSS 란? 2. CSS 선택자 3. CSS 속성 1 Front-Side 웹개발의이해 (CSS Basic) 1. CSS 란? 1. CSS 란? - 스타일선언이위에서아래로순차적으로적용이되고, 마지막에선언된스타일이우선순위갖음 - 마크업언어 (HTML/XHTML) 가실제화면에표시되는방법을기술하는언어

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 6. CSS 레이아웃과애니메이션 레이아웃이란? 웹페이지에서 HTML 요소의위치, 크기등을결정하는것 집안에서의가구배치와비슷하다. 블록요소와인라인요소 블록 (block) 요소 - 화면의한줄을전부차지한다. 인라인 (inline) 요소 - 한줄에차례대로배치된다. 현재줄에서필요한만큼의너비만을차지한다. 블록요소 한줄을전부차지 , , ,

More information

예스폼 프리미엄 템플릿

예스폼 프리미엄 템플릿 HTML 과 CSS 를활용한개별디자인 D4 강사김준일 01. HTML, CSS 그리고메이크샵 1 2 쇼핑몰의구조와기능 이미지, 문구등내용을 담당하는언어 쇼핑몰 쇼핑몰이어떻게보여질지 표현 ( 디자인 ) 을담당하는언어 3 4 쇼핑몰의 UI 및배너등을 표현하며유효성검사등을 담당하는개발언어 쇼핑몰의핵심기능을담당하는 쇼핑몰프로그램으로 HTML,CSS,Javascript

More information

Overall Process

Overall Process CSS ( ) Overall Process Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model) (Contents

More information

네트워크 명령 실습

네트워크 명령 실습 HTML 실습 Contents 1. WWW, HTTP, HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련 1. HTML 개요 1. HTML(Hyper Text Markup Language) A. 웹문서를표현하는기술

More information

네트워크 명령 실습

네트워크 명령 실습 HTML 실습 Contents 1. HTML 개요 2. HTML 기본구조 3. HTML 기본태그 1. 글자관련 2. 서식관련 3. 표관련 4. 하이퍼링크관련 5. 프레임관련 6. 멀티미디어관련 7. 배경등꾸미기관련 8. 아이템화관련 3.4 하이퍼링크태그 1. 하이퍼링크란윈도우의도움말같은형태로문서안에특정문자열이나이미지를마우스로클릭했을때관련된다른문서, 그림, 음악,

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style

More information

PowerPoint Presentation

PowerPoint Presentation WordPress 를이용한웹사이트만들기 2015 년 한지웅 WordPress 를이용한웹사이트만들기 Day 1 Day 2 Day 3 Day 4 Day 5 1. 웹사이트제작기초 HTLM 기본 CSS 기본 WordPress 개론 ( 웹사이트구축툴 ) 2. 웹호스팅 / 웹사이트구축 웹호스팅업체선택 cpanel 설정 WordPress 설치 3. WordPress 기초활용

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 03 장 HTML5 기본태그 1. 글자태그 2. 목록태그 3. 테이블태그 4. 이미지태그 5. 공간분할태그 HTML5 에서지원하는기본태그를사용할수있다. 공간분할태그와시맨틱태그의용도를이해하고사용할수있다. 1. 글자태그 가장많은비중을차지하는태그 그림 3-1 글자태그중심의웹페이지 1.1 제목글자태그 제목글자태그 문서의제목을표현할때사용 h : Heading을의미 표

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례

More information

<3035B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

<3035B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770> HTML/XML 인터넷보충학습자료 - 1 - - Cascading Style Sheets - HTML의단점을보완하기위해사용하는것으로, 웹문서에스타일 ( 예 ; 글꼴, 색상, 여백등 ) 을추가하는간단한메카니즘 1 다양한기능의확장 : HTML의단순한기능을확장 ( 추가, 변경 ) 시킴 2 통일된문서양식제공 : 한번의속성정의로여러문서에동시에적용가능 3 독립적인문서제작환경가능

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 5. CSS 박스모델과응용 박스모델 HTML 요소들을박스 ( 사각형 ) 형태로그리는것 박스는배치, 색상, 경계등의속성을가진다. 박스모델의속성 배경색과배경이미지 HTML 요소에배경색과배경이미지가설정되어있는경우에, 패딩은투명하므로배경이미지와배경색이보이게된다 ( 그림출처 : Jon Hicks) 경계선스타일

More information

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',

More information

2009년 상반기 사업계획

2009년 상반기 사업계획 웹 (WWW) 쉽게배우는데이터통신과컴퓨터네트워크 학습목표 웹서비스를위한클라이언트 - 서버구조를살펴본다. 웹서비스를지원하는 APM(Apache, PHP, MySQL) 의연동방식을이해한다. HTML 이지원하는기본태그명령어와프레임구조를이해한다. HTTP 의요청 / 응답메시지의구조와동작원리를이해한다. CGI 의원리를이해하고 FORM 태그로사용자입력을처리하는방식을알아본다.

More information

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS 개발자에게넘겨주기편한 TABLE&FORM 마크업 김남용 INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS 들어가기 이제는 ~ 서로간의이슈웹표준 & 웹접근성왜웹표준으로해야할까요? 모든웹페이지는 ~ 퍼블리싱순서 이제는 ~ 디자이너 디자이너 퍼블리셔 Front-end (UI 개발자 ) 퍼블리셔 Front-end (UI 개발자 ) 서버개발자 서버개발자

More information

WEB HTML CSS Overview

WEB HTML CSS Overview WEB HTML CSS Overview 2017 spring seminar bloo 오늘의수업은 실습 오늘의수업은 이상 : 12:40 목표 : 1:00 밤샘 SPARCS 실습 오늘의수업은 근데숙제는많음 화이팅 WEB 2017 spring seminar bloo WEB WEB 의원시적형태 WEB 의원시적형태 질문 못받음 ㅈㅅ HTML 2017 spring seminar

More information

C스토어 사용자 매뉴얼

C스토어 사용자 매뉴얼 쪽지 APP 디자인적용가이드 I. 쪽지 APP 소개 2 I. 쪽지 APP 소개 쪽지 APP 을통해쇼핑몰의특정회원또는특정등급의회원그룹에게 알림메시지나마케팅을위한쪽지를발송하실수있습니다. 쪽지 APP의주요기능 1. 전체회원, 특정ID, 특정회원그룹별로쪽지발송가능 2. 발송예약기능 3. 발송한쪽지에대해수신및열람내역조회가능 4. 쇼핑몰페이지에서쪽지함과쪽지알림창제공 3

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 : 준비학습 2: 학습내용 11장. 12장. 이미지, 목록, 하이퍼링크스타일 13장. 테두리, 폼양식관련스타일과레이어 14장. 필터효과와 활용하기 : 11 장. 학습내용 개요와삽입법 선택자 글꼴 / 문단관련스타일 개요 Cascading Style Sheets 의약자 계단형스타일시트 라고한다. 의표준화작업과신기술및팁을제공하는 W3C 에서 1996 년 레벨 1

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Html 은웹에서 text, images, movie 등다양한정보의요소를 담을수있는문서형식이다. 정보 (txt, imges) 전송 = 동일한어플리케이션 = 정보 (txt, imges) 정보 (txt, imges Movie, 동작 ) 정보 (txt, imges movie) 어플리케이션 웹브라우저 HTML5 는기존 HTML 에차별화된특징을가진 최신버전의웹표준언어.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 4. CSS 스타일시트기초 CSS 의개념 문서의구조 -> HTML 문서의스타일 ->? CSS 의역할 만약 CSS 가없다면 CSS CSS(Cascading Style Sheets): 문서의스타일을지정한다. CSS 의장점 거대하고복잡한사이트를관리할때에필요 모든페이지들이동일한 CSS 를공유 CSS 에서어떤요소의스타일을변경하면관련되는전체페이지의내용이한꺼번에변경

More information

Microsoft PowerPoint HTML.ppt

Microsoft PowerPoint HTML.ppt 웹프로그래밍 () HTML () 2006 년봄학기 문양세강원대학교컴퓨터과학과 웹페이지제작단계및환경 주제와주제와내용선정 어떤어떤내용을내용을담을담을것인지것인지,, 어떤어떤단계로단계로제작할제작할것인지것인지결정결정 디자인디자인 웹페이지페이지구조구조 저작권저작권확인확인 로고로고, 아이콘, 아이콘또는또는멀티미디어멀티미디어등다양한다양한소재를소재를어떻게어떻게꾸밀꾸밀것인지것인지구성구성

More information

PHP & ASP

PHP & ASP 단어장프로젝트 프로젝트2 단어장 select * from address where address like '% 경기도 %' td,li,input{font-size:9pt}

More information

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드] Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.asp JS Tutorial 524730-1 2019 년봄학기 3/11/2019 박경신 https://www.w3schools.com/html/default.asp

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 2 장 HTML 문법 목차 제 2 장 HTML 문법 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 2.1 기본태크 구조태그 문자서식태그 문단서식태그 3 2.1.1 구조태그 HTML 태그들중가장기본이되는태그 : HTML

More information

Javascript

Javascript 1. 폼 (Form) 태그란? 일반적으로폼 (Form) 태그는입력양식을만들때사용됩니다. 입력양식이란어떤데이터를받아전송해주는양식을말합니다. 예를들면, 방명록이나게시판, 회원가입등의양식을말합니다. 이러한입력양식의처음과끝에는반드시폼태그가들어가게됩니다. 폼의입력양식에는 Text Box, Input Box, Check Box, Radio Button 등여러가지입력타입들이포함됩니다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to produce table XHTML 임정희 M2community 1 Table of Contents 1. XHTML - XHTML 과 HTML 2. Table XHTML - Table의이해 - Table 링크연결 - Table 작성 2 15 th KCSE Editor s Workshop, Seoul 2015 XHTML XHTML 기존에사용되던 HTML

More information

Ÿ column-rule 속성은단사이의구분선을표현하기위한속성으로 column-rule-color, column-rule-style, column-rule-width 속성을한번에지정할수있다. 1.4 단의확장 Ÿ column-span 속성은다단을구성할때해당요소가얼마나많은단

Ÿ column-rule 속성은단사이의구분선을표현하기위한속성으로 column-rule-color, column-rule-style, column-rule-width 속성을한번에지정할수있다. 1.4 단의확장 Ÿ column-span 속성은다단을구성할때해당요소가얼마나많은단 1. 다단레이아웃 1.1 다단문서의개수및폭지정 Ÿ column-count 속성은다단을구성할때단의개수를지정하는속성이다. Ÿ column-width 속성은단의폭을지정하는속성이다. Ÿ column-width와 column-count 속성은동시에 auto 속성으로지정할수없다. Ÿ columns 속성은단의개수와폭을한번에지정하기속성이다. Ÿ 다단관련속성의사용은벤더프리픽스가필요하다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 2 장.HTML5 문서의기본 목차 2.1 기본문서만들기 2.2 단락과텍스트꾸미기 2.3 목록및표작성하기 2.4 문서구조화하기 소스코드실행사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/ 에각장의예제가있어서실행결과확인및소스보기가가능합니다. 2 HTML5 문서의기본 2.1 기본문서만들기 2.1.1

More information

LCD Display

LCD Display LCD Display SyncMaster 460DRn, 460DR VCR DVD DTV HDMI DVI to HDMI LAN USB (MDC: Multiple Display Control) PC. PC RS-232C. PC (Serial port) (Serial port) RS-232C.. > > Multiple Display

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 4 장. CSS3 스타일시트기초 1 목차 4.1 CSS3 시작하기 4.2 CSS 기본사용법 4.3 문자와색상지정하기 4.4 목록과표장식하기 2 4.1 CSS3 시작하기 4.1.1 스타일시트와 CSS3 기본개념 4.1.2 CSS 속성선언 4.1.3 문서일부분에 CSS 속성설정 3 스타일시트와 CSS3 기본개념 스타일시트란? 웹문서의출력될외형스타일

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 명품웹프로그래밍 1 2 강의목표 1. CSS3로 HTML 태그가출력되는위치를조절할수있다. 2. CSS3로리스트를예쁘게꾸밀수있다. 3. CSS3로표를예쁘게꾸밀수있다. 4. CSS3로폼을꾸미고사용자의입력에반응하게할수있다. 5. CSS3로애니메이션, 전환 (transition), 변환 (transform) 효과를만들수있다. 배치 3 배치 CSS3 로 HTML 태그가출력되는위치지정

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.

More information

HTML

HTML Hyper Text Markup Language Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr 1 HTML 문서의특징 HyperText Markup Language WWW 문서제작에쓰임 SpaceBar, Tab, Enter 인식못함 텍스트문서의형태 컴퓨터기종에독립적 확장명 :.html,.htm 태그는대소문자구별안함

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var

More information

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법

More information

Microsoft PowerPoint HTML기초(2).pptx

Microsoft PowerPoint HTML기초(2).pptx 웹과인터넷활용및실습 () (Part II) 문양세강원대학교 IT 대학컴퓨터과학전공 강의내용 HTML의개요 HTML 문서의기본구조 HTML의구성요소 HTML 편집기기본적인 HTML 태그컬러와그래픽이미지하이퍼텍스트링크테이블프레임사운드 ( 오디오 ) 및동영상 Page 2 1 컬러코드와 RGB (1/4) 컬러 ( 색깔 ) 를지정하는두가지방법 컬러의이름을직접지정 (

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 실습 1 배효철 th1g@nate.com 1 목차 조건문 반복문 System.out 구구단 모양만들기 Up & Down 2 조건문 조건문의종류 If, switch If 문 조건식결과따라중괄호 { 블록을실행할지여부결정할때사용 조건식 true 또는 false값을산출할수있는연산식 boolean 변수 조건식이 true이면블록실행하고 false 이면블록실행하지않음 3

More information

PHP & ASP

PHP & ASP PHP 의시작과끝 echo ; Echo 구문 HTML과 PHP의 echo 비교 HTML과 PHP의 echo를비교해볼까요

More information

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document

More information

C H A P T E R 2

C H A P T E R 2 C H A P T E R 2 Foundations of Ajax Chapter 2 1 32 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp =

More information

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl 제이쿼리 (JQuery) - 제이쿼리는자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리이다. - 따라서, 제이쿼리를사용하기위해서는자바스크립트라이브러리를사용해야한다. - 제이쿼리사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) - 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호를말함. - 사용예 )

More information

슬라이드 1

슬라이드 1 Index 1. 광고상품요약 2. 공통가이드 3. 상품별제작시주의사항 4. 플래시배너액션가이드 5. DM제작가이드 6. 모바일광고제작가이드 7. Contact Us 1. 광고상품요약 상품명사이즈용량 CPM( 원 ) A.CTR 특이사항태그가능여부 CF 480*270 15 초이내 10,000 CTR 1.6% 동영상 wmv 파일 X I-Cover 1000*630

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 3. HTML 멀티미디어와입력요소 웹브라우저와멀티미디어 예전방법 : HTML 안에서는 나 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: 와 태그가추가 오디오 요소의속성 오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 육아상식 STYLE GUIDE Design Style Guide 0 Navigation 메뉴검색알람슈퍼맘맘스맘쇼핑맘이벤트 Icon 출석체크내프로필내포인트참여한이벤트 : 문의로그아웃 뒤로가기공유하기더보기글쓰기유튜브좋아요 _on 좋아요 _off 알리기공지사항 FAQ 설정 댓글공유하기이동하기뒤로가기닫기내프로필사진수정 카테고리프로필 _ 포인트내포인트자녀 Q A N

More information

CAD 화면상에 동그란 원형 도형이 생성되었습니다. 화면상에 나타난 원형은 반지름 500인 도형입니다. 하지만 반지름이 500이라는 것은 작도자만 알고 있는 사실입니다. 반지름이 500이라는 것을 클라이언트와 작업자들에게 알려주기 위 해서는 반드시 치수가 필요하겠죠?

CAD 화면상에 동그란 원형 도형이 생성되었습니다. 화면상에 나타난 원형은 반지름 500인 도형입니다. 하지만 반지름이 500이라는 것은 작도자만 알고 있는 사실입니다. 반지름이 500이라는 것을 클라이언트와 작업자들에게 알려주기 위 해서는 반드시 치수가 필요하겠죠? 실무 인테리어를 위한 CAD 프로그램 활용 인테리어 도면 작도에 꼭 필요한 명령어 60개 Ⅷ 이번 호에서는 DIMRADIUS, DIMANGULAR, DIMTEDIT, DIMSTYLE, QLEADER, 5개의 명령어를 익히도록 하겠다. 라경모 온라인 설계 서비스 업체 '도면창고' 대 표를 지낸 바 있으며, 현재 나인슈타인 을 설립해 대표 를맡고있다. E-Mail

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 휴대폰인증서비스 사용자매뉴얼 목차 1. 서비스소개및신청 1) 휴대폰인증서비스란? 2) 휴대폰인증서비스장점 3) 서비스신청하기 1) 회원가입페이지에적용 2) 아이디, 비밀번호찾기페이지에적용 3) 14세미만비회원구매제한팝업에적용 4) 성인인증페이지에적용 2 1. 서비스소개및신청 1) 휴대폰인증서비스란? 휴대폰인증서비스는본인명의의휴대폰을사용하여본인확인을가능하게해주는서비스로써,

More information

1 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS

1 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS jtc 와함께하는수월한 DHTML(CSS) http://www.jobtc.kr 훈련교사박원기 1 CSS 개요 1.1 DHTML(CSS) 란? Dynamic Hyper Text Markup Language 의약자이다. 홈페이지를좀더다이나믹하게만들고자고안해낸방법중하나이다. Nevigator 의 DHTML 은 JSS 라불리고 Explorer 의 DHTML 은 CSS

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 3 장. 링크와멀티미디어 1 목차 3.1 링크달기 3.2 이미지사용하기 3.3 오디오와비디오다루기 3.4 객체포함하기 2 3.1 링크달기 3.1.1 하이퍼텍스트와링크 3.1.2 문서간이동 3.1.3 문서내특정위치로이동 3 하이퍼텍스트 / 하이퍼미디어 HTML(HyperText Markup Language) 하이퍼텍스트의마크업언어 HTML

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 : 학습내용 기본구조와태그다양한태그다루기 태그다루기프레임나누기폼양식및재미있게활용할수있는태그 : 03 장. 기본구조와태그 학습내용 기본구조에디트플러스에서 문서제작해보기 에서태그사용법 기본구조와태그 기본구조 [ 기본구조 ]

More information

NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되

NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되 NATE CP 가이드 1. WML 페이지에서줄바꿈문제 WML 페이지에서줄바꿈은명시적으로 태그를사용하여야한다. 그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 태그가없어, 그림 1 과같이줄바꿈이되지않고한줄로보여짐. [ 그림 1] 비정상 [ 그림 2] 정상

More information

Visual Basic 반복문

Visual Basic 반복문 학습목표 반복문 For Next문, For Each Next문 Do Loop문, While End While문 구구단작성기로익히는반복문 2 5.1 반복문 5.2 구구단작성기로익히는반복문 3 반복문 주어진조건이만족하는동안또는주어진조건이만족할때까지일정구간의실행문을반복하기위해사용 For Next For Each Next Do Loop While Wend 4 For

More information

<3033B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

<3033B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770> HTML/XML 인터넷보충학습자료 - 1 - - HTML 표를만들기위해서는 태그를사용한다. - - 테이블에서행과열을나눠주기위한태그는따로지정해야해며나눌개수만큼반복해서작성해야한다.

More information

Orcad Capture 9.x

Orcad Capture 9.x OrCAD Capture Workbook (Ver 10.xx) 0 Capture 1 2 3 Capture for window 4.opj ( OrCAD Project file) Design file Programe link file..dsn (OrCAD Design file) Design file..olb (OrCAD Library file) file..upd

More information

일반인을 위한 전자책 제작 방법

일반인을 위한 전자책 제작 방법 국립중앙도서관 디지털 정보활용능력 교육 이펍(ePub) 제작 입문 2015. 6. 강사 : 최 현 이북스펍 대표 (http://ebookspub.co.kr) - 1 - - 강의 내용 - 1. epub 이란 무엇인가 1.1. 전자책 출판 프로세스 이해 1.2. 전자책의 다양한 형태와 제작방식 1.2. epub 개념 이해 및 제작툴 종류 2. epub 제작툴 소개

More information

1997 4 23 2000 9 5 2003 9 10 2008 2 20 2008 12 10 2011 7 1 2012 8 17 2014 9 19 2015 3 31 2015 6 30 2016 9 30 2017 6 30 2019 3 31 326 327 328 < >

More information

<!DOCTYPE html> <html> <head> #p1{background:#ff0000;} 1 배경색을 16진수지정방식사용 #p2{background:rgb(255,0,0);} 2 배경색을 rgb 지정방식사용 #p3{background:rgba(255,0,0,0

<!DOCTYPE html> <html> <head> #p1{background:#ff0000;} 1 배경색을 16진수지정방식사용 #p2{background:rgb(255,0,0);} 2 배경색을 rgb 지정방식사용 #p3{background:rgba(255,0,0,0 1. 색상이해하기 1.1 색모델 Ÿ RGB 색모델 R( 빨강 ), G( 녹색 ), B( 파랑 ) 를삼원색으로하는색모델로서삼원자극이론에근거한색모델이다. 16진수색상지정방식으로 rgb() 색상지정방식과 RGBA() 색상방식지정방식이있다. Ÿ HSL 색모델 H( 색조 ), S( 채도 ), L( 밝기 ) 의쌍으로색상지정이다. HSL() 색상지정방식 HSLA() 색상지정방식이있다.

More information

What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define h

What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Styles define h What is CSS? Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr What Is CSS? Stands for Cascading Style Sheets. Is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

More information

1

1 1 2 3 4 5 6 b b t P A S M T U s 7 m P P 8 t P A S M T U s 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Chapter 1 29 1 2 3 4 18 17 16 15 5 6 7 8 9 14 13 12 11 10 1 2 3 4 5 9 10 11 12 13 14 15

More information

Grouping Selectors To minimize the code, you can group selectors.

Grouping Selectors To minimize the code, you can group selectors. CSS Advanced Bok, Jong Soon jongsoon.bok@gmail.com www.javaexpert.co.kr Grouping Selectors To minimize the code, you can group selectors. Nesting Selectors It is possible to apply a style for a selector

More information

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher( 실행할페이지.jsp); 다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher

More information

2파트-07

2파트-07 CHAPTER 07 Ajax ( ) (Silverlight) Ajax RIA(Rich Internet Application) Firefox 4 Ajax MVC Ajax ActionResult Ajax jquery Ajax HTML (Partial View) 7 3 GetOrganized Ajax GetOrganized Ajax HTTP POST 154 CHAPTER

More information

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.

More information

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

var answer = confirm( 확인이나취소를누르세요.); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write( 확인을눌렀습니다.); else { document.write( 취소를눌렀습니다.); 자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트

More information

HTML5

HTML5 행맨 류관희 충북대학교 2 3 4 5 사전준비 단어목록읽기 단어빈칸보여주기 인터페이스를통해알파벳선택하면알파벳사라지기 단어에선택한알파벳이있으면표시하기 없으면선이나타원으로사람형태그리기 게임종료조건 : 모든맞추는경우 모두틀린경우 ( 행맨 ) 6 단어목록배열에저장 words.js var words = [ "muon", "blight","kerfuffle","qat"

More information

리포트_23.PDF

리포트_23.PDF Working Paper No 23 e-business Integrator From Strategy to Technology To remove the gap between e-biz strategy and implementation (eeyus@e-bizgroupcom) Creative Design 2001 04 24 e-business Integrator

More information

SmartEditor Basic 2.0 개발자 가이드

SmartEditor Basic 2.0 개발자 가이드 목차 소개 9 SmartEditor Basic 2.0 의특징 9 지원브라우저 10 제공기능상세 10 글꼴 10 글자크기 11 글자효과 12 글자색 13 글자배경색 14 위첨자와아래첨자 15 정렬 16 줄간격 16 번호매기기 17 글머리기호 17 내어쓰기와들여쓰기 17 인용구스타일 18 하이퍼링크 18 특수기호 19 표생성과간단편집기 20 찾기와바꾸기 21 편집모드

More information

B _02_M_Ko.indd

B _02_M_Ko.indd DNX SERIES DNX560 DNX560M DDX SERIES DDX506 DDX506M B64-467-00/0 (MW) DNX560/DNX560M/DDX506/DDX506M 4 DNX560/DNX560M/DDX506/DDX506M NAV TEL AV OUT % % % % CD () : Folder : Audio fi 5 6 DNX560/DNX560M/DDX506/DDX506M

More information

웹프로그래밍응용

웹프로그래밍응용 7 주차 CSS 다루기 1. CSS3 개요 2. 선택자 3. 스타일시트선언 4. 스타일속성 5. 박스모델 6. CSS3 레이아웃 7. 확장폰트요약 >> 학습목표

More information

Dialog Box 실행파일을 Web에 포함시키는 방법

Dialog Box 실행파일을 Web에 포함시키는 방법 DialogBox Web 1 Dialog Box Web 1 MFC ActiveX ControlWizard workspace 2 insert, ID 3 class 4 CDialogCtrl Class 5 classwizard OnCreate Create 6 ActiveX OCX 7 html 1 MFC ActiveX ControlWizard workspace New

More information

Cookie Spoofing.hwp

Cookie Spoofing.hwp Cookie Spoofing&Sniffing By Maxoverpro[max]( 장상근) maxoverpro@empal.com http://www.maxoverpro.org 1. 서론 이문서는 Cookie Spoofing 과 Sniffing 에대해정석적인방법을이야기하도록하며또 한어느특정곳의취약점을설명하지않고직접제작한예제를가지고 Cookie Spoofing 과

More information

[ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하

[ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하 [ 네이버마일리지 ] 디자인셋팅매뉴얼 1. 장바구니페이지에네이버마일리지안내추가 - 위치 : HTML 디자인설정 > 장바구니 > 장바구니주문목록 {{$c_3}} [ 편집 ] 버튼클릭 > HTML 편집탭으로이동 > 여러개의장바구니모두결제버튼 {u9} [ 편집 ] 버튼클릭하여팝업에서코드수정 1) 장바구니페이지디자인수정위치 디자인관리 > HTML 디자인설정 > 장바구니이동

More information

Cover_KD-R646[U]004A_1.indd 2 2

Cover_KD-R646[U]004A_1.indd 2 2 KD-DV5606 LVT2490-001A [UP] Cover_KD-R646[U]004A_1.indd 2 2 3 1 4 2 3 5 6 1 2 3 4 5 6 7 4 * 1 * 2 * 3 * 1 * 2 * 3 5 1 FM/AM DISC/USB 2 3 FM=AM* 1 =DISC* 2 =USB* 2 =AUX IN* 1 = 4 DISC/USB 5 * 3 FM/AM DISC/USB

More information

PowerSHAPE 따라하기 Calculate 버튼을 클릭한다. Close 버튼을 눌러 미러 릴리프 페이지를 닫는다. D 화면을 보기 위하여 F 키를 누른다. - 모델이 다음과 같이 보이게 될 것이다. 열매 만들기 Shape Editor를 이용하여 열매를 만들어 보도록

PowerSHAPE 따라하기 Calculate 버튼을 클릭한다. Close 버튼을 눌러 미러 릴리프 페이지를 닫는다. D 화면을 보기 위하여 F 키를 누른다. - 모델이 다음과 같이 보이게 될 것이다. 열매 만들기 Shape Editor를 이용하여 열매를 만들어 보도록 PowerSHAPE 따라하기 가구 장식 만들기 이번 호에서는 ArtCAM V를 이용하여 가구 장식물에 대해서 D 조각 파트를 생성해 보도록 하겠다. 중심 잎 만들기 투 레일 스윕 기능을 이용하여 개의 잎을 만들어보도록 하겠다. 미리 준비된 Wood Decoration.art 파일을 불러온다. Main Leaves 벡터 레이어를 on 시킨다. 릴리프 탭에 있는

More information

EBS직탐컴퓨터일반-06-OK

EBS직탐컴퓨터일반-06-OK ES 컴퓨터 일반 6회 시간 분 배점 점 문항에 따라 배점이 다르니, 각 물음의 끝에 표시된 배점을 참고하시오. 점 문항에만 점수가 표시되어 있습니다. 점수 표시가 없는 문항은 모두 점씩입니다. 은,, 에서 입력받아 를 출력하는 스위치 회로이다. 스위치 회로를 논리 기호로 표시한 것으로 옳은 것은? 다음은 정보 통신망을 사용한 사례이다. 법적으로 처벌받을

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 SECUINSIDE 2017 Bypassing Web Browser Security Policies DongHyun Kim (hackpupu) Security Researcher at i2sec Korea University Graduate School Agenda - Me? - Abstract - What is HTTP Secure Header? - What

More information

2011년 10월 초판 c 2011 Sony Corporation. All rights reserved. 서면 허가 없이 전체 또는 일부를 복제하는 것을 금합니다. 기능 및 규격은 통보 없이 변경될 수 있습니다. Sony와 Sony 로고는 Sony의 상표입니다. G L

2011년 10월 초판 c 2011 Sony Corporation. All rights reserved. 서면 허가 없이 전체 또는 일부를 복제하는 것을 금합니다. 기능 및 규격은 통보 없이 변경될 수 있습니다. Sony와 Sony 로고는 Sony의 상표입니다. G L HXR-NX3D1용 3D 워크플로 가이드북 2011년 10월 초판 c 2011 Sony Corporation. All rights reserved. 서면 허가 없이 전체 또는 일부를 복제하는 것을 금합니다. 기능 및 규격은 통보 없이 변경될 수 있습니다. Sony와 Sony 로고는 Sony의 상표입니다. G Lens, Exmor, InfoLITHIUM, Memory

More information

HTML5

HTML5 주사위게임 류관희 충북대학교 주사위게임규칙 플레이어 두개의주사위를던졌을때두주사위윗면숫자의합 The First Throw( 두주사위의합 ) 합 : 7 혹은 11 => Win 합 : 2, 3, 혹은 12 => Lost 합 : 4, 5, 6, 8, 9, 10 => rethrow The Second Throw 합 : 첫번째던진주사위합과같은면 => Win 합 : 그렇지않으면

More information

Syrup Store O2O Marketing Platform/Solution

Syrup Store O2O Marketing Platform/Solution 모바일웹성능최적화동향및사례 : Syrup Store 앱 임상석 SK 플래닛 Syrup Store O2O Marketing Platform/Solution Syrup Store App for SMB HTML5 기반 안드로이드 /ios 앱개발삽질기 왜 HTML5! Front-end 개발자중심으로 Cross Platform 앱내부개발 타협불가최소품질 Native

More information

인켈(국문)pdf.pdf

인켈(국문)pdf.pdf M F - 2 5 0 Portable Digital Music Player FM PRESET STEREOMONO FM FM FM FM EQ PC Install Disc MP3/FM Program U S B P C Firmware Upgrade General Repeat Mode FM Band Sleep Time Power Off Time Resume Load

More information

Microsoft PowerPoint - 강의노트 2.ppt

Microsoft PowerPoint - 강의노트 2.ppt CSS 개요 DHTML+ 자바스크립트프로그래밍 제 2 장스타일시트 (CSS: Cascading Style Sheet) 를이용한화려한 HTML 문서 All right reserved. N part f this lecture nte may be reprduced, in any frm r by any means, withut permissin in writing

More information

0. 들어가기 전

0. 들어가기 전 컴퓨터네트워크 14 장. 웹 (WWW) (3) - HTTP 1 이번시간의학습목표 HTTP 의요청 / 응답메시지의구조와동작원리이해 2 요청과응답 (1) HTTP (HyperText Transfer Protocol) 웹브라우저는 URL 을이용원하는자원표현 HTTP 메소드 (method) 를이용하여데이터를요청 (GET) 하거나, 회신 (POST) 요청과응답 요청

More information

Macaron Cooker Manual 1.0.key

Macaron Cooker Manual 1.0.key MACARON COOKER GUIDE BOOK Ver. 1.0 OVERVIEW APPLICATION OVERVIEW 1 5 2 3 4 6 1 2 3 4 5 6 1. SELECT LAYOUT TIP 2. Add Page / Delete Page 3. Import PDF 4. Image 5. Swipe 5-1. Swipe & Skip 5-2. Swipe & Rotate

More information

PART 1 CHAPTER 1 Chapter 1 Note 4 Part 1 5 Chapter 1 AcctNum = Table ("Customer").Cells("AccountNumber") AcctNum = Customer.AccountNumber Note 6 RecordSet RecordSet Part 1 Note 7 Chapter 1 01:

More information

컴퓨터프로그래밍 - HTML

컴퓨터프로그래밍 - HTML 컴퓨터프로그래밍 - HTML HTML 이란? v Hyper Text Markup Language v 웹문서제작에사용되는표준언어 v 문서타입 : 텍스트파일형식 HTML 문서의특징 v 공백, 줄바꿈인식못함 v 텍스트문서의형태 - 확장명 :.html,.htm v 인터넷문서로사용하기에적합 - 컴퓨터기종에무관 - 파일크기작음 v 대소문자를구분하지않음 HTML 문서의작동원리

More information

ezpdf WorkBoard 2.0 사용 안내서 c 2009 유니닥스(주) ezpdf WorkBoard 2.0 사용 안내서의 내용과 ezpdf WorkBoard 2.0 프로그램은 저작권법과 컴퓨터 프로그램 보호법으로 보호 받습니다. 발 행 일 2009년 9월 1일 1판

ezpdf WorkBoard 2.0 사용 안내서 c 2009 유니닥스(주) ezpdf WorkBoard 2.0 사용 안내서의 내용과 ezpdf WorkBoard 2.0 프로그램은 저작권법과 컴퓨터 프로그램 보호법으로 보호 받습니다. 발 행 일 2009년 9월 1일 1판 ezpdf WorkBoard 2.0 사용 안내서 c 2009 유니닥스(주) ezpdf WorkBoard 2.0 사용 안내서의 내용과 ezpdf WorkBoard 2.0 프로그램은 저작권법과 컴퓨터 프로그램 보호법으로 보호 받습니다. 발 행 일 2009년 9월 1일 1판 발행 지 은 이 유니닥스(주) 펴 낸 이 유니닥스(주) 펴 낸 곳 유니닥스(주) 주 소 서울특별시

More information