달력

12

« 2019/12 »

  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  

HTML 요소를 선택자로 사용시

tag { … }

특정 요소에 특정 스타일을 적용 : <p> 태그에 대한 스타일만 적용

p { font-family: 휴먼매직체; font-size: 20pt; }

   

tag, tag, … tag { … }

여러 요소에 동일 서식 적용 : <p>,<b> 태그에 적용

p, b { font-family: 휴먼매직체; font-size: 20pt; }

   

tag1 tag2 { … }

tag1 내의 tag2에만 스타일을 적용할 때 사용

p b { font-family: 휴먼매직체; font-size: 20pt; }

   

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

CSS 주석  (0) 2015.03.10
CSS 데이터 형식  (0) 2015.02.01
HTML 요소를 선택자로 사용시  (0) 2015.01.01
참고 & 출처 HTML5, CSS, XML  (0) 2014.11.25
색상 태그  (0) 2014.11.20
CSS 선언  (0) 2014.11.14
Posted by codedragon codedragon

댓글을 달아 주세요

   

색상 표기법

HTML 문서에서 색상을 표현하는 방식은 영문의 색상명, 16진수 RGB 값 2가지가 있습니다.

   

16진수 표기법은 RGB표기법 이라고도 하는데,

R(red) 2자리, G(green) 2자리, B(blue) 2자리 총 6자리로 구성됩니다.

RR

GG

BB

  

  

  

   

   

RGB 컬러 값 (HTML Color Names)

출처: <http://www.w3schools.com/tags/ref_colornames.asp>

Color Name

HEX

Color

Shades

Mix

AliceBlue 

#F0F8FF

  

Shades

Mix

AntiqueWhite 

#FAEBD7

  

Shades

Mix

Aqua 

#00FFFF

  

Shades

Mix

Aquamarine 

#7FFFD4

  

Shades

Mix

Azure 

#F0FFFF

  

Shades

Mix

Beige 

#F5F5DC

  

Shades

Mix

Bisque 

#FFE4C4

  

Shades

Mix

Black 

#000000

  

Shades

Mix

BlanchedAlmond 

#FFEBCD

  

Shades

Mix

Blue 

#0000FF

  

Shades

Mix

BlueViolet 

#8A2BE2

  

Shades

Mix

Brown 

#A52A2A

  

Shades

Mix

BurlyWood 

#DEB887

  

Shades

Mix

CadetBlue 

#5F9EA0

  

Shades

Mix

Chartreuse 

#7FFF00

  

Shades

Mix

Chocolate 

#D2691E

  

Shades

Mix

Coral 

#FF7F50

  

Shades

Mix

CornflowerBlue 

#6495ED

  

Shades

Mix

Cornsilk 

#FFF8DC

  

Shades

Mix

Crimson 

#DC143C

  

Shades

Mix

Cyan 

#00FFFF

  

Shades

Mix

DarkBlue 

#00008B

  

Shades

Mix

DarkCyan 

#008B8B

  

Shades

Mix

DarkGoldenRod 

#B8860B

  

Shades

Mix

DarkGray 

#A9A9A9

  

Shades

Mix

DarkGreen 

#006400

  

Shades

Mix

DarkKhaki 

#BDB76B

  

Shades

Mix

DarkMagenta 

#8B008B

  

Shades

Mix

DarkOliveGreen 

#556B2F

  

Shades

Mix

DarkOrange 

#FF8C00

  

Shades

Mix

DarkOrchid 

#9932CC

  

Shades

Mix

DarkRed 

#8B0000

  

Shades

Mix

DarkSalmon 

#E9967A

  

Shades

Mix

DarkSeaGreen 

#8FBC8F

  

Shades

Mix

DarkSlateBlue 

#483D8B

  

Shades

Mix

DarkSlateGray 

#2F4F4F

  

Shades

Mix

DarkTurquoise 

#00CED1

  

Shades

Mix

DarkViolet 

#9400D3

  

Shades

Mix

DeepPink 

#FF1493

  

Shades

Mix

DeepSkyBlue 

#00BFFF

  

Shades

Mix

DimGray 

#696969

  

Shades

Mix

DodgerBlue 

#1E90FF

  

Shades

Mix

FireBrick 

#B22222

  

Shades

Mix

FloralWhite 

#FFFAF0

  

Shades

Mix

ForestGreen 

#228B22

  

Shades

Mix

Fuchsia 

#FF00FF

  

Shades

Mix

Gainsboro 

#DCDCDC

  

Shades

Mix

GhostWhite 

#F8F8FF

  

Shades

Mix

Gold 

#FFD700

  

Shades

Mix

GoldenRod 

#DAA520

  

Shades

Mix

Gray 

#808080

  

Shades

Mix

Green 

#008000

  

Shades

Mix

GreenYellow 

#ADFF2F

  

Shades

Mix

HoneyDew 

#F0FFF0

  

Shades

Mix

HotPink 

#FF69B4

  

Shades

Mix

IndianRed  

#CD5C5C

  

Shades

Mix

Indigo  

#4B0082

  

Shades

Mix

Ivory 

#FFFFF0

  

Shades

Mix

Khaki 

#F0E68C

  

Shades

Mix

Lavender 

#E6E6FA

  

Shades

Mix

LavenderBlush 

#FFF0F5

  

Shades

Mix

LawnGreen 

#7CFC00

  

Shades

Mix

LemonChiffon 

#FFFACD

  

Shades

Mix

LightBlue 

#ADD8E6

  

Shades

Mix

LightCoral 

#F08080

  

Shades

Mix

LightCyan 

#E0FFFF

  

Shades

Mix

LightGoldenRodYellow 

#FAFAD2

  

Shades

Mix

LightGray 

#D3D3D3

  

Shades

Mix

LightGreen 

#90EE90

  

Shades

Mix

LightPink 

#FFB6C1

  

Shades

Mix

LightSalmon 

#FFA07A

  

Shades

Mix

LightSeaGreen 

#20B2AA

  

Shades

Mix

LightSkyBlue 

#87CEFA

  

Shades

Mix

LightSlateGray 

#778899

  

Shades

Mix

LightSteelBlue 

#B0C4DE

  

Shades

Mix

LightYellow 

#FFFFE0

  

Shades

Mix

Lime 

#00FF00

  

Shades

Mix

LimeGreen 

#32CD32

  

Shades

Mix

Linen 

#FAF0E6

  

Shades

Mix

Magenta 

#FF00FF

  

Shades

Mix

Maroon 

#800000

  

Shades

Mix

MediumAquaMarine 

#66CDAA

  

Shades

Mix

MediumBlue 

#0000CD

  

Shades

Mix

MediumOrchid 

#BA55D3

  

Shades

Mix

MediumPurple 

#9370DB

  

Shades

Mix

MediumSeaGreen 

#3CB371

  

Shades

Mix

MediumSlateBlue 

#7B68EE

  

Shades

Mix

MediumSpringGreen 

#00FA9A

  

Shades

Mix

MediumTurquoise 

#48D1CC

  

Shades

Mix

MediumVioletRed 

#C71585

  

Shades

Mix

MidnightBlue 

#191970

  

Shades

Mix

MintCream 

#F5FFFA

  

Shades

Mix

MistyRose 

#FFE4E1

  

Shades

Mix

Moccasin 

#FFE4B5

  

Shades

Mix

NavajoWhite 

#FFDEAD

  

Shades

Mix

Navy 

#000080

  

Shades

Mix

OldLace 

#FDF5E6

  

Shades

Mix

Olive 

#808000

  

Shades

Mix

OliveDrab 

#6B8E23

  

Shades

Mix

Orange 

#FFA500

  

Shades

Mix

OrangeRed 

#FF4500

  

Shades

Mix

Orchid 

#DA70D6

  

Shades

Mix

PaleGoldenRod 

#EEE8AA

  

Shades

Mix

PaleGreen 

#98FB98

  

Shades

Mix

PaleTurquoise 

#AFEEEE

  

Shades

Mix

PaleVioletRed 

#DB7093

  

Shades

Mix

PapayaWhip 

#FFEFD5

  

Shades

Mix

PeachPuff 

#FFDAB9

  

Shades

Mix

Peru 

#CD853F

  

Shades

Mix

Pink 

#FFC0CB

  

Shades

Mix

Plum 

#DDA0DD

  

Shades

Mix

PowderBlue 

#B0E0E6

  

Shades

Mix

Purple 

#800080

  

Shades

Mix

Red 

#FF0000

  

Shades

Mix

RosyBrown 

#BC8F8F

  

Shades

Mix

RoyalBlue 

#4169E1

  

Shades

Mix

SaddleBrown 

#8B4513

  

Shades

Mix

Salmon 

#FA8072

  

Shades

Mix

SandyBrown 

#F4A460

  

Shades

Mix

SeaGreen 

#2E8B57

  

Shades

Mix

SeaShell 

#FFF5EE

  

Shades

Mix

Sienna 

#A0522D

  

Shades

Mix

Silver 

#C0C0C0

  

Shades

Mix

SkyBlue 

#87CEEB

  

Shades

Mix

SlateBlue 

#6A5ACD

  

Shades

Mix

SlateGray 

#708090

  

Shades

Mix

Snow 

#FFFAFA

  

Shades

Mix

SpringGreen 

#00FF7F

  

Shades

Mix

SteelBlue 

#4682B4

  

Shades

Mix

Tan 

#D2B48C

  

Shades

Mix

Teal 

#008080

  

Shades

Mix

Thistle 

#D8BFD8

  

Shades

Mix

Tomato 

#FF6347

  

Shades

Mix

Turquoise 

#40E0D0

  

Shades

Mix

Violet 

#EE82EE

  

Shades

Mix

Wheat 

#F5DEB3

  

Shades

Mix

White 

#FFFFFF

  

Shades

Mix

WhiteSmoke 

#F5F5F5

  

Shades

Mix

Yellow 

#FFFF00

  

Shades

Mix

YellowGreen 

#9ACD32

  

Shades

Mix

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

HTML 요소를 선택자로 사용시  (0) 2015.01.01
참고 & 출처 HTML5, CSS, XML  (0) 2014.11.25
색상 태그  (0) 2014.11.20
CSS 선언  (0) 2014.11.14
특수문자  (0) 2014.11.13
문단 태그  (0) 2014.10.26
TAG #000000, #000080, #00008B, #0000CD, #0000FF, #006400, #008000, #008080, #008B8B, #00BFFF, #00CED1, #00FA9A, #00FF00, #00FF7F, #00FFFF, #191970, #1E90FF, #20B2AA, #228B22, #2E8B57, #2F4F4F, #32CD32, #3CB371, #40E0D0, #4169E1, #4682B4, #483D8B, #48D1CC, #4B0082, #556B2F, #5F9EA0, #6495ED, #66CDAA, #696969, #6A5ACD, #6B8E23, #708090, #778899, #7B68EE, #7CFC00, #7FFF00, #7FFFD4, #800000, #800080, #808000, #808080, #87CEEB, #87CEFA, #8A2BE2, #8B0000, #8B008B, #8B4513, #8FBC8F, #90EE90, #9370DB, #9400D3, #98FB98, #9932CC, #9ACD32, #A0522D, #A52A2A, #A9A9A9, #ADD8E6, #ADFF2F, #AFEEEE, #B0C4DE, #B0E0E6, #B22222, #B8860B, #BA55D3, #BC8F8F, #BDB76B, #C0C0C0, #C71585, #CD5C5C, #CD853F, #D2691E, #D2B48C, #D3D3D3, #D8BFD8, #DA70D6, #DAA520, #DB7093, #DC143C, #DCDCDC, #DDA0DD, #DEB887, #E0FFFF, #E6E6FA, #E9967A, #EE82EE, #EEE8AA, #F08080, #F0E68C, #F0F8FF, #F0FFF0, #F0FFFF, #F4A460, #F5DEB3, #F5F5DC, #F5F5F5, #F5FFFA, #F8F8FF, #FA8072, #FAEBD7, #FAF0E6, #FAFAD2, #FDF5E6, #FF0000, #FF00FF, #FF1493, #FF4500, #FF6347, #FF69B4, #FF7F50, #FF8C00, #FFA07A, #FFA500, #FFB6C1, #FFC0CB, #FFD700, #FFDAB9, #FFDEAD, #FFE4B5, #FFE4C4, #FFE4E1, #FFEBCD, #FFEFD5, #FFF0F5, #FFF5EE, #FFF8DC, #FFFACD, #FFFAF0, #FFFAFA, #FFFF00, #FFFFE0, #FFFFF0, #FFFFFF, 16진수, Aliceblue, AntiqueWhite, aqua, Aquamarine, Azure, bb, Beige, Bisque, black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DodgerBlue, FireBrick, FloralWhite, ForestGreen, fuchsia, Gainsboro, GG, GhostWhite, GOLD, GoldenRod, GRAY, green, GreenYellow, HoneyDew, HotPink, HTML, html5, IndianRed, indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSteelBlue, LightYellow, lime, LimeGreen, Linen, Magenta, maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, pink, Plum, PowderBlue, purple, Red, rgb, RosyBrown, RoyalBlue, RR, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, silver, SkyBlue, SlateBlue, SlateGray, snow, SpringGreen, SteelBlue, Tan, teal, Thistle, Tomato, Turquoise, Violet, Wheat, white, WhiteSmoke, yellow, YellowGreen, 색상, 색상명, 표기법
Posted by codedragon codedragon

댓글을 달아 주세요

HTML 기본 구조

<html>

<head>

<title></title>

</head>

<body> </body>        

</html>

   

웹 문서 구조

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

CSS Color Names  (0) 2014.10.09
CSS 용어  (0) 2014.10.03
HTML 기본 구조  (0) 2014.10.01
CSS 개요  (0) 2014.09.25
01.html-Hello World  (0) 2014.09.13
HTML Color Names  (0) 2014.09.05
Posted by codedragon codedragon

댓글을 달아 주세요

CSS(Cascading Style Sheets)

  • 기존의 XHTML 한계를 해결하고 홈페이지에 다양하고 새로운 효과를 표현하기 위해 사용
  • 문서의 각 요소를 화면에 표시하기 위해 스타일 규칙을 모아놓은 문서
  • 데이터를 포장하기 위한 포장지 역할

   

   

CSS의 등장 배경

  • HTML의 제약성에서 탈피.
  • 홈페이지 전체에 통일감과 일관성을 유지.
  • 홈페이지 제작 시간을 단축시키고 문서의 용량을 줄임
  • CSS의 표준화 작업과 신기술 및 팁을 제공하는 W3C에서 1996년 CSS레벨1 발표
  • 1998년 CSS레벨2 발표

   

   

W3C-CSS Homepage

http://www.w3.org/Style/CSS/

   

   

CSS의 장점/단점

CSS의 장점

기능 확장성

HTML 기능의 확장 가능

양식 모듈화

흐름이 같은 문서 양식으로 전체 구성 가능

간편성

문서 형식을 손쉽고 다양하게 구성 가능

일관성

사용 환경에 영향 받지 않음

   

CSS의 단점

브라우저의 호환성 문제

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

CSS 용어  (0) 2014.10.03
HTML 기본 구조  (0) 2014.10.01
CSS 개요  (0) 2014.09.25
01.html-Hello World  (0) 2014.09.13
HTML Color Names  (0) 2014.09.05
HTML파일 인코딩 변경하기  (0) 2014.08.27
Posted by codedragon codedragon

댓글을 달아 주세요

   

jQuery(document).ready()

문서의 준비가 완료되면 매개 변수로 전달된 함수를 실행하라는 의미 

<script>

$(document).ready(function(){

 

});

</script>

   

아래의 표현도 동일한 기능 수행

   

<script>

$(function(){

 

});

</script>

   

   

jQuery 기본 선택자

   

선택자

설명

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

입력 양식 필터 선택자

  

 필터 선택자

기본 필터 선택자와 함수 필터 선택자가 있음

   

   

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

$('*').css('color','red');

});

</script>

   

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

   

<script>

$(document).ready(function(){

$('h1').css('color','orange');

});

</script>

   

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

$('#target').css('color','red');

});

</script>

   

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

$('.item').css('color','red');

});

</script>

   

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

   

<script>

$(document).ready(function(){

$('body > div').css('color','red');

});

</script>

   

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

   

<script>

$(document).ready(function(){

$('body div').css('color','red');

});

</script>

   

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

   

선택자 형태

설명

요소[속성]

특정 속성을 가지고 있는 문서 객체를 선택

요소[속성=값]

속성 안의 값이 특정 값과 같은 문서 객체를 선택

요소[속성~=값]

속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택

요소[속성^=값]

속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택

요소[속성$=값]

속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택

요소[속성*=값]

속성 안의 값이 특정 값을 포함하는 문서 객체를 선택

   

입력 양식 필터 선택자

   

선택자 형태

설명

요소:button

input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택

요소:checkbox

input 태그 중 type 속성이 checkbox인 문서 객체를 선택

요소:file

input 태그 중 type 속성이 file인 문서 객체를 선택

요소:image

input 태그 중 type 속성이 image인 문서 객체를 선택

요소:password

input 태그 중 type 속성이 password인 문서 객체를 선택

요소:radio

input 태그 중 type 속성이 radio인 문서 객체를 선택

요소:reset

input 태그 중 type 속성이 reset인 문서 객체를 선택

요소:submit

input 태그 중 type 속성이 submit인 문서 객체를 선택

요소:text

input 태그 중 type 속성이 text인 문서 객체를 선택

   

선택자 형태

설명

요소:checked

체크된 입력 양식을 선택

요소:disabled

비활성화된 입력 양식을 선택

요소:enabled

활성화된 입력 양식을 선택

요소:focus

초점이 맞춰져 있는 입력 양식을 선택

요소:input

모든 입력 양식을 선택(input,textarea,select,button 태그)

요소:selected

option 객체 중 선택된 태그를 선택

   

필터 선택자

   

기본 필터 선택자 

선택자 형태

설명

요소:odd

홀수 번째에 위치한 문서 객체를 선택

요소:even

짝수 번째에 위치한 문서 객체를 선택

요소:first

첫 번째 위치한 문서 객체를 선택

요소:last

마지막에 위치한 문서 객체를 선택

   

함수 필터 선택자 

선택자 형태

설명

요소:contains(문자열)

특정 문자열을 포함하는 문서 객체를 선택

요소:eq(n)

n번째에 위치하는 문서 객체를 선택

요소:gt(n)

n번째 초과에 위치하는 문서 객체를 선택

요소:has(h1)

h1태그를 가지고 있는 문서 객체를 선택

요소:lt(n)

n번째 미만에 위치하는 문서 객체를 선택

요소:not(선택자)

선택자와 일치하지 않는 문서 객체를 선택

요소:nth-child(3n+1)

3n+1번째에 위치하는 문서 객체를 선택(1,4,7,...)

   

    

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

Sencha 라이브러리 설치  (0) 2014.09.04
01.html-객체 생성 2  (0) 2014.09.02
00.jQuery 기본  (0) 2014.08.31
객체 생성1  (0) 2014.08.26
프로젝트 생성  (0) 2014.08.24
jQuery API 문서 2  (0) 2014.08.23
Posted by codedragon codedragon

댓글을 달아 주세요

서버에 HTML문서 호출 후 HTML문서 출력하기

  • 웹페이지의 대문페이지(index.html)를 스레드를 통해 읽어와서 표시

   

   

강의 내용

activity_main.xml

RelativeLayout 변경

Graphical Layout > Form Widgets-Button추가

Graphical Layout > Text Fields-Plain Text 추가

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

MainActivity.java

import

//서버에 접근해 원하는 HTML를 호출한 후 파일을 반환 받음

//스레드를 구성해서 서버에 접근해서 HTML호출 후 HTML문서 출력

  

   

      

출력 결과

   

   

 

Posted by codedragon codedragon

댓글을 달아 주세요

브라우저에 HTML 웹페이지 출력

   

   

강의 내용

activity_main.xml

RelativeLayout 변경

Graphical Layout > Composite-WebView추가

   

  

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

/asset/hello.html

HTML문서 작성

MainActivity.java

//URL 링크

>확인

//HTML 직접 생성 (로컬파일 사용)

>확인

//HTML 파일 사용 (asset폴더의 로컬파일 사용)

>확인

//자바 스크립트 허용

- 자바 스크립의 alert 대체 코드 작성

>확인

   

   

assets폴더에 .html 생성방법

   

  

  

   

출력 결과

소스 코드

//URL 링크

browser.loadUrl("http://m.naver.com");

   

출처: <https://github.com/10zeroone/study_Android/blob/master/50BrowserDemo/src/kr/adroid/browser/MainActivity.java>

   

   

   

소스 코드

//HTML 직접 생성

String msg ="<html><body>Hellow Android World!!!</body></html>";                

browser.loadDataWithBaseURL(null, msg, "text/html", "UTF-8", null);

   

 

   

   

   

소스 코드

자바 스크립트 허용 전

//assets HTML파일 이용

browser.loadUrl("file:///android_asset/hello.html");

   

 

   

   

   

소스 코드

public class MainActivity extends Activity {

WebView browser;        

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

browser =(WebView)findViewById(R.id.wvWeb);

//assets HTML파일 이용

browser.loadUrl("file:///android_asset/hello.html");

//자바 스크립트 허용

browser.getSettings().setJavaScriptEnabled(true);                

MyWebChromeClient myWebChromeClient = new MyWebChromeClient();                

//브라우저에 등록

browser.setWebChromeClient(myWebChromeClient);

}

//자바 스크립트의 alert 대체 코드 작성

//자바 스크립트의 alert 경고창을 대체하는 안드로이드 경고창 구현

private class MyWebChromeClient extends WebChromeClient{

@Override

public boolean onJsAlert(WebView view, String url, String message, JsResult result){

//message        : '경고창'

new AlertDialog.Builder(MainActivity.this).setTitle("경고").setCancelable(false).setNeutralButton("확인", new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

   

}

}).show();

result.confirm();

   

return true;

}

}

}

   

 

   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

자바스크립트주석

//

한줄 주석 처리

/* ~ */

한줄 이상의 주석 처리

   

   

주석 및 출력 단축키

한 줄 주석

Ctrl + /

여러 줄 주석        

Ctrl + Shift + /

   

   

자바스크립트 출력

document.write('자바스크립트 출력 구문');

   

   

일반데이터 표시 방식

  • 일반데이터로 "를 사용하는 경우
  • 일반데이터로 '를 사용하는 경우

   

   

소스 코드

   

문자/문자열 출력

document.write('Hello JavaWorld<br>');

document.write("Hello JavaWorld<br>");

document.write('<br>');

   


   

   

   

일반데이터로 "를 사용하는 경우

document.write('오늘은 "금요일"<br>');

document.write('<br>');

   



   

   

   

특수문자 표시하여 출력

"을 중복해서 쓸 경우 문자열 끝으로 인식하기 때문에 역슬래시(\)를 붙여주어야 특수기호로 인식합니다.

   

//document.write("오늘은 "금요일"<br>");

document.write("오늘은 \"금요일\"<br>");

   


   

   

   

   

일반데이터로 '를 사용하는 경우

문자와 문자열 입력 시 ", '를 적절히 조합하여 코딩 하거나

역슬래시(\)를 붙여주어야 특수기호로 인식합니다.

   

//document.write('오늘은 '토요일'<br>');

document.write('오늘은 \'토요일\'<br>');

document.write("오늘은 '토요일'<br>");

   


   

   

   

   

전체 소스

<html>

<head>

<meta charset="UTF-8">

<title>주석 출력</title>

<script type="text/javascript">        

// 주석        

/*

여러

주석

*/

//documentm.write('주석처리');

/* document.write('여러줄');

document.write('주석'); */

//출력 (문자/문자열)

document.write('Hello JavaWorld<br>');

document.write("Hello JavaWorld<br>");

document.write('<br>');

/* 일반데이터로 " 사용하는 경우 */

document.write('오늘은 "금요일"<br>');

//document.write("오늘은 "금요일"<br>");

document.write("오늘은 \"금요일\"<br>");

document.write('<br>');

/* 일반데이터로 ' 사용하는 경우 */

//document.write('오늘은 '토요일'<br>');

document.write('오늘은 \'토요일\'<br>');

document.write("오늘은 '토요일'<br>");

</script>

   

</head>

<body>

</body>

</html>

   


   

   

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

10.html-기본타입(문자열)  (0) 2014.05.28
05.html-기본타입(숫자)  (0) 2014.05.28
04.html-주석 및 출력  (0) 2014.05.24
00.변수와 자료형  (0) 2014.05.24
Sencha Touch(센차터치) 라이브러리 설치  (0) 2014.05.24
Sencha Touch, 프로젝트 생성  (0) 2014.05.24
Posted by codedragon codedragon

댓글을 달아 주세요

   

http://www.sencha.com/

   

   

센타터치

내장된 디자인인 네이티브 코드(자바, 오브젝트씨)와 유사함

자바스크립트 라이브러리임

UI를 자바스크립트로 작업해서 자동 변환되어 HTML을 만들어줌

   

   

센차터치의 장점

1) 다양한 UI컴포넌트의 지원, 데이터 처리를 위한 다양한 기술  지원

2) 빠른 처리 속도 앱과 가장 비슷한 UI 화면 제공

3) 쉽고 빠른 개발

4) 신기술 도입 속도가 빠르다.

5) 진정한 웹앱

   

   

웹 서버 환경에서는

처음 실행시 자바스크립트 읽어 들이므로 조금 느릴 수 있습니다.

모바일에서는 웹 전송보다 조금 더 빠른 성능을 보일 수 있습니다.

Posted by codedragon codedragon

댓글을 달아 주세요

실행위치

1) 실행위치(body태그)

2) 실행위치(head태그)

실행파일을 외부 파일에 명시하고 링크하기

   

   

File Info

02.html

script.js

   

   

소스 코드

   

<html>

<head>

<meta charset="UTF-8">

<title>실행파일을 외부 파일에 명시하고 링크하기</title>

<script type="text/javascript" src="script.js"></script>

</head>

<body>

</body>

</html>

   


   

   

   

document.write('script.js 있는 코드 실행');

   


   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요