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

Size: px
Start display at page:

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

Transcription

1 CSS Basic 과정소개 과정목표 : CSS 의기본개념이해 1. CSS 란? 2. CSS 선택자 3. CSS 속성 1

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

3 1. CSS 란? - 스타일선언이위에서아래로순차적으로적용이되고, 마지막에선언된스타일이우선순위갖음 - 마크업언어 (HTML/XHTML) 가실제화면에표시되는방법을기술하는언어 - HTML문서의레이아웃과스타일을정의한다. - W3C에서표준안을만들어내고있으며 1996년 CSS Level 1 이후, 현재 CSS Level 2.1에서 CSS Level 3까지보급되고있음 3

4 1. CSS 란? 4

5 1. CSS 란? 5

6 1. CSS 란? in-line 방식... <body> in-line 방식 <strong style= font-size:14px; color:blue; > 안녕하세요 </strong> <span style= color:red; > 만나서반갑습니다 ~</span> <body> </html> HTML Tag 에직접 style 속성값을지정 6

7 1. CSS 란? internal 방식 Internal 방식 <html> <head> <style type="text/css"> h1 { font-size: 20px; } strong { font-size: 16px; } </style> </head>.. HTML 문서내부에 style tag 로선언 head tag 안에넣는것이정석이지만, 상황에따라 body 안에도선언이가능 7

8 1. CSS 란? external 방식 <html> <head> External 방식 <link rel="stylesheet" href="common.css" type="text/css /> <link rel="stylesheet" href= main.css" type="text/css /> </head>... CSS 를따로파일로저장하여불러오는방식 파일을여러개불러올수있기때문에공통 / 자주사용되는부분을따로저장하여사용하기에용이함 8

9 1. CSS 란? em, % ( 상대단위 ) 브라우저의기본글꼴을기준. 1em = 100% 브라우저메뉴의글꼴크기변화에따라유동적임 px, pt ( 절대단위 ) px ( 픽셀, 1px = 1dot) 모니터의 1 픽셀 pt ( 포인트, 1pt=1/72 인치 ) - 브라우저의기본글꼴을기준으로 1em = 12pt = 16px = 100% - 상대단위를사용하면접근성이향상되나, 단위환산의어려움과스타일수정시다양한환경에서일관적이지못한화면을나타낼문제가있음. - 디자인제작시기본단위가 px 로이루어져, 다른단위보다빠르게대응할수있는 px 을사용 9

10 Front-Side 웹개발의이해 (CSS Basic) 2. CSS 선택자

11 2. CSS 선택자 - HTML에스타일을적용할부분을선택하게끔해주는역할 - 선택자의대표적인종류는다음과같음 1. 타입 ( 엘리먼트 / 단순 ) 선택자 2. 하위선택자 3. ID, CLASS 선택자 4. 유사클래스선택자 5. 전체선택자 11

12 2. CSS 선택자 HTML Tag 를지정하여선언 동일한속성을, ( 콤마 ) 로구분하여선언가능 타입선택자 h1 {font-size:20px;} ul {margin:0px;} a {color:blue;} p {text-decoration:underline;} h1, h2 {color:blue;} 12

13 2. CSS 선택자 특정엘리먼트하위의엘리먼트를지정할때사용 공백 (space) 으로구분함 뒤에나올 ID, CLASS 선택자와도함께사용가능 하위선택자 ul li {height:30px;} ul li a {color:blue;} table tr td {text-align:center;} 13

14 2. CSS 선택자 엘리먼트에사용자가직접 id, class 선택자이름을지정 id 는 # 으로구분 class 는. 으로구분 ID, Class 선택자 #bodycontent {width:100%; height:500px;}.clr {clear:both;}.datetime {font-size:10px;} #divnews.tab1 {width:50px;height:50px;} #divnews ul {background-color:red;} 14

15 2. CSS 선택자 해당엘리먼트의상태에따라구분짓는선택자로 HTML 문서상엔없으나 CSS 에선존재하는것처럼작성 IE6 에선 a (Anchor) Tag 에만지정이가능하며그외브라우저는지원여부가조금씩다름 유사클래스선택자 a:link {color:blue;text-decoration:none;} /* 방문하지않은링크 */ a:visited {color:red;text-decoration:none;} /* 방문했던링크 */ a:hover, a:active {color:black;text-decoration:underline;} /* 마우스오버시와클릭시 */ 15

16 2. CSS 선택자 모든 Tag 에대한속성을지정할수있으나, 사용빈도가매우낮음 선언은 * 로선언 * {color:red;} div * {font-size:10px;} 전체선택자 16

17 2. CSS 선택자 자식 (child), 인접 (Adjacent Sibling), 속성 (Attribute) 선택자가추가로있으나, IE6 에서지원을하지않는관계로널리사용되고있지는않음 /* 자식선택자 */ div > a {font-size:20px;} 그외선택자 /* 인접선택자 */ h1 + div {background-color:blue;} /* 속성선택자 */ [class= box ] {background-color:red;} 17

18 2. CSS 선택자 스타일선언이위에서아래로순차적으로적용이되고, 마지막에선언된스타일이우선순위를갖는특징에대해서알아봅시다. #ex1.html #btnlink {color:red;} #btnlink {color:blue;} #btnlink {color:#000;} 18

19 2. CSS 선택자 같은선택자가아닌다른선택자로중복선언을한다면? #ex2.html <style type="text/css">.tit_name { color:red; } h3 { color:green; } #titname { color:blue; } </style> <h3 id="titname" class="tit_name style= color:yellow; > 타이틀제목 </h3> in-line > id > class > type 19

20 2. CSS 선택자 선택자에대한지정순위를무시하고사용자의스타일이우선적으로적용되게함 style 뒤에공백 (space) 후!important 를추가 #ex2.html 이어서 <style type="text/css">.tit_name { color:red; } h3 { color:green!important; } #titname { color:blue; } </style> <h3 id="titname" class="tit_name style= color:yellow; > 타이틀제목 </h3> 20

21 Front-Side 웹개발의이해 (CSS Basic) 3. CSS 속성

22 글자와관련된스타일을지정할수있는속성 1. font-style : normal / italic / oblique ; 2. font-weight : normal / bold ; 3. font-size : 12px ; 4. line-height ( 줄간격 ) : 12px; 5. font-family ( 글꼴서체 ) : gulim ; Font 속성축약형 #font.html span { font : italic bold 12px/12px gulim; } 22

23 글자의색상을변경하는속성 color 속성 color : red; color : rgb(255,0,0); color : #FF0000; color : #F00; ( 축약 ) 글자를들여쓰거나내여쓸때사용 text-indent 속성 text-indent : 10px ; text-indent : -10px ; 23

24 글자의윗줄, 중간줄, 밑줄등을적용시에사용 text-decoration 속성 text-decoration : none; text-decoration : underline; text-decoration : line-through; text-decoration : overline; 글자의정렬기준을지정 text-align 속성 text-align : left; text-align : right; text-align : center; text-align : justify; 24

25 아래와같은스타일이표현되도록 CSS 속성을사용하여적용해봅시다. 1.? 2. 오늘점심은어떤메뉴일까? 3.? 4.? 5.? 6.? 조건 기본 <p> tag 사용 in-line 방식스타일사용 1. 굵은돋움, 크기 : 14px, 색상 : blue 2. 이탤릭체굴림, 크기 : 16px, 색상 : #E8334D 3. 밑줄이있는돋움, 크기 : 12px 4. 들여쓰기가 10px 되어있는돋움, 크기 : 15px 5. 줄간격이 50px 인굵은돋움, 크기 : 16px, 색상 : green 6. 우측정렬이되어있는밑줄이있는굵은돋움, 크기 : 20px 25

26 Block 요소의가로, 세로사이즈를지정 width height width, height width : 150px ; width : 50% ; height : 300px ; height : 100% ; 26

27 엘리먼트의바깥여백 (margin) 과안쪽여백 (padding) 을지정 27

28 28

29 1. margin margin-top margin-right margin-bottom margin-left 2. padding padding-top padding-right padding-bottom padding-left margin, padding 속성 #box.html margin-top: 10px; margin-right:40px; margin : 10px 40px 20px 10px ; padding : 20px ; margin : 20px 10px; margin : 20px 10px 30px; 축약형의순서는위, 오른쪽, 아래, 왼쪽시계방향으로인식 29

30 세로방향으로마진을지정한두개의서로다른요소가수직방향으로접해있을때, 두요소사이의마진간격은두요소의마진값중큰값으로병합 #ex3.html <style type="text/css"> body {margin:0; padding:0;}.margin_box {width:100%; height:30px; margin:20px 0 50px; background-color:#dcdcdc; } </style> <div class="margin_box"></div> <div class="margin_box"></div> <div class="margin_box"></div> <div class="margin_box"></div> 30

31 Block box 는 margin 좌우속성값을 auto 로지정해중앙에위치시킬수있음 단, 정렬하려는 Block 요소에 width 를지정해야함 #ex4.html <style type="text/css">.box1 {width:200px;height:100px;margin:0 auto;background-color:red;} </style> <div class="box1"></div> 31

32 엘리먼트바깥에선을그려줌 ( 외곽선 ) 방향에따라스타일을따로지정가능 width, height 값과는별개로엘리먼트의 padding 바깥쪽에영역을차지 1. border border-width border-style border-color 2. border- 방향 border- 방향 -width border- 방향 -style border- 방향 -color 3. border-style 속성 solid ( 실선 ) dashed ( 끊어진실선 ) dotted ( 점선 ) border : 1px solid red ; border : 1px dotted #0000FF ; border 축약형 #ex5.html 32

33 엘리먼트영역에색상, 이미지를채우는속성 1. background-color : #fafafa ; 색상이름 / 색상코드 transparent( 투명 ) 2. background-image : url( ; 3. background-repeat : no-repeat ; repeat, no-repeat, repeat-x, repeat-y 4. background-position : 0px 10px ; 0px 0px (left,top 기준 ) left(right), top(bottom), center background 축약형 #ex6.html background : #FF0000 url(daum.gif) no-repeat 0px 10px ; background : red url(daum.gif) repeat-y left top ; background : url(daum.gif) repeat-x 0px 0px ; 33

34 아래와같은스타일이표현되도록 CSS 속성을사용하여적용해봅시다. box 는 div 태그를사용 CSS 는 in-line 방식의스타일사용 설명 박스의크기는가로 300px, 세로 300px, 배경색은 red 박스의외곽선은 3px 두께의실선이고외곽선색은 #000 박스는가운데정렬 박스의안쪽여백은위로 100px, 좌측 20px 박스안에 본인이름 을적어주세요완성된박스는외곽선을포함한크기가가로 300px, 세로 300px 이맞을까요? 34

35 문서내에서엘리먼트가가지고있는고유한렌더링속성을변경 inline 요소를 block 요소로, block 요소를 inline 요소로변경가능 그외에화면에표시되지않게할수있음 display 속성 #ex7.html display : none ; display : block ; display : inline ; display : inline-block ; inline-block : inline 요소처럼배치되면서 block 요소의속성 (width, height, margin, padding) 들을사용할수있는속성 35

36 block 요소의자식컨텐츠가부모요소의사이즈를변화시킬때숨김 / 스크롤바표시여부를지정 부모의사이즈가지정되어있을경우에사용가능 overflow 속성 #ex8.html overflow : visible ; ( 기본 ) overflow : hidden ; overflow : scroll ; overflow : auto ; overflow : scroll 가로, 세로에대한속성을따로지정할수있다. overflow-x overflow-y 36

37 엘리먼트를 block 형태로부유시킬때사용 (display:block; 을안해주어도 ~) block 형태로특정방향 (left, right) 으로정렬 float 속성 float : inherit ; ( 기본 : 밖의 float속성을상속받음 ) float : left ; float : right ; float : none ; 37

38 BOX 1 BOX 2 BOX 3 모든 box1 float box 을 float:right 를지정하지 float:left 로지정않음 38

39 float 를해제할때사용 이전엘리먼트의 float 값을상속받아같은방향으로정렬되는현상을막기위해사용 Clear 속성 clear : inherit ; ( 기본 ) clear : left ; ( 왼쪽으로 float된엘리먼트의하단에위치 ) clear : right ; ( 오른쪽으로 float된엘리먼트의하단에위치 ) clear : both ; ( 모든 float의하단에위치 개념상 float상속을받지않음 ) 39

40 엘리먼트의상대적인위치에대한속성 float과는다르게왼쪽, 오른쪽정렬하는형태가아닌, 위치하는곳에대한값 ( 오프셋 ) 을지정 position 속성 position : static ; ( 기본, offset을가지지않음 ) position : relative ; ( 상대적, 원래위치를기준 ) position : absolute ; ( 절대적, 부모위치를기준 ) position : fixed ; ( 화면에서고정, ie6 지원불가 ) top : 10px ; left : 20px ; bottom : 10px ; right : 20px ; 40

41 position : static; BOX 1 BOX 2 BOX 3 41

42 BOX 1 BOX 2 position:relative; top: 20px; left: 80px; BOX 2 BOX 3 42

43 BOX 1 BOX 2 position:absolute; top: 20px; left: 80px; BOX 2 BOX 3 43

44 BOX 1 BOX 2 position:fixed; top: 20px; left: 80px; BOX 2 BOX 3 44

45 BOX 1-1 BOX 1 position:relative; top: 20px; left:80px; BOX 1 BOX 1-1 position:absolute; top: 20px; left: 80px; BOX 2 45

46 BOX 1-1 BOX 1 position:relative; top: 20px; left: 80px; BOX 1 BOX 1-1 position:fixed; top: 0px; left: 30px; BOX 2 46

47 엘리먼트의입체적인순서를정의 수치가작을수록아래쪽에있다는것을의미 z-index 속성 z-index : 3 ; z-index : ; z-index : 400 ; box 안의엘리먼트의 z-index 가높아도상위 ( 부모 ) 엘리먼트끼리의수치가낮으면 아래쪽에위치함 47

48 body box1 z-index: 100; box2 z-index: 50; 48

49 body box1 z-index: 100; box1-1 z-index: 50; box2-1 z-index: 100; box2 z-index: 50; 49

50 감사합니다

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (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

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

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

쉽게 풀어쓴 C 프로그래밍

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

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

e-비즈니스 전략 수립

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

More information

쉽게 풀어쓴 C 프로그래밍

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

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

예스폼 프리미엄 템플릿

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

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

PowerPoint 프레젠테이션

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

More information

PowerPoint 프레젠테이션

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

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

PowerPoint 프레젠테이션

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

More information

Javascript

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

More information

PowerPoint 프레젠테이션

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

More information

<3036B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

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

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 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

슬라이드 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

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

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

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

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

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

웹프로그래밍응용

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

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

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

<3035B0AD D4C5F584D4C5FC0CEC5CDB3DDBAB8C3E6C7D0BDC0C0DAB7E12E687770>

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

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

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

네트워크 명령 실습

네트워크 명령 실습 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

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

슬라이드 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 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to construct XSL and/or CSS for style sheet of XML files based on the data type definition 조윤상 ( 과편협기획운영위원 ) 1 Table of Contents 1. XML, XSL and CSS? 2. What is XSL? XSLT? XPath? XSL-FO? 3. What is

More information

PowerPoint 프레젠테이션

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

More information

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

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

More information

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

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

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

Prototype 분석 - Element 오브젝트 메서드

Prototype 분석 - Element 오브젝트 메서드 Created by Firejune at 2006/09/05 Prototype 분석 - Element 오브젝트 메서드 이 문서는 Backstage of theater.js에서 발췌한 것 입니다. 프로토타입 라이브러리의 엘리먼트 오브젝트 메서드에 대한 내용을 다루는 일부분입니다. 사용성과 편리성에 포커스를 두지 않고 prototype.js 그대로를 분석하여 접근하고

More information

C스토어 사용자 매뉴얼

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

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 기본과활용 목차 1. HTML와 CSS 시작 2. HTML 기본문서작성 3. 텍스트, 목록, 하이퍼링크 4. 박스, 표 5. 이미지와멀티미디어 6. 입력폼양식 웹개발환경 웹브라우저종류 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 웹개발편집기 메모장 (Notepad) 노트패드 ++(Notepad++) 아크로에디트 (AcroEdit) 드림위버 (Dreamweaver)

More information

HTML5

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

More information

제1장 HTML 문서의 작성

제1장 HTML 문서의 작성 웹프로그래밍 제 2 장 CSS 생능출판사 Copyright 2013 Lee, Kim & Park, Life & Power Press 2. CSS 교재 p.113 2.1 CSS 기초 2.2 스타일정의방법 2.3 CSS3 접두어 2.4 CSS3 미디어질의 2.5 CSS 속성 2.6 CSS3 변형 2.7 CSS3 전환 2.8 CSS3 애니메이션 Copyright

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

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

<!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

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 바로가기마케팅서비스 사용자매뉴얼 최종업데이트 2013-08-02 문서버전 1.2 목차 1. 서비스소개및신청 1) 바로가기마케팅서비스란? 2) 서비스신청및적용 3) 서비스활용 2. 디자인설정 ( 구 ) 디자인 1) 바로가기아이콘소개페이지적용 2) 바로가기접속상태아이콘노출 3) 바로가기접속주문혜택노출 3. 디자인설정 - 스마트디자인 1) 바로가기아이콘서비스소개페이지적용

More information

1809_2018-BESPINGLOBAL_Design Guidelines_out

1809_2018-BESPINGLOBAL_Design Guidelines_out 베스핀글로벌 디자인 가이드라인 베스핀글로벌은 경험과 기술을 바탕으로 고객에게 신뢰를 주는 기업이기를 지향합니다. 모든 서비스와 소통채널에서 우리의 가치를 일관되게 표현하도록 합니다. SIGNATURE SIGNATURE + SLGAN SIGNATURE [CHINA] SIGNATURE + SYMBL 2018년 1.ver 베스핀글로벌 디자인 가이드라인 디자인 가이드라인을

More information

Microsoft PowerPoint - SCLURYPCHTYJ

Microsoft PowerPoint - SCLURYPCHTYJ 12. 구현기술 Ⅵ - CSS t y i li Acce ssi b W e b 문자색및배경 글꼴및텍스트 표및사용자인터페이스 음성스타일시트 학습내용 문자색과배경, 글꼴과텍스트에대해이해한다. 사용자인터페이스및음성스타일시트에대해이해한다. 3 / 58 문자색및배경 문자색속성 (color 속성 ) 배경속성 (background 속성 ) 배경색, 배경이미지, 내용의관계

More information

html5_04.indd

html5_04.indd 4 장쇼핑몰사이트제작 에서는 HTML5와 CSS3를이용하여쇼핑몰사이트를제작해보겠습니다. 2장과 3장에서는 @font-face의활용을높이기위해영문으로사이트를제작했습니다. 하지만 에서는한글로된사이트를제작할예정입니다. 영문폰트를무료로제공하는사이트는많이존재하지만, 한글폰트는대부분상용입니다. 따라서함부로폰트를웹용으로변환하여사용하는것은저작권에위배될수도있습니다. 다행히요즘에는네이버같은포털사이트에서무료로폰트를배포하고있으며,

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

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

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

More information

PowerPoint Presentation

PowerPoint Presentation public class SumTest { public static void main(string a1[]) { int a, b, sum; a = Integer.parseInt(a1[0]); b = Integer.parseInt(a1[1]); sum = a + b ; // 두수를더하는부분입니다 System.out.println(" 두수의합은 " + sum +

More information

adfasdfasfdasfasfadf

adfasdfasfdasfasfadf C 4.5 Source code Pt.3 ISL / 강한솔 2019-04-10 Index Tree structure Build.h Tree.h St-thresh.h 2 Tree structure *Concpets : Node, Branch, Leaf, Subtree, Attribute, Attribute Value, Class Play, Don't Play.

More information

이번장에서는본격적으로사이트를제작하도록하겠습니다. 우선사이트제작에앞서몇가지준비사항및주의점이있습니다. 1. 예제를실행하기위해선 WAMP 또는 MAMP 서버가필요합니다. WAMP 서버설치방법은부록을참고하기바랍니다. 1 사이트준비작업 2. 포토샵을이용해서만들어진사이트디자인레이

이번장에서는본격적으로사이트를제작하도록하겠습니다. 우선사이트제작에앞서몇가지준비사항및주의점이있습니다. 1. 예제를실행하기위해선 WAMP 또는 MAMP 서버가필요합니다. WAMP 서버설치방법은부록을참고하기바랍니다. 1 사이트준비작업 2. 포토샵을이용해서만들어진사이트디자인레이 chapter 14 사이트제작전 준비작업및 프론트페이지제작 14장에서는사이트제작에들어가기에앞서, 필요한사항을먼저점검하도록하겠습니다. 사이트를제작하기위해선먼저준비해야하는사항이몇가지있는데, 실제서버와같이동작하게해주는개인용웹서버가준비되어있어야하고, 사이트의디렉토리또한구성되어야합니다. 또한사이트를제작하려면, 포토샵과같은그래픽저작도구를이용해서레이아웃을구성해야함은물론이고,

More information

PowerPoint Presentation

PowerPoint Presentation Class - Property Jo, Heeseung 목차 section 1 클래스의일반구조 section 2 클래스선언 section 3 객체의생성 section 4 멤버변수 4-1 객체변수 4-2 클래스변수 4-3 종단 (final) 변수 4-4 멤버변수접근방법 section 5 멤버변수접근한정자 5-1 public 5-2 private 5-3 한정자없음

More information

2_안드로이드UI

2_안드로이드UI 03 Layouts 레이아웃 (Layout) u ViewGroup의파생클래스로서, 포함된 View를정렬하는기능 u 종류 LinearLayout 컨테이너에포함된뷰들을수평또는수직으로일렬배치하는레이아웃 RelativeLayout 뷰를서로간의위치관계나컨테이너와의위치관계를지정하여배치하는레이아웃 TableLayout 표형식으로차일드를배치하는레이아웃 FrameLayout

More information

하둡을이용한파일분산시스템 보안관리체제구현

하둡을이용한파일분산시스템 보안관리체제구현 하둡을이용한파일분산시스템 보안관리체제구현 목 차 - 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - 1. 사용자가웹서버에로그인하여다양한서비스 ( 파일업 / 다운로드, 폴더생성 / 삭제 ) 를활용 2. 웹서버와연동된하둡서버에서업 / 다운로드된파일을분산저장. ( 자료송수신은 SSH 활용 ) - 9 - - 10 - - 11 -

More information

PowerPoint Template

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

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

PHP & ASP

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

More information

AMP는 어떻게 빠른 성능을 내나.key

AMP는 어떻게 빠른 성능을 내나.key AMP는 어떻게 빠른 성능을 내나? AU개발 김태훈 kishu@navercorp.com AMP 란무엇인가? AMP 방식으로 HTML을 만들고 AMP JS를 로딩하고 AMP 컴포넌트만 사용하면 웹페이지의 빠른 렌더링을 보장 + 구글 검색 결과에서 즉시 로딩(빠르고 멋있게) AMPs are just Web Pages! AMPs are just Web Pages!

More information

ePapyrus PDF Document

ePapyrus PDF Document 처음부터다시배우는 HTML5&CSS3: 실전웹표준사이트제작까지 3 부 실전웹표준사이트구축 에서는 1부와 2부에서배운내용을기반으로실제웹사이트를만드는방법을소개합니다. 기존책들과다르게실무에서사용하는방법을바탕으로한실제웹사이트제작기법을단계별로학습해볼수있습니다. 특히디렉토리나하부사이트구조는어떻게구성하는지, 실제웹페이지가만들어지는방법이그대로나오기때문에, 에서배운내용은향후실제웹사이트를만들때많은도움을받을수있습니다.

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

3 [CSS] 1. CSS 2. CSS 구문 3. 스타일시트종류 4. CSS 기본속성 (Properties)

3 [CSS] 1. CSS 2. CSS 구문 3. 스타일시트종류 4. CSS 기본속성 (Properties) 3 [CSS] 1. CSS 2. CSS 구문 3. 스타일시트종류 4. CSS 기본속성 (Properties) HTML, JavaScript, CSS 3부. CSS 1. CSS HTML 태그들은웹페이지를제작하는데있어서다양하게설계하거나수시로변경하는데많은제약이따릅니다. 이를보완하기위해만들어진것이스타일시트이고스타일시트의표준안이 CSS입니다. 1.1 CSS 특징 HTML

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

웹표준 / 웹접근성의정의 웹접근성은장애인들도웹을사용할수있도록하는것입니다. 장애인들도웹사이트와페이지를이동하고, 웹의정보 를확인 / 이해하며, 웹페이지를작성할수있도록하는것입니다. 웹접근성이확보되면, 장애인뿐만아니라, 우리자신도언제가될노인에게많은도움을줍니다. 웹에접근하는데영

웹표준 / 웹접근성의정의 웹접근성은장애인들도웹을사용할수있도록하는것입니다. 장애인들도웹사이트와페이지를이동하고, 웹의정보 를확인 / 이해하며, 웹페이지를작성할수있도록하는것입니다. 웹접근성이확보되면, 장애인뿐만아니라, 우리자신도언제가될노인에게많은도움을줍니다. 웹에접근하는데영 CSS& XHTML 웹표준가이드 2010.04.05 박성곤 웹표준 / 웹접근성의정의 웹접근성은장애인들도웹을사용할수있도록하는것입니다. 장애인들도웹사이트와페이지를이동하고, 웹의정보 를확인 / 이해하며, 웹페이지를작성할수있도록하는것입니다. 웹접근성이확보되면, 장애인뿐만아니라, 우리자신도언제가될노인에게많은도움을줍니다. 웹에접근하는데영향을미치는요인은시각, 청각, 지각,

More information

과정명

과정명 CSS (Cascading Style Sheet) 1. CSS 개요 2. CSS Selector, Cascading,Font 3. CSS Table, Positioning 4. CSS Pseudo Class 5. CSS Print 6. CSS Layout - 1 - CSS - 2 - CSS (Cascading Style Sheet) 개요 CSS(Casscading

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

웹디자이너를 위한 쎄지오4

웹디자이너를 위한 쎄지오4 웹디자이너를위한쎄지오 4.x CMS 템플릿제작가이드라인 본문서는쎄지오 4.0 기반의 CMS 템플릿제작방법에대한안내서이다. 쎄지오 CMS 로운영될홈페이지의레이아웃코딩기법부터표준화에맞춘 css 클래스네임설명, 플래시쇼의주요기능과규격화사이즈등템플릿시안하나를만들기위한전체실무적인요소들을알기쉽게설명하여웹디자이너라면누구나템플릿제작을쉽게따라할수있도록구성되어있다. 안내서는웹표준및웹접근성을준수할수있도록하였다.

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

미쓰리 파워포인트

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

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 바로가기마케팅서비스 사용자매뉴얼 최종업데이트 2017-05-04 문서버전 1.4 목차 1. 서비스소개및신청 1) 바로가기마케팅서비스란? 2) 서비스신청및적용 3) 서비스활용 2. 디자인설정 ( 구 ) 디자인 1) 바로가기아이콘소개페이지적용 2) 바로가기접속상태아이콘노출 3) 바로가기접속주문혜택노출 3. 디자인설정 - 스마트디자인 1) 바로가기아이콘서비스소개페이지적용

More information

슬라이드 1

슬라이드 1 BUSINESS DATA What DATA Disconnection SCOPE CONTEXTUAL Planner ENTERPRISE MODEL CONCEPTUAL List of Things Important to the Business ENTITY = Class of Business Thing e.g. Semantic Model Owner SYSTEM MODEL

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

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

리포트_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

Reflow 원인과 마크업 최적화 Tip

Reflow 원인과 마크업 최적화 Tip Created by Firejune at 2011/07/19, Last modified 2016/09/11 Reflow 원인과 마크업 최적화 Tip CSS를 이용한 복잡한 페이지 디자인과 Javascript를 이용한 동적변화가 매우 다양하게 이용되고 있는 상황에서 이에 따른 속도저하 등의 문제점이 발생하고 있다. 이를 원천적으로 해결할 수는 없겠으나 조금이라도

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 실습문제 Chapter 05 데이터베이스시스템... 오라클로배우는데이터베이스개론과실습 1. 실습문제 1 (5 장심화문제 : 각 3 점 ) 6. [ 마당서점데이터베이스 ] 다음프로그램을 PL/SQL 저장프로시져로작성하고실행해 보시오. (1) ~ (2) 7. [ 마당서점데이터베이스 ] 다음프로그램을 PL/SQL 저장프로시져로작성하고실행해 보시오. (1) ~ (5)

More information

HTML5

HTML5 퀴즈 류관희 게임규칙 동적으로 HTML 요소생성 생성된 HTML 요소의화면배치및위치옮기기 퀴즈게임 국가명과수도명의짝맞추기 배열 ( 국가명, 수도명 ) 짝모두맞추면 => 동영상플레이 2 퀴즈게임 3 4 5 6 주요특징 배열 : 국가명과수도명저장 피드백 : 색상변경, 동영상재생 플레이 20쌍중에 4 쌍무작위로선택 글자 : 국가명과수도명 => 그림으로대치 7 사전준비항목

More information

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가

More information

chap 5: Trees

chap 5: Trees 5. Threaded Binary Tree 기본개념 n 개의노드를갖는이진트리에는 2n 개의링크가존재 2n 개의링크중에 n + 1 개의링크값은 null Null 링크를다른노드에대한포인터로대체 Threads Thread 의이용 ptr left_child = NULL 일경우, ptr left_child 를 ptr 의 inorder predecessor 를가리키도록변경

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

Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전

Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전 Jwplayer Guide Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전까지 나왔으며 편리함을 위해서 아래를 링크를 걸어둡니다 [다운로드]

More information

Web Scraper in 30 Minutes 강철

Web Scraper in 30 Minutes 강철 Web Scraper in 30 Minutes 강철 발표자 소개 KAIST 전산학과 2015년부터 G사에서 일합니다. 에서 대한민국 정치의 모든 것을 개발하고 있습니다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 스크래퍼/크롤러의 작동 원리를 이해한다. 목표

More information

Print

Print 2015. 5 V.1.0 / Brand Strategy Team Introduction - 유원골프재단소개 유원골프재단은 최고의 골프 인재 육성을 후원하는 재단 입니다. 유원 ( 裕原 ) 의 의미인 부드러운 ( 편안한 ) 언덕 을 재단의 3 대 목적 사업인 최고의 골프 선수 / 지도자 / 전문가 양성과 연계하여세 개의 큰 언덕으로 표현하였고, 이는 중의적으로

More information

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

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

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

MATLAB and Numerical Analysis

MATLAB and Numerical Analysis School of Mechanical Engineering Pusan National University dongwoonkim@pusan.ac.kr Review 무명함수 >> fun = @(x,y) x^2 + y^2; % ff xx, yy = xx 2 + yy 2 >> fun(3,4) >> ans = 25 시작 x=x+1 If문 >> if a == b >>

More information

Lab10

Lab10 Lab 10: Map Visualization 2015 Fall human-computer interaction + design lab. Joonhwan Lee Map Visualization Shape Shape (.shp): ESRI shp http://sgis.kostat.go.kr/html/index.html 3 d3.js SVG, GeoJSON, TopoJSON

More information

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일 Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae

More information

OCW_C언어 기초

OCW_C언어 기초 초보프로그래머를위한 C 언어기초 4 장 : 연산자 2012 년 이은주 학습목표 수식의개념과연산자및피연산자에대한학습 C 의알아보기 연산자의우선순위와결합방향에대하여알아보기 2 목차 연산자의기본개념 수식 연산자와피연산자 산술연산자 / 증감연산자 관계연산자 / 논리연산자 비트연산자 / 대입연산자연산자의우선순위와결합방향 조건연산자 / 형변환연산자 연산자의우선순위 연산자의결합방향

More information

iii. Design Tab 을 Click 하여 WindowBuilder 가자동으로생성한 GUI 프로그래밍환경을확인한다.

iii. Design Tab 을 Click 하여 WindowBuilder 가자동으로생성한 GUI 프로그래밍환경을확인한다. Eclipse 개발환경에서 WindowBuilder 를이용한 Java 프로그램개발 이예는 Java 프로그램의기초를이해하고있는사람을대상으로 Embedded Microcomputer 를이용한제어시스템을 PC 에서 Serial 통신으로제어 (Graphical User Interface (GUI) 환경에서 ) 하는프로그램개발예를설명한다. WindowBuilder:

More information

수식모드수식의표현법 수학식표현 조남운 조남운 수학식표현

수식모드수식의표현법 수학식표현 조남운 조남운 수학식표현 조남운 mailto:namun.cho@gmail.com 2008.2.20 AMS-TEX 미국수학회 (American Mathematical Society) 에서만든수학패키지 대부분의수학표현은 AMS-TEX 을이용하고있음. 자세한내용은 AMS-TEX 매뉴얼을참조할것. http://www.ams.org/tex/amstex.html AMS-TEX 패키지선언 \usepackage{amssymb,

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 10. DOM 과이벤트처리, 입력검 증 문서객체모델 (DOM) DOM 은 HTML 문서의계층적인구조를트리 (tree) 로표현 DOM 과 BOM HTML 문서를객체로표현한것을 DOM 웹브라우저를객체로표현한것을 BOM(Browser Object Model) HTML 요소찾기 동적인웹페이지를작성하려면원하는요소를찾아야한다. id 로찾기 태그이름으로찾기

More information