Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

넥스브레인 HTML 교육자료

넥스브레인 내부 교육자료입니다.
by

최 종우

on 5 July 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 넥스브레인 HTML 교육자료

HTML?
HTML은 가까이 있다.
"# 아이디"와 ". 클래스"
CSS란(Cascading Style Sheet)?
HTML 마크업에 스타일을 입혀서 보기 좋게 만드는 것이 스타일 지정인데, 이 스타일을 따로 문서화한것이 스타일 시트이다. 이 스타일 시트의 표준안이 CSS 이다.
H
yper
T
ext
M
arkup
L
anguage
Hyper Text?
연결된 텍스트 정보

Markup Language?
구조화 언어
문서의 글자크기, 글자색, 글자모양, 그래픽, 링크등을 정의하는 명령어
꺽쇠괄호'<>'를 사용 <html>
일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍 <table></table>
시작태그만으로 그 영향을 나타내는 경우(img,br 등)도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작 <img /><br />
태그의 종류는 엄청 많다.
문법에 맞게 용도에 맞게 사용해야 한다. 모로가도 서울은 이제 그만!
웹접근성 준수의 시작은 바른 html 마크업!!
즐겨찾기 아이콘. 즐겨찾기(favorites)와 아이콘(icon)의 합성어
icon 파일을 만들어 link 태그를 이용해 호출한다.
IE에서는 주소 입력창에도 나타난다
검색엔진 최적화 (이하 SEO) 란?
웹 페이지가 검색엔진의 조건을 충족하여 결과의 상위에 나올 수 있도록 하는 작업
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>

<title>[**닷컴] :: </title>
:
:
<meta name="Description" content="**의 유무선컨버전스 통합사이트 ****입니다. ***에서는 ~ 다양한 혜택과 서비스를 제공하며, 항상 새로운 이벤트와 컨텐츠를 통해 스마트하고 즐거운 통신 생활을 누리실 수 있습니다." />
<meta name="keyword" content="****" />
:
</head>

<body onunload="" >

...


</body>
</html>
페이지의 콘텐츠와 관련이 없는 description 메타 태그 작성
"이것은 웹 페이지입니다" 또는 "유아용품에 대한 페이지" 등과 같은 일반적인 설명 사용
키워드만의 나열
description 메타 태그에 문서의 전체 내용을 복사하여 붙여넣음
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/DCq36ZGAyGY?rel=0" frameborder="0" allowfullscreen></iframe>
</body>
</html>
html 문서에 추가할 때 : 아이프레임 소스 입력
링크로 동영상 노출할때 : 동영상 경로로 <a>,<area> 태그 이용

style 적용된 상태
CSS 작성
style 요소 추가
css 문서를 작성하여 생성된 css 확장자를 가진 css파일을 link 태그로 호출
문서 내에 style 태그를 이용하는 방법
마크업에 직접 작성(인라인으로 작성)
스타일을 입히는 방법
인라인 스타일링
급할때, 한번 쓰고 다시 안쓸때 문서에 직접 작성
재사용성 떨어짐
CSS 파일 스타일링
스타일 교체를 손쉽게 할 수 있다.
재사용성이 좋다.
id : 식별자를 의미. html 문서 내에 하나만 존재할 수 있으므로, 자바스크립트에서도 많이 이용된다. #으로 표기
class : 속성 집합을 의미. 문서 내에서 여러번 사용할 수 있음. "."으로 표기
페이지 내의 반복적인 스타일 (간격, 글자 크기 등)은 클래스 화하여 재 사용하는 것이 속도에 좋다.
고유하고 정확한 페이지 제목 <title> 사용
"description" 메타 태그 사용 : 미리보기로 노출되는 페이지 요약 내용
<head>태그 내의 <title><meta> 활용
HTML markup
HTML이란?
웹브라우저에 하이퍼텍스트의 구조를 서술하는
컴퓨터 언어의 한종류
태그란?
의미있게!
내가 코더도 아니고 html이 뭔지 알게 뭐야?
html을 안다 한들 내가 뭐에 쓰겠어?
클라이언트 요구 듣고 설득하기도 바빠
We Can

!!
이것만 알아도
html 아는척 할수 있다.
"파비콘"으로 주소창을 홍보할 수 있습니다.
검색엔진 최적화하려면 "meta" 태그 활용은 기본이죠
블로그에 "동영상 홍보"도 해야겠죠?
소셜 미디어를 홍보하기 위해서 공유(share) 버튼을 클릭하여 나오는 iframe 태그를 활용하자
참고로, 소스보기는?
마우스 우클릭!!
소스보기 클릭!!
copy
html은 글자로만 되어 있는 데 어떻게 디자인처럼 나오는 거지?
바보!
CSS가 있잖아
CSS
이렇게 많았어?
마우스 우클릭
웹브라우저별 점유율
데스크탑 : IE 5 : 비 IE 5
모바일 : 사파리 6 : 안드로이드 3 : 기타 1
일상생활에서
은행업무도
영화를 관람할때도
쇼핑을 하려할때도
종이를 통해 정보를 얻던 우리는
HTML을 훑어보자!!
종이문서처럼
HTML 문서를 이용한다
근데 온통
html

잠깐!
내가 보는 화면이랑
사용자가 보는 화면이랑
다를수 있다고?
왜?
스타일 지정 방법
인라인 스타일링
웹 브라우저마다
렌더링방식이 서로 달라
불쌍한 개발자만 죽어나니
새로운 표준을 마련하고자 한다.
- 웹브라우저 벤더모임
뚜둥!!
스타일 작성 규칙
html 태그나 아이디,클래스의 이름을 선언하고 중괄호"{" , "}" 사이에 스타일 요소값을 적는다.
속성과 속성값은 "콜론 : "으로 구분
속성과 속성은 "세미콜론 ; "으로 구분
속성의 수도 엄청나게 많다. 다 못 세어봤음
다양한 웹 브라우저 때문
HTML5!!
HTML5란?
HTML의 최신규격이다.
브라우저간의 호환성을 위해 브라우저 제작사에서 협의체 구성
외부 플러그인이 없어도 멀티미디어나 그래픽 기능을 브라우저 자체적으로 구현 가능
플러그인 사용이 제한적인 스마트폰에서도 동일하게 구현이 가능하기 때문에 모바일에서 활용이 늘어가는 추세
2014년 권고 예정 (W3C)
HTML5 활용 예제
video - http://www.apple.com/html5/showcase/video/
type - http://www.apple.com/html5/showcase/typography
화면전환 - http://www.apple.com/html5/showcase/transitions/
cavas - http://html5cup.kayac.com/
demo - http://www.mrdoob.com/#/55/Fluid_simulation_02
이제 인터넷을 이용한다
얼굴이 이뻐지면 더 많이 꾸미게 되죠?
CSS3!!
CSS3란?
기존의 css에 그래픽적인 효과가 많이 추가되었으며,
애니메이션 효과와 3D 효과도 스타일에서 지정가능하다.
CSS3 예제
3D 큐브 - http://www.paulrhayes.com/experiments/cube/multiCubes.html
라운드 버튼 - http://www.webdesignerwall.com/demo/css-buttons.html
애니메이션 효과 - http://www.webkit.org/blog-files/3d-transforms/poster-circle.html
CSS3 Patterns - http://lea.verou.me/css3patterns/
필터 효과 - http://html5-demos.appspot.com/static/css/filters/index.html
Web의 진화
Web Trend 진화
HTML,CSS
크로스 브라우징 필요
크로스 브라우징이란?
어떤 웹 브라우저를 사용해도 제작자의 의도대로 사용자에 전달되도록 하는 것
BUT
브라우저 버그를 이용해 추가적인 작업이 필요
기존의 html4 규격으로는 브라우저별 간극을 좁히기 어려움
그래서
활용하려면?
카피
붙여넣기
아 귀찮아~
삽질을 하게 될 것이야!!
많이 당황 하셨쎄요?
Full transcript