달력

1

« 2020/1 »

  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  


HTML5 독타입

독타입은 간단히 말하면 브라우저 혹은 다른 파서에게 지금 보고 있는 문서의 종류를 알려주는 수단입니다.

   

HTML5이전 독타입

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd>

HTML5 독타입

<!DOCTYPE html>

   

   

head 요소

HTML5이전 문자 인코딩 표시

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5 문자 인코딩 표시

<meta charset="UTF-8">

 

Posted by codedragon codedragon

댓글을 달아 주세요

 

 

 

Firefox 기본 브라우저 설정

Firefox브라우저 실행

1) 우측 상단의 메뉴 열기 버튼 클릭 > 설정

2) Firefox 시작페이지 > 화면 아래의 설정 버튼 클릭

   

   

   

Mozilla Firefox를 기본 브라우저로 설정

고급 > 일반 > 기본 설정 - Firefox를 기본 브라우저로 설정

   

확인

   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

 

Chrome 브라우저를 기본 브라우저로 설정

Chrome 브라우저 실행

오른쪽 상단의 Chrome 맞춤 설정 및 제어 아이콘 클릭

아래 쪽의 기본 브라우저의 Chrome을 기본 브라우저로 클릭

   

   

   

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

   

열려진 웹페이지

   

방법1

Ctrl + U 단축키를 누르면 소스코드를 확인할 수 있습니다.

   

방법2

마우스 우클릭 > 페이지 소스보기 클릭

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

댓글을 달아 주세요

FireFox 브라우저 설치

http://www.mozilla.org/ko/

하단의 무료 다운로드 버튼을 클릭합니다.

   

실행

   

   

   

   

설치 완료!

   

   

SQLite Manager 설치하기

주소표시줄 우측의 버튼을 클릭하여 설정 메뉴를 오픈합니다.

   

부가기능 버튼을 클릭합니다.

   

   

SQLite로 검색합니다.

   

SQLite Manager항목의 설치하기를 버튼을 클릭합니다.

   

설치 중..

   

다시 시작 링크를 클릭하여 FireFox 브라우저를 다시 실행합니다.

   

설치 완료!

   

   

SQLite 실행하기

FireFox 메뉴 > 보기 > SQLite Manager

   

   

모든 파일(*.*) 선택

   

에뮬레이터로 부터 추출한 db파일 선택 >

열기(O)

   

   

   

   

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

댓글을 달아 주세요

HTML5와 CSS3 사용의 장점

   

웹 개발의 플랫폼

의미가 더 분명한 태그들, 사이트나 창 사이의 더 나은 데이터 교환, 애니메이션, 더 나은 멀티미디어 지원 등, 더 좋은 사용자 인터페이스 구현 가능

더 분명한 마크업

내용을 설명하는데 직접 연관된 요소 추가 (제목, 푸터, 내비게이션 절, 사이드바, 글을 정의하는 요소들)

플러그인에 덜 의존하는 멀티미디어

오디오, 비디오 기능 제공

웹 소켓

HTML5는 서버와의 연결을 유지시키는 웹 소켓을 지원

클라이언트 측 스토리지

웹 스토리지와 웹 SQL 데이터베이스 API를 이용하면 브라우저에서 동작하긴 하지만 모든 데이터를 사용자의 컴퓨터에 보관하는 애플리케이션을 만들 수 있음.

더 좋은 인터페이스

테이블에 스타일을 적용하거나, 둥근 모서리를 만드는 등 사용자 인터페이스를 좀 더 풍요롭게 사용 가능.

더 좋은 폼

더 나은 사용자 인터페이스 컨트롤 제공

향상된 접근성

스크린 리더 같은 프로그램을 사용해서 보조 기술에 의존하는 사람에게 더 좋은 웹 페이지 접근성을 제공.

개선된 선택자

CSS3에서 제공하는 선택자를 이용하면 테이블의 홀수 행과 짝수 행을 지정한다거나, 선택된 체크박스를 전부 찾는다거나, 심지어는 특정 그룹에서 마지막 문단을 찾아낼 수도 있음.

시각효과

CSS3을 통해, 배경 이미지에 의존하거나 마크업을 추가하는 일 없이 요소에 그림자와 그래디언트를 넣을 수 있음.

 

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

자바스크립트 소스 파일(.js) 생성 방법  (0) 2014.08.20
웹표준  (0) 2014.06.09
HTML5와 CSS3 사용의 장점  (0) 2014.06.05
HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
02.html-시멘틱 태그 작성  (0) 2014.05.20
Posted by codedragon codedragon

댓글을 달아 주세요

Window > Web Brower > 1 Default system web brower 선택

   

   

   

Chrome 브라우저를 기본 브라우저로 설정

Chrome 브라우저 실행

오른쪽 상단의 Chrome 맞춤 설정 및 제어 아이콘 클릭

아래 쪽의 기본 브라우저의 Chrome을 기본 브라우저로 클릭

   

   

   

   

   

Firefox 기본 브라우저 설정

Firefox브라우저 실행

1) 우측 상단의 메뉴 열기 버튼 클릭 > 설정

2) Firefox 시작페이지 > 화면 아래의 설정 버튼 클릭

   

   

   

Mozilla Firefox를 기본 브라우저로 설정

고급 > 일반 > 기본 설정 - Firefox를 기본 브라우저로 설정

   

확인

   

   

   

인터넷 익스플로러를 기본 브라우저로 설정

인터넷 익스플로러 실행

1) 우측 상단의 도구 아이콘 클릭 > 인터넷 옵션

2) 메뉴 > 도구 > 설정 > 인터넷 옵션

   

프로그램 > Internet Explorer열기 - Internet Explorer를 기본 브라우저로 설정합니다.

확인

Posted by codedragon codedragon

댓글을 달아 주세요