반응형

오랜만에 포스팅을 하네요~

 

지난시간 CSS 꾸미는 방법은 3가지가 있다고 했었죠?

 

 

1. 각 요소에 직접 적용하는 CSS가 있습니다.

 

이 방법은 웹 표준의 방법에서 보면 그리 좋은 방법은 아닙니다. HTML안에 하나씩 일일히 적용해야 하는 불편함이 있지만 특별하게 페이지 혹은 게시판을 만들 때 유용하게 사용될 때가 있습니다.

 

아래와 같은 예제를 하나 만들었습니다.

 

 

 

 

html보다 조금 복잡해보이죠?

<body> </body> 사이에 집어 넣은 이 예제는 <p> 태그를 사용했습니다. p는 paragraph의 약자로 <p></p> 사이 글자색인 파란색과 배경을 노란색으로 하였습니다.

<span></span>은 Inline Text Container (문장 단위로 텍스트 영역을 지정하는 것)"인데, 그 자체로는 아무 역할도 하지 않고, 문장의 특정 구역에 CSS스타일을 지정할 때 사용합니다.

DIV 태그의 역할과도 비슷하지만, DIV 태그는 사각형 박스 모양으로 구역을 지정하고, SPAN은 한 문장 단위입니다. 웹페이지 중에서, 어떤 태그도 달려 있지 않은 곳에, 뭔가를 지정하기 위해서는 SPAN 태그를 사용하면 됩니다. 다시 본론으로 돌아오면, font-size를 사용해서 폰트 크기를 변경해라 라는 뜻입니다. 

결과를 보면 아래와 같습니다.

 

 

 

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

 

 

2. style요소를 활용한 방법

 

<body></body> 내에 CSS를 섞어서 쓰면 헷갈리고 불편할때가 있습니다. 이럴때는 <head></head>사이에 따로 모아 놓는 방법이 있습니다.

 

그 방법은 아래와 같습니다.

 

1번의 방법보다 <body></body>부분의 작업이 좀 편해지겠죠? 그런데 head부분에

<style type="text/css">이 있네요? 이것은 <head></head>내에서 CSS를 사용한다고 정의를 해 놓은거예요. p{}와 p span{} 사이에는 1번에서 했던 소스가 있을거예요 대충 감이 오시죠?

<body></body> 내에 <p></p>로 감싼 부분은 파란색 글씨, 배경은 노란색이고 <span></span>으로 감싼 부분은 폰트가 24예요. 결과는 1번과 같습니다.

 

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

 

 

3. 외부 파일로 만들어서 연결하는 방법

 

제일 많이 사용하는 방법이고 관리하기도 편한 방법입니다. 2번의 <style> 부분을 따로 빼내서 .css 파일로 만들어서 HTML에서 불러오는 방법이예요.

 

1,2번과는 약간 다른 방법인데 외부 파일을 불러오기 위해서는 link라는 속성을 써야 합니다.

'rel' 속성은 현재 문서와의 관계를 나타내는 속성이고 'href'를 이용해서 CSS 파일의 경로를 지정합니다.

 

 

외부의 CSS 파일 내용은 아래와 같습니다.

 

간단하죠?

2번의 내용을 그대로 복사해오면 되요 @charset "utf-8";은 문자 코드셋으로 지정을 안하시면 문자가 깨져서 나올때도 있어요.

이렇게 하면 <p>나 <p span>만 바꿔주면 적용된 파일을 하나하나 바꿀 필요없이 한번에 바꿀 수 있는 정말 도움이 되는 방법이예요~

 

1,2번보다는 3번으로 공부하시는게 많은 도움이 되실꺼에요

다음 시간에는 CSS 문법 을 하나하나 배워보겠습니다

 

 

 


 

반응형

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

Box Model  (0) 2020.01.08
CSS Syntax  (0) 2020.01.07
CSS란?  (0) 2015.08.16
반응형

지난 시간에는 이미지에 대해 배웠으면 이번시간은 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
반응형

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

표를 작성 할때는 블록 레벨 요소인 <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
반응형

오늘은 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