반응형

지난 시간에는 이미지에 대해 배웠으면 이번시간은 iframe에 대해 배우겠습니다.

 

문서 내에 다른 문서를 불러들이는 방법은 <iframe>을 사용합니다. 원래 HTML5에서 <frameset>을 폐지하였는데, 거기에 속하는 <iframe>은 불행중(?) 다행스럽게도 남아있습니다. 보안에 문제를 가지고 있는 <iframe>은 HTML5의 'sandbox' 속성으로 <iframe>으로 연결된 문서 내의 스크립트가 실행되지 않도록 할 수 있습니다.

 

 

1. 아이프레임 기초

 

아래와 같이 <body></body>사이에 넣으시면 되요.

 

 

아래와 같이 브라우저 내에 다른 문서를 부르게 되는거죠. 옛날엔 많이들 보셨을거예요~

 

예제파일 다운받기 : html5_6_1.html

 

 

문서를 'src' 뿐만 아니라 HTML5에서 추가된 것으로는 'srcdoc'이며 크롬, 파이어폭스, 사파리6+ 그리고 오페라15+ 에서만 확인 됩니다.

 

아래와 같이 사용하면 됩니다.

 

아래는 실행 화면이구요~

 

 

예제파일 다운 받기 : html5_6_2.html

 

 

 

 

 

 

 

 

 

 

반응형

'프로그래밍 > HTML5' 카테고리의 다른 글

이미지 요소들  (0) 2015.08.10
앵커(Anchor)  (0) 2015.08.07
테이블 요소  (0) 2015.08.02
HTML5 기본 태그(3)  (0) 2015.07.27
HTML5 기본 태그(2)  (0) 2015.07.24
반응형

이번시간에는 이미지에 대해 배워보겠습니다.

 

이미지는 <img> 요소로 'src'라는 이미지 파일의 경로와 'alt'라는 대체 텍스트를 작성하는 속성이 있습니다.

 

아래 코드를 보시면 그림에 Company info라는 대체 텍스트가 있습니다.

 

 

실행을 시켜보면 다음과 같이 나옵니다.

(저는 사당역 근처에 있기 때문에 사당역을 표시했습니다)

 

 

 

 

파일 다운받기 : html5_5_1.html

 

 

다음으로는 지난 시간에 배운 앵커를 접목해보면 아래와 같습니다.

 

 

 

 

테두리가 있는데 이미지 파일에 링크를 해준거고 #은 현재 페이지에 있어라 라는 뜻이예요~

 

 

 

좀 더 복잡한 구조로 상세한 설명이 필요한 것은 'longdesc' 속성으로 사용하는데 현재 브라우저들이 지원을 제대로 해주지 않기 때문에 생략하겠습니다.

 

문서 내에서 다른 문서를 불러들이는 방법인 아이프레임에 대해 알아보겠습니다~

 

 

반응형

'프로그래밍 > HTML5' 카테고리의 다른 글

아이프레임  (0) 2015.08.14
앵커(Anchor)  (0) 2015.08.07
테이블 요소  (0) 2015.08.02
HTML5 기본 태그(3)  (0) 2015.07.27
HTML5 기본 태그(2)  (0) 2015.07.24
반응형

웹사이트에서 버튼이나 글씨를 클릭할때 이동을 하는 것을 많이 보실꺼예요.

 

현재 문서에서 다른 문서로 가기 위해서는 <a>가 필요합니다.

<a>는 'href' 의 속성으로 대부분 <a href="URL">로 경로를 지정하면 쉽게 구현할 수 있습니다.

 

 

1. 웹 페이지 절대 경로

'http://도메인주소' 의 형식으로 링크주소를 입력해주면 됩니다.

<a href="http://google.co.kr">구글로 바로가기</a>

 

아래는 결과입니다. 한번 클릭해보세요 구글로 링크될거예요~

 

구글로 바로가기

 

 

2. 웹 페이지 상대경로

 

'/도메인주소/*.html' or '폴더명/파일명' 의 형식으로 입력해주면 됩니다.

<a href="test/test.html"> test 사이트 </a>

 

 

3. E-메일 계정

 

메일 계정을 연결 할때는 'mailto:이메일주소' 를 사용하면 됩니다.

<a href="mailto:test@naver.com"> test@naver.com </a>

 

 

4. 파일 연결하기

 

*.exe 같은 실행 파일은 실행이 되고, 그렇지 않으면 다운로드가 됩니다.

<a href="/folder/abc.exe"> abc 다운받기 </a>

 

이렇게 4개면 링크하는 것이 끝났다고 할 수 있습니다.

 

다음시간에는 이미지 삽입에 대해 배워보겠습니다~

반응형

'프로그래밍 > HTML5' 카테고리의 다른 글

아이프레임  (0) 2015.08.14
이미지 요소들  (0) 2015.08.10
테이블 요소  (0) 2015.08.02
HTML5 기본 태그(3)  (0) 2015.07.27
HTML5 기본 태그(2)  (0) 2015.07.24
반응형

드디어 오늘은 좀 지루한 기본 태그를 벗어나서 표를 작성하는 시간을 갖겠습니다.

표를 작성 할때는 블록 레벨 요소인 <table>을 사용합니다.

 

표의 기본 구조는 <tr>로 행(table row)을 정의하고, 그 안에 제목 셀(table header cell)인<th>와 데이터 셀(table data cell)인 <td>를 넣은 후에 전체를 <table>로 둘러싸게 됩니다.

 

<table>에는 boarder, width, align 등 여러가지 속성이 있는데 사실 상, 전부 다 외우고 사용하지는 않고 대부분 CSS에서 처리를 합니다.

 

아래 코드를 보시면 <table border = "1">은 테이블에 1의 굵기를  나타내라라는 것입니다.

 

그리고 테이블 위에 <caption>은 제목을 나타냅니다.

 

<thead>, <tbody>, <tfoot>은 그룹핑으로 머리, 몸, 다리 로 나뉘어 집니다.

※ 필수는 아니지만 브라우저에서는 순서에 맞게 인식을 하기 때문에 헷갈리지 않도록 순서에 맞게 작성하시는게 좋습니다.

 

th의 scope에서 "col"은 column을 나타내는 세로방향, "row"는 가로방향을 나타냅니다.

 

 

소스 다운받기 : html5_4_1.html

 

결과를 보시면 다음과 같습니다.

 

 

그러면 셀을 합치고 싶으면 어떻게 해야 할까요?

바로 colspan(열 병합, 가로 셀 합치기)와 rowspan(행 병합, 세로 셀 합치기) 속성을 사용하시면 됩니다.

아래 예제는 열 병합을 사용한 예제 입니다. <td>에 colspan = "2"를 사용한 것은 셀 2칸을 병합 했다는 뜻입니다.

 

 

 

소스 다운받기 : html5_4_2.html

 

아래와 같이 HTML2가 열이 병합이 된거 보이시죠?

 

 

 

 

더 많은 속성들이 있지만 대부분 CSS에서 활용하기 때문에 테이블은 여기서 마치도록 하고 다음에는 앵커에 대해 알아보도록 하겠습니다.

 

반응형

'프로그래밍 > HTML5' 카테고리의 다른 글

이미지 요소들  (0) 2015.08.10
앵커(Anchor)  (0) 2015.08.07
HTML5 기본 태그(3)  (0) 2015.07.27
HTML5 기본 태그(2)  (0) 2015.07.24
HTML5 기본 태그(1)  (0) 2015.07.15
반응형

각종 목록을 표현하는 요소인 <ul>과 <ol> 외에 정의형 목록인 dl 요소가 있습니다.

 

<dl>은 definition list의 약자로 용어로 구성된 목록입니다.

<dl> 안에는 <dt>와 <dd>요소를 넣을 수 있는데요.

 

<dt>는 definition term 

<dd>은 definition description의 약자입니다.

<dt>와 <dd>의 차이점은 특별하게 차이점은 아래와 같습니다.

 

<dt> : 인라인 요소이며 인라인 요소와 텍스트를 포함

<dd> : 블록 레벨 요소로 인라인 요소와 텍스트를 포함

 

 

예제를 먼저 보겠습니다.

<dl> 사이에 <dt>와 <dd>를 입력합니다.

 

<body>
 <dl>
  <dt>Definition List</dt>
  <dd>H</dd>
  <dd>T</dd>
  <dd>M</dd>
  <dd>L</dd>
  <dd>5</dd>
 </dl>
</body>

 

소스 파일 다운 : html5_3_1.html

 

 

위의 예제는 아래와 같은 결과가 출력됩니다.

 

 

특별하게 다른 점은 없다고 생각하시겠지만, 정의를 한다는 것에 대한  의의가 있습니다.

정의를 한 메뉴에 <ul> 혹은 <ol>을 사용한 서브 메뉴가 있다고 하면 어떻게 될까요?

 

<body>
 <dl>
  <dt>Definition List</dt>
  <dd>H</dd>
   <ul>
    <li>Nickoo's</li>
    <li>Blog</li>
   </ul>
  <dd>T</dd>
   <ol>
    <li>첫번째</li>
    <li>두번째</li>
   </ol>
  <dd>M</dd>
  <dd>L</dd>
  <dd>5</dd>
 </dl>
</body>

 

소스파일 다운로드 : html5_3_2.html

 

아래와 같은 결과를 출력할 수 있습니다.

 

 

 

 

다음 시간에는 테이블 구조에 대해 배워보겠습니다.

 

 

 

반응형

'프로그래밍 > HTML5' 카테고리의 다른 글

앵커(Anchor)  (0) 2015.08.07
테이블 요소  (0) 2015.08.02
HTML5 기본 태그(2)  (0) 2015.07.24
HTML5 기본 태그(1)  (0) 2015.07.15
HTML5 기본구조  (0) 2015.07.13
반응형

기본 태그 2번째 시간이예요.

 

오늘은 목록을 표현하는 요소인 ul, ol을 해보려고 합니다.

 

<ul>은 비 순차적 목록으로 unordered list라고 하며 <ol>은 순차적 목록으로 ordered list 의 약자로 사용이 됩니다.

 

<ul>과 <ol>은 <body> </body> 사이에 씁니다.

아래와 같이 쓰는데 <ul></ul> 사이에 <li></li>가 있네요?  <li>요소는 list item으로 반드시 <ul>과 <ol> 사이에 써야 합니다. 

 

 

<body>
 <h1>Main menu</h1>
 
 <ul>
  <li>H</a></li>
  <li>T</a></li>
  <li>M</a></li>
  <li>L</a></li>
  <li>5</a></li>
 </ul>
</body>

 

위 코드의 결과는 아래와 같습니다.

 

 

소스 파일 : html5_2_1.html

 

 

그렇다면 <li>는 한번만 사용해야 하나요? 답은 아닙니다. 또 한번 사용할 수 있어요.

하지만 <li> </li> 사이에 또 <li> </li> 를 사용 할 수 없어요.

 

그러면 어떻게 해야 하냐구요? 아래와 같이 <ul> 혹은 <ol> 사이에 넣어야 해요.

 

<body>
 <h1>Main menu</h1>
 
 <ul>
  <li>H</a></li>
   <ul>
    <li>T</li>
    <li>E</li>
    <li>S</li>
    <li>T</li>
   </ul>
  <li>T</a></li>
  <li>M</a></li>
  <li>L</a></li>
  <li>5</a></li>
 </ul>
</body>

 

결과는 아래와 같답니다. ● 다음에 ○ 순서로 나옵니다.

 

소스 파일 : html5_2_2.html

 

 

그러면 <ol> 을 볼까요?

 

사용 방법은 <ol>도 <ul>과 같아요.

 

<body>
 <h1>Order List</h1>
 
 <ol>
  <li>H</a></li>
  <li>T</a></li>
  <li>M</a></li>
  <li>L</a></li>
  <li>5</a></li>
 </ol>
</body>

 

결과를 볼까요? <ul>의 ●과 다르게 숫자가 있죠?

 

 

<ol>은 <ul>과 다르게 번호 대신 알파벳이나 로마자로 표시 할 수 있습니다.

하지만 <ol> 사이에 type=" " 를 써줘야 해요. a , A , i 등이 있어요. 

아래 예제는 대문자 A를 써봤어요.

 

<body>
 <h1>Order List</h1>
 
 <ol type="A">
  <li>H</a></li>
  <li>T</a></li>
  <li>M</a></li>
  <li>L</a></li>
  <li>5</a></li>
 </ol>
</body>

 

결과를 보시면 대문자 알파벳 순으로 되어 있죠?

 

소스파일 : html5_2_4.html

 

 

 

 

꼭 순서대로 밖에 못 하는 건가요? 그것도 아닙니다.

start 라는 것을 쓰면 반대로 출력이 되요. 저는 숫자 8부터 시작을 해볼께요.

 

<body>
 <h1>Order List</h1>
 
 <ol start="8">
  <li>H</a></li>
  <li>T</a></li>
  <li>M</a></li>
  <li>L</a></li>
  <li>5</a></li>
 </ol>
</body>

 

결과는 8부터 출력되네요.

 

소스 파일 : html5_2_5.html

 

 

 

<ol> 같은 경우에는 지원되는 브라우저가 있고 안되는 브라우저가 있어요.

혹시라도 안된다고 생각이 되시면 브라우저 지원 때문에 그러니까 알아보셔야 해요~

 

 

 

 

 

 

반응형

'프로그래밍 > HTML5' 카테고리의 다른 글

테이블 요소  (0) 2015.08.02
HTML5 기본 태그(3)  (0) 2015.07.27
HTML5 기본 태그(1)  (0) 2015.07.15
HTML5 기본구조  (0) 2015.07.13
HTML5에 대하여...  (0) 2015.07.12
반응형

오늘은 HTML5의 제목, 문단, 구분선 알아보겠습니다.

 

기본 태그는 웹페이지를 만드는데 가장 기본이 됩니다.

차근차근 3가지를 알아보겠습니다.

 

1. 제목 태그

 

<h1>이 가장 큰 제목이고 <h1> ~ <h6>까지 지정할 수 있습니다.

 

 

보시다시피 <h1>에서부터 <h6>까지 작성한 결과는 아래와 같습니다.

 

 

 

 

 

html5_1.html

 

2. 문단 태그

 

문단을 나타내는 <p>요소는 다음 요소와 하나의 빈 줄을 통해 구분시켜 주는 블록 요소입니다.

 

 

<p>와</p> 사이의 글을 보시면 결과는 아래와 같습니다.

 

 

 

 

html5_1_2.html

 

 

3. 구분선 태그

 

구분선에는 주제와 화제 전환을 나타내는 <hr>과 <br>요소가 있습니다.

 

 

 

 

위의 결과는 <hr> 사이에 밑줄이 있고, 문장 내에 있는 <br>은 엔터를 친 것과 같은 효과와 같습니다.

 

 

 

html5_1_3.html

 

 

 

이렇게 기본 태그 3개를 배웠습니다.

 

혹시 궁금하신 것 있으시면 댓글 달아주세요 ^^

 

 

 

 

 

 

 

반응형

'프로그래밍 > HTML5' 카테고리의 다른 글

테이블 요소  (0) 2015.08.02
HTML5 기본 태그(3)  (0) 2015.07.27
HTML5 기본 태그(2)  (0) 2015.07.24
HTML5 기본구조  (0) 2015.07.13
HTML5에 대하여...  (0) 2015.07.12
반응형

이제 본격적으로 HTML5의 기본구조부터 시작하겠습니다.

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>Nickoo's Blog</title>

</head>

<body>

HTML5 공부 시작

</body>

</html>

 

위와 같은 구조로 되어 있습니다. 한개씩 간단히 살펴보면 아래와 같습니다.

 

<!DOCTYPE html>

웹 표준으로 마크업하는 가장 기본적인 사항은 '문서형의 선언'입니다. HTML 문서의 최상단에 쓰며 HTML 버전에 따라 차이가 있습니다. 제 블로그는 전부 HTML5의 문서형을 기본으로 하겠습니다.

 

<html lang="ko">

웹 문서 작성에서는 언어지정은 필수입니다. HTML에서 지정할 수 있는 언어는 대략 150여개 정도이며 제일 많이 사용하는 언어는 한국어(ko), 미국영어(en-us), 영국영어(en) 등이 있습니다.

 

전체 언어 목록은 여기 를 확인해주세요.

 

<meta charset="UTF-8">

문서를 시작하면 문자 코드셋을 지정해야 합니다. 1바이트를 사용하는 영문의 경우는 크게 상관이 없지만, 한글이나 한자같은 경우에는 2바이트 혹은 3바이트로 늘어나는 부분을 표현하기 위해서 지정해야 합니다.

 

<head>

</head>

머리말 부분으로 브라우즈 정보, 메타 정보, 스크립트, 스타일 시트 등의 요소를 포함할 수 있다.

ex) <title>, <base>, <meta>, <style>, <link>, <script> 

 

<title>Nickoo's Blog</title>

브라우저 툴바의 제목을 나타내는 것과 즐겨찾기에 추가될 때 페이지 제목이 되는 부분입니다.

 

<body>

HTML5 공부 시작

</body>

홈페이지의 내용이 들어가는 부분입니다.

 

 

위와 같이 설정하여 아래와 같은 결과를 얻었습니다.

 

 

 

 

반응형

'프로그래밍 > HTML5' 카테고리의 다른 글

테이블 요소  (0) 2015.08.02
HTML5 기본 태그(3)  (0) 2015.07.27
HTML5 기본 태그(2)  (0) 2015.07.24
HTML5 기본 태그(1)  (0) 2015.07.15
HTML5에 대하여...  (0) 2015.07.12
반응형

웹 서핑을 하다보면 수 많은 좋은 강의들이 많이 있습니다.

저는 이 공간을 저도 공부 할 겸 알기 쉽게 올려보려고 합니다.

 

 

 

HTML은 웹을 사용하는 사람들은 들어봤을 법한 언어입니다.

 

천리안, 하이텔, 나우누리 등의 PC통신 모뎀으로 접속하던 때를 막 지나 익스플로러와 넷스케이프를 통해 웹으로 시선을 돌릴 때 HTML은 이미 많이 사용이 되고 있었습니다. 특히 채팅용으로 태그를 사용할때 말이죠..

 

HTML5의 역사는 아래 도표를 참고하시면 1991년부터 시작되었습니다.

 

 

      이미지 출처 : http://www.scoroncocolo.com/Html5.html

 

 

1991년부터 1997년까지 HTML은 빠르게 발전하여 보다 예쁘고 쉽게 다양한 기능을 구현 할 수 있는 CSS가 포함이 되었고, JavaScript 가 추가되었습니다.
HTML 4.0 이후에도 W3C 에 의해서 HTML 은 HTML 4.01, XHTML 1.0, 1.1, 2.0 등으로 진화시키기 위해서 많은 노력을 해왔습니다만  XHTML 2.0 은 W3C 의 의도와는 다르게(정확한 이유는... 잘 모르겠네요) XHTML 은 브라우저들에게서 외면당해졌고, W3C 와는 생각이 다른, 몇개의 브라우저회사가 모여 WHATWG 라는 Working Group을 설립하여, 웹 개발현실을 반영하면서도 하위버젼의 HTML 과도 호환되는 발전된 HTML 을 정의하기 시작하였습니다.

WHATWG 를 인정하지 않던 단호한 W3C 도 XHTML 2.0을 포기하고 2009년 10월, WHATWG 를 인정하였으며, 그들과 방향성을 공유하여 'HTML 5' 라는 이름을 가지고 새롭게 시작하였습니다.

차세대 웹 표준으로 확정된 HTML5은 기존 텍스트와 하이퍼링크로 표시하던 HTML이 동영상, 음악 재생과 같은 멀티미디어뿐만 아니라 위치제공, 페이지 효과, 심지어 게임까지 만들수 있습니다.

 

여기까지 HTML5에 대한 간단한 소개였고 다음부터는 실습을 해보겠습니다.

반응형

'프로그래밍 > HTML5' 카테고리의 다른 글

테이블 요소  (0) 2015.08.02
HTML5 기본 태그(3)  (0) 2015.07.27
HTML5 기본 태그(2)  (0) 2015.07.24
HTML5 기본 태그(1)  (0) 2015.07.15
HTML5 기본구조  (0) 2015.07.13

+ Recent posts