달력

12

« 2019/12 »

  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  



 

시멘틱 태그 (sematic Tag)

·         = 시맨틱 요소(Semantic Element)

·         무의미한 태그가 아니라  '의미를 갖는다' 뜻으로, 태그가 스스로 의미를 지닌다는 뜻입니다.

·         태그이름만 보고도 해당 역할을 알수 있는 태그를 지칭합니다.

 

 

 

 

 

 

 

시맨틱 (Semantic Web)

·         인터넷과 같은 분산환경에서 리소스( 문서, 각종 파일, 서비스 ) 대한 정보와 자원 사이의 관계-의미 정보(Semanteme) 기계(컴퓨터) 처리할 있는 온톨로지(Ontology)형태로 표현하고, 이를 자동화된 기계(컴퓨터) 처리하도록 하는 프레임워크이자 기술입니다.

·         동적이고 반응형으로 페이지를 구현할 있습니다.

 

http://bit.ly/2Uw6cjw

http://bit.ly/2vPYJEV

 

 

 

 


Posted by codedragon codedragon

댓글을 달아 주세요

시멘틱 태그

   

sematic

무의미한 태그가 아니라

'의미를 갖는다'는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻

   

   

시멘틱 태그

태그

설명

header

사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨

hgroup

제목과 부제목을 묶는 역할

nav

사이트나 메뉴나 링크 같은 내비게이션 요소들이 포함

section

실제 문서 내용이 들어감

article

문서 내용이 많을 경우 여러 개의 <article>요소로 나눌 수 있음

aside

문서의 주요 내용 외의 내용들을 넣어 문서의 주 영역 주변에 배치

footer

작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음

   

   

표현을 위한 태그

태그

설명

mark

특정 텍스트를 강조하고자 할 때 사용하는 태그

   

   

소스코드

<html>

<head>

<meta charset="UTF-8">

<title>시멘틱 태그</title>

</head>

<body>

<header id="page_header">

<hgroup>

<h1>대한 대학교 홈페이지</h1>

<h4>세계를 향상 지식의 공간</h4>

</hgroup>

<nav>

<ul>

<li><a href="">1학년</a></li>

<li><a href="">2학년</a></li>

<li><a href="">3학년</a></li>

<li><a href="">4학년</a></li>

</ul>

</nav>

</header>

<section>

<header>

<h3>이달의 소식</h3>

</header>

<article>

네셔널 컨테스트에서 <strong>대상 수상</strong> 하여 대한 대학교를 알렸습니다. 수상자는 <mark>홍길동</mark>입니다.

</article>

</section>

<footer>

2020 대한 대학교

</footer>

</body>

</html>

   


   

   

   

   

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

문단 태그  (0) 2014.10.26
CSS 기본 구성요소  (0) 2014.10.25
시멘틱 태그- 01.html  (0) 2014.10.17
태그  (0) 2014.10.11
CSS Color Names  (0) 2014.10.09
CSS 용어  (0) 2014.10.03
Posted by codedragon codedragon

댓글을 달아 주세요

   

그래픽 주요 클래스

속성

설명

Canvas

뷰의 표면에 직접 그릴 수 있도록 만들어 주는 객체로 그래픽 그리기를 위한 메서드가 정의되어 있습니다.

Paint

그래픽 그리기를 위해 필요한 색상 등의 속성을 담고 있습니다.

Bitmap

픽셀로 구성된 이미지로 메모리 상에 그래픽을 그리는 데 사용됩니다.

Drawable

사각형, 이미지 등의 그래픽 요소가 객체로 정의되어 있습니다.

   

   

그리기 관련 주요 메서드 

속성

설명

점 그리기

void drawPoint(float x, float y, Paint paint)

하나의 점을 그림. drawPoints()를 이용하면 여러 개의 점을 그릴 수 있습니다.

선 그리기

void drawLine(float startX, float startY, float stopX, floatY, Paint paint)

두 점의 x, y 좌표값을 이용해 선을 그립니다.

drawLines()를 이용하면 여러 개의 선을 그릴 수 있습니다.

사각형 그리기

void drawRect(float left, float top, float right, float bottom, Paint paint)

모서리의 자표값을 이용해 사각형을 그립니다.

둥근 모서리의 사각형 그리기

void drawRoundRect(RectF rect, float rx, float ry, Paint paint)

사각 영역과 모서리 부분 타원의 반지름 값을 이용해 둥근 모서리의 사각형을 그립니다.

원 그리기

void drawCircle(float cx, float cy, float radius, Paint paint)

원의 중앙 좌표값과 반지름을 이용해 원을 그립니다.

타원 그리기

void drawOval(RectF oval, Paint paint)

사각 영역을 이용해 타원을 그립니다

아크 그리기

void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

사각 영역과 각도를 이용해 아크를 그립니다

패스 그리기

void drawPath(Path path, Paint paint)

패스 정보를 이용해 연결선 또는 부드러운 곡선을 그립니다

비트맵 그리기

void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

비트맵 이미지를 주어진 좌표값에 그립니다

   

   

그래픽 그리기 단계

1

새로운 클래스 생성 후 View를 상속

2

Context객체 하나를 파라미터로 가지는 생성자 정의

3

그리기 객체 초기화 및 필요한 속성 설정

4

onDraw()메소드 내에서 그리기 객체 호출

5

onTouch()메소드 내에서 터치 이벤트 처리

6

새로 만든 View클래스를 메인 액티비티에 추가

   

XML레이아웃에 새로 생성한 View를 element로 직접 지정 시

XML레이아웃에 새로 생성한 View를 element로 직접 지정 시 반드시 아래 생성자를 정의해 주어야 합니다.

//XML에 element로 지정시 반드시 아래 생성자 정의

public MyView(Context context, AttributeSet attributeSet){

super(context, attributeSet);

}

   

메인 액티비티에 추가할 때 소스 코드

new연산자를 통해 객체를 생성한 후 setContentView()메소드로 화면 전체에 보여줍니다.

MyView myView = new MyView(this);

setContentView(myView);

   

그리기 메소드

onDraw()

뷰가 화면에 디스플레이될 때 자동으로 호출됩니다.

onTouch()

터치 이벤트를 처리합니다.

   

   

Canvas 와 Paint 다루기

 

Canvas

Canvas(android.graphics.Canvas)는 직사각형 영역에 뭔가를 그리는 수단들을 제공합니다.

Paint

Paint 클래스는 스타일과 복합 색 및 렌더링 정보를 캡슐화합니다.

 

설정

메소드

색상 설정

setColor(Color.RED)

안티앨리어싱 설정

New Paint(Paint.ANTI_ALIAS_FLAG)

스타일 설정

setStyle(Paint.Style.STROKE)

외곽선만 나타나고 색이 채워지지 않음

그래디언트 설정

setShader()

   

 

도형 그리기

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(new MyCanvas(this));

}

private class MyCanvas extends View{

 

public MyCanvas(Context context) {

super(context);

}

protected void onDraw(Canvas canvas){

canvas.drawColor(Color.WHITE);

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

paint.setColor(Color.BLUE);

 

//원

canvas.drawCircle(100,100,50,paint);

 

paint.setColor(Color.YELLOW);

//사각형

canvas.drawRect(200, 200, 300, 300, paint);

}

}

   

 

비트맵 이미지 처리

 

비트맵 이미지 그리기

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);

canvas.drawBitmap(bitmap, 0, 0, null);

   

비트맵 이미지 크기 조정하기

bitmap2=Bitmap.createScaledBitmap(bitmap,100,80,false);

canvas.drawBitmap(bitmap2, 0,300, null);

   

비트맵 이미지가 사용한 메모리 해지하기

bitmap.recycle();

bitmap2.recycle();

 

SDCard에서 비트맵 이미지 읽기

File file=new File(Environment.getExternalStorageDirectory(),fileName);

FileInputStream fis=null;

try{

fis=new FileInputStream(file);

}catch(FileNotFoundException e){}

Log.d("error",String.format("[%s] is not found",fileName));

return;

   

   

Posted by codedragon codedragon

댓글을 달아 주세요

HTML5 지원 API

API

내용

웹 스토리지(Web Storage)

로컬 스토리지(Local Storage). 웹의 내용을 사용자 컴퓨터에 임시저장하는 기능

드래그앤트롭(Drag & Drop)

웹 페이지상에서 원하는 항목을 드래그할 수 있게 해주는 기능

지오로케이션(Geolocation)

공개지도 API와 함께 사용하면 자신의 현재 위치를 알아낼 수 있는 기능

캔버스(Canvas) 2D

Canvas 요소와 그리기 API를 제공

웹 워커(Web Workers)

CPU에 부하를 많이 주는 작업을 여러 워커(Worker)로 나누어 작업

웹 SQL 데이터베이스

(Web SQL Database)

웹 브라우저에 내장 데이터베이스를 만들고 SQL 질의를 사용할 수 있는 기능

 

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

웹표준  (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
01.html-시멘틱 태그  (0) 2014.05.20
Posted by codedragon codedragon

댓글을 달아 주세요

시멘틱 태그

페이지의 구조를 더 잘 나타내기 위해 새로운 태그 추가

태그

설명

header

페이지나 절의 헤더 영역을 정의

footer

페이지나 절의 푸터 영역을 정의

nav

페이지나 절의 내비게이션 영역을 정의

section

페이지의 논리적 영역 또는 내용의 그룹을 정의

article

하나의 글 또는 완결된 내용을 정의

aside

부차적인 또는 관련 있는 내용을 정의

meter

특정 범위 내의 측정 값을 나타냄

progress

어떤 목표까지의 진척도를 실시간으로 보여줌

hgroup

제목과 그에 관련된 부제목을 하나로 묶음

figure,figcaption

그림이나 비디오 같은 멀티미디어 콘텐츠에 캡션을 붙일 때

audio,video

멀티미디어 콘텐츠를 표시

embed

플러그인 콘텐츠 표시

mark

텍스트에 형광펜으로 칠한 것과 같은 강조 효과

time

날짜와 시간을 표시

ruby,rt,rp

루비 문자 표시

canvas

웹상에 그래픽을 표시

command

사용자 실행 명령어 표시

details

추가적인 정보나 사용자가 요청하는 정보 표시

datalist

사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 리스트

keygen

양식(form)을 서버로 전송할 때 한 쌍의 키를 만들어 private key(프라이비트 키)는 로컬에 저장하고 public key(퍼블릭 키)는 서버에 저장

output

수학적인 계산의 결과값을 표시

   

   

시맨틱 요소(Semantic Element) 또는 시맨틱 태그

의미 없는 <div> 태그의 사용보다 문서의 내용을 쉽게 이해할 수 있도록 의미를 가지는 새로운 태그 요소

태그

설명

header

사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함

hgroup

제목과 부제목을 묶어주는 역할

nav

사이트의 메뉴나 링크 같은 내비케이션 요소 포함

section

실제 문서 내용

article

문서 내용이 많을 경우 여러 개의 <article> 요소로 분할

aside

문서의 주요 내용 외의 내용들. 문서의 주영역 주변에 배치

footer

작성자 정보나 저작권 정보, 관련 문서 링크 등 부가 정보 배치

 

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

HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
02.html-시멘틱 태그 작성  (0) 2014.05.20
01.html-시멘틱 태그  (0) 2014.05.20
HTML5 시멘틱 태그  (0) 2014.05.20
ch01-first / 01.html-Hello World  (0) 2014.05.17
Posted by codedragon codedragon

댓글을 달아 주세요