'HTML'에 해당되는 글 11건

 홈페이지제작할 때 꼭 필수적으로 알아야 하는 것일 수 있습니다.

그래도 아직도 사용하는 html 태이블 구조에 관해서 학습을 해보겠습니다.

예전에는 이 테이블태그를 이용하여 레이아웃을 잡았습니다.

div로 레이아웃을 잡는데요 표로 레이아웃을 요즘은 안잡고요. 그래도 달력이나 게시판 등은 그렇게 한답니다.

지금까지 강좌에 올린 태그들은 그 기능에만 충실히 설명을 하고 꾸미기 쪽은 아에 설명을 안했습니다. h태그로 작성한텍스트의

색을 바꾼다던지 글씨를 더 크게 한다던지의 align을 써서 오른쪽으로 정렬을 시킨다던지 그런 설명을 안했습니다.

이미지 태그도 border를 줘서 외곽을 어떻게 처리 한다던지 그런 설명도 안했는데요. 그 이유는 CSS에서 그러한 것들을 하기 때문입니다.

요즘은 html은 저렇게 구조만 짜주면 됩니다. 그리고 스타일은 스타일시트인 CSS 로 한답니다.

예를 들어서 다음페이지를 봐보겠습니다.

인터넷 익스플로러를 띄우시고 클릭하면 다음으로 갑니다.

메뉴에서 보기 - 스타일 - 스타일 없음을 눌러 보시면요 CSS가 해제된 저희가 지금 작성하고 있는 html 자체만 보실수 있습니다.

저거 입니다. html 로는 저렇게만 작성을 해주시면 되고요 CSS로 아까와 같이 배치 및 글씨 색 글씨 크기, 백그라운드 이미지, 백그라운드 색, 외곽선 굵기 스타일 외곽선색 등을 다 지정해준답니다.

만약 스타일 없음 했는데도 스타일 있는 페이지와 차이가 별로 없다면 그것은 웹표준을 지키지 않고 테이블로 레이아웃을 작성한 옛날 방식의

사이트 입니다. 그냥 혹시 왜이렇게 강좌를 대충 대충 하나 하시는 분이 계실까봐  말씀 드렸습니다.

 테이블에 대해서 말씀드리면

<table> <-- 테이블 태그의 시작

<tr> <-- 줄(열)의 시작

<td>A <-- 칸(행)의 시작

</td> <-- 칸(행)의 끝

</tr> <-- 줄(열)의 끝

</table> <-- 테이블 태그의 끝

위에서 tr을 열고 td를 1개만 사용했으므로 그냥 1칸뿐인 테이블이 됩니다.

결과는

 

오늘은 홈페지에 어떻게 이미지을 올리는지를 학습해 봅니다.

이미지 띄우는 태그는 <img src="이미지 주소" alt="이미지 설명" /> 입니다.

단독태그이므로 닫기전에 /를 붙이고요.

그리고 이미지 태그에 직접적으로 가로길이 세로길이도 적용 가능 합니다.

가로 길이는 width="숫자(단위는 픽셀)"

세로 길이는 height="숫자(단위는 픽셀)" 입니다.

alt="이미지설명" 은 이미지에 마우스를 대고 있으면 띄어지는 글입니다. 즉 이 이미지에 대한 설명인데요.

로봇사진이라고 하면 우리가 로봇이라고 적어 놓으면 로봇이라는 글이 띄어집니다.

alt=""를 적지 않으면 웹표준 검사에서 워링이나 에러에 걸립니다.

왜 이것을 해주냐고 하면은 이미지에 대한 정확한 설명을 해줄수도 있고요.

시각장애를 갖고 있는 분께서 웹을 이용할경우 그 이미지가 어떤 이미지인지를 읽어 주는 도구가 있는데요

그 도구가 우리가 작성한 alt="설명" 를 시각장애를 갖고 있는 분께 읽어 준답니다.

이러한 것을 웹접근성이라고 하는데요. 저도 웹접근성은 잘 모릅니다만. 아무튼 그러합니다.

이렇게 사용하면 되구요.

<img src="asimo.jpg" alt="아시모사진, photo of asimo" />

가로 길이 적용할시

<img src="asimo.jpg" width="500" alt="아시모사진, photo of asimo" />

위와같이 원하는값 적용하고요.위와같은 경우는 세로값이 적용이 되어있지 않은데요 비율을 조정해서 세로값은정해진답니다.

반대로 세로값만 적용하면 세로값에 대한 비율로 가로값이 적용됩니다.

비율을 적용하지 않고 가로 세로값을 적용하면 비율이 안맞아서 보기 안좋을수도 있습니다.

Tip:혹시 이거 보고 웹상에서 돌아다니는 이미지 주소 알아 내기 하시려면 이미지에 마우스 오른쪽 클릭 속성

가셔서 이미지 주소 보시면 됩니다.

이 이미지가 아닌 다른 자신의 컴퓨터에 있는 이미지로 테스트가 하고 싶으실 경우에는 테스트 하고 계신 html파일이 있는 폴더에 이미지를 넣으시고

<img src="이미지명" alt="" />하시면 됩니다.

이미지라 결과가 길어서 따로 띄우지 않겠습니다. 소스테스트는 했으니 위 소스로 테스트 하시면 됩니다

앞 강좌에서 배운 하이퍼링크 태그를 이용하여 이미지를 클릭했을때 원하는 링크를 걸은 주소로 이동해 봅시다.

매우 간단합니다. 이미지 태그를 하이퍼링크 태그로 씌어주면 됩니다. 제 블로그로 한번 띄어 볼까요?

먼저 하이퍼 링크 태그를 작성하고 주소는 http://mp17_2.blog.me 로 합니다. <a href="http://mp17_2.blog.me"></a>

그리고 하이퍼링크 태그 안에 이미지 태그를 넣어 줍니다.

이미지 주소는 이것으로 합시다.

http://www.yaoo.com/asimo.png

이미지 태그는   <img src="http://yaoo.com/asimo.jpg" alt="machine" />

그럼 위의 이미지 태그를 하이퍼 링크에 넣으면

<a href="http://mp17_2.blog.me" target="_blank">< src="http://www.yaoo.com/asimo.png" alt="machine" /></a>

가 됩니다.

위의 주소의 경우도 제측문제로 줄바꿈을 했는데요 실습하실때는 한줄로 해주시면 됩니다.

이상하게 연습장 에서 링크 연결시 "를 사용 하면 안되고 ''를 사용해야 하네요 참고 해주세요 아래 소스를 그대로 에디터에 붙여넣기 하셔서 테스트 하시면 됩니다.

홈페이지를 만들때 가장 기본이 되는 것이 html 구조입니다.

그래서 오늘은 홈페이지의 골격이 되는 구조는 어떻게 만드는지 알아보겠습니다

위의 소스가 HTML의 기본 구조 입니다.

각 태그는 <태그명>으로 시작하여 </태그명>으로 끝나며 모두다 그런것은 아닙니다.

<img />나 <br /> 태그등과 같은 단독 태그를 제외 하고는 거의 대부분의 태그들은 위와같은 법칙을 같습니다.

단독 태그는 끝에 /를 붙이고 닫아야 합니다. 예를 들어 <img src="url" /> 와 같이 사용 합니다.

지금은 무슨말인지 잘 모르실수 있습니다. 그냥 넘어 갑니다.

위의 기본 문서에서 head안에는 html문서에서 필요한 정보를 넣습니다.

title은 제목을 넣는 태그 입니다.

네이버를 접속해 보시면 홈페이지 상단에  네이버 :: 나의 경쟁력, 네이버 라는 글씨가 보입니다.

<title>네이버 :: 나의 경쟁력, 네이버</title>

라고 title 태그를 웹퍼블리셔가 네이버를 만들때 넣었기 때문에 그렇게 나오는 것입니다.

그외에도 문자 인코딩 이라든지 자바스크립트,스타일시트등을 넣는데요 나중에 차차 알아갑시다.
처음부터 이것저것 하면 머리 아파서 금방 포기하게 됩니다. body 태그에는 실질적인 홈페이지에 출력될 내용을 넣습니다.
웹브라우저에 안녕하세요를 출력하고 싶다면 저 body문안에 안녕하세요를 적으면 되는것이죠.

그럼  오늘은 이것으로 html소개는 마치고 강좌에서 뵙겠습니다.

오늘은 리스트 태그와 링크태그에 대해서 포스팅합니다.

우리가 웹사이트를 돌아다니면서 메뉴등을 보게 되는데요. 그러한 메뉴들은
대부분 리스트 태그로 만들어 져있습니다.

리스트 태그는 번호가 없는 형태가 있고, 번호가 있는 형태가 있습니다. 번호가 없는 경우는 아래의 <ul>로 시작합니다.

이렇게 하면 메뉴는 목록은 네이버 와 다음 2개가 뜹니다 이런식으로 자신의 원하는 목록을 만들어 나가면 됩니다.

그럼 소스를 쳐보면서 실습을 해봅시다.

이번에는 하이퍼링크에 대해서 배워 봅시다.

하이퍼링크는 우리가 네이버등에서 뉴스를 클릭했을때 어딘가로 이동을 하죠,, 바로 그 기능인데요.

href 주소지정에 파일의 경로를 지정시 그 파일을 다운로드도 합니다.
href="app.exe" 와같이

지금 해봅시다. ㅋ

하이퍼 링크 태그는 이것 입니다.
<a href="주소">링크를 거는 콘테츠 내용, 텍스트, 이미지등 </a>

그럼 우리는 위의 리스트 위에서 실습한 리스트 소스로 테스트를 해보도록 합시다. ^^

<li></li>태그 안에다가 하이퍼링크 태그를 넣을 거에요.!!

그럼 이번강좌는 여기까지 하고 다음강죄에서 뵙어요

div

이번 시간에는 div태그에 대해서 포스팅합니다..

<div>태그는 레이어를 만들때 주로 사용 한답니다. html코드를 작성할때 사용하고 CSS로 그 효과를 입히게 되죠.

또한 레이아웃을 잡을때도 사용합니다. header, container, content, footer 등등 이요. .

이러한 것들이 있는데 레이아웃 한번 보도록 하겠습니다.

div태그를 이용하여 위와 같은 레이아웃을 만듭니다.

하지만 div태그만으로는 위의 레이아웃은 만들어지지 않고요. 스타일 시트라는 것을 먹여야 합니다.

위의 레이아웃의 소스는 아래와 같습니다.

단 div태그와 p태그가 있을 뿐입니다. 저기에 스타일시트를 적용하면 저렇게 레이아웃을 짠다든지 할 수 있습니다.

p태그에 대해서 설명드리면

p 태그는 텍스트를 쓰는 태그라고 생각 하시면 됩니다.

하나로 묶고 싶은 텍스트가 있다면 <p> 안녕하세요 </p> 이런식으로 쓰시면 됩니다.

유용하게 사용하시기 바랍니다.

홈페지를 만들기 위해서 필수적으로 알아야할 할

html 명령어입니다. 다는 기억할 수 없다고 하더라고

기능은 어떠한지는 아셔합니다.

<*head*><*/head*> 홈페이지의 머리 부분입니다.
<*title*><*/title*>익스플로러 맨 윗부분에 뜨는 부분입니다.(네이버, 이런식으로)
<*body*><*/body*>홈페이지의 몸통 부분입니다.
<*img src="그림경로"*>이미지 링크 태그입니다.
<*a href="파일주소"*><*/a*> 파일 링크 태그입니다.(다운 가능)
<*iframe*><*/iframe*>iframe을 사용하는 태그입니다.
<*frameset rows/cols"화면을 나눌비율"*><*/frameset*> frame을 사용하는 태그입니다.
<*embed src="음악경로"*> 음악 재생 태그 입니다.
<*b*><*/b*>글씨체를 굵게 해줍니다.
<*i*><*/i*>글씨를 눕게 해줍니다.
<*u*><*/u*>글씨에 밑줄을 긋습니다.
<*font*><*/font*>글씨에 대한 사항을 지정합니다.
- color=글씨색 : 글씨의 색 지정
- size=번호 : 글씨의 크기를 지정합니다.(1~7까지가 있고, 7이 가장 큽니다.)
- face=글씨체 : 글씨의 체를 지정합니다.
<*marque*><*/marque*>글씨에 옆으로 지나가도록 합니다.
<*center*><*/center*>글씨를 가운데 정렬로 합니다.
<*sub*><*/sub*>아래 첨자로 표현합니다.
<*sup*><*/sup*>위 첨자로 표현합니다.
<*pre*><*/pre*>입력한 내용과 형식을 그대로 표현합니다.
<*p*><*/p*> 문단을 띄어줍니다.
<*br*>[enter]키와 동일한 효과입니다.
<*hr*>수평선을 긋습니다.
<*ul type=disc/circle/square*><*/ul*>disc는 ●, circle은 ○, square는 ■로써 무순서 목록앞에 붙음
<*ol start=번호*><*/ol*> 문서에 숫자 순서를 지정한다.
<*caption*><*/caption*>도표 바로 위에 도표의 제목을 지정한다.
<*table*><*/table*>테이블을 만든다.
- <*tr*><*/tr*>도표의 가로줄을 정한다.
- <*td*><*/td*>도표의 새로줄을 정한다.
<*em*><*/em*> 이탤릭체로 표현
<*strong*><*/strong*> 굵은 글자로 표현
<*cite*><*/cite*> 인용문구처럼 표현
<*kbd*><*/kbd*>키보드로 입력받는 것처럼 표현
<*h숫자*><*/h숫자*> 본문에서 제목의 글자를 크게 하기 위해서 사용
- 1~6 1이 가장큼.
<*au*><*/au*>저자의 이름을 표현할때 사용
<*blink*><*/blink*>글씨를 깜빡 거리게 함
<*code*><*/code*>영어 타자체로 표현
<*blockquote*><*/blockquote*>다른 글을 인용할 때 주로 사용하느데, 적당한 왼쪽 여백을 주어서 표현한다.

이 정도의 태그만 알고 계시면 간단한 홈페이지를 만드시는데는 큰 지장이 없다고 봅니다.
만약 더 알고 싶으시다면 인터넷 사이트를 찾아보시구요
사용하실 때에는
* 표시는 제외하셔야 합니다.

태그고 머고 전혀 모르는 님을 위한 기초 전 강좌 임다.
대부분은 아시는 내용이지만, 행여 알짜 초보를 위해
기본적인 내용을 먼저 써 놓습니다.

1. 태그란(Tag)

태그(tag)는 HTML 문에서 쓰이는 일종의 명령언어를 지칭하는
명령문이다.( 영어로 따지면 스펠링 쯤 되겠네욤?? )

예)
1) <html></html>
2) <head></head>
3) <br>
...

2. HTML ( Hyper Text Markup Language )

HTML이란 하이퍼 텍스트 마크업 랭귀지의 줄임말로써
태그들로 조합된 하나의 문장이다.
( 영어로 따지면 문장 쯤 되겠네욤?? :; 장문도 있고 단문도 있듯 )
우리가 흔히 인터넷 사이트에서 보여지는 모든 내용들을
HTML로 표현할수 있다.

예)
<html></html>
<head></head>
<!--edt:htmlhead:s-->
<title>야후! 코리아</title>
<link rel="SHORTCUT ICON" href="http://kr.yahoo.com/favicon.ico">
<meta http-equiv="Content-type" content="text/html; charset=euc-kr">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="Wed, 04 Jul 1973 16:00:00 GMT">
<script language=javascript>
<!--
function popWin(url, w, h, t, l) {
var win = null;
win = window.open('','_popup','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width='+w+',height='+h+',top='+t+',left='+l);
if (win == null) return;
win.location.href = url;
}
//-->
</script>
.....

</html>

3. 태그의 형식

태그는 태그의 시작과 종료를 알리는 한쌍의 구문으로 이루어진다.
시작은 걍 < > 요거 안에 태그쓰면 시작이구
끝은 </ > 요렇게 하고 태그를 쓰면 끝을 알립니다.

 자바 스크립트의 주석처리 방법은 두가지가 있다.

1. 한줄 주석 : //

사용 예)

// 슬러쉬: 한 줄만 주석처리 할 경우 사용.

2. 전체 주석 : /* */

/* //주석시작

    alert("hello javascript");
    alert("1");
    alert("2");
    alert("3");
   */ //주석 끝

/*와 */ 사이에 있는 코드들은 실행되지 않는다.

1. Javascript

<script type="text/javascript">

<!--

document.getElementById("demo").innerHTML=Date();

//-->

</script>

<script type="text/javascript">

<!--HIDE

document.write("<FONT color=#333333>Now!</FONT>") // This is a comment

/* This is a comment */

//STOP HIDING-->

</SCRIPT>

◈ Using an External JavaScript

<head>

<script type="text/javascript" src="xxx.js"></script>

</head>

<head>

<script type="text/javascript" src="xxx.js" charset="utf-8"/></script>

</head>

◈ JavaScript in <head>

<head>

<script type="text/javascript">

function displayDate()

{

document.getElementById("demo").innerHTML=Date();

}

</script>

</head>

◈ JavaScript in <body>

<body>

<p id="demo">This is a paragraph.</p>

<script type="text/javascript">

document.getElementById("demo").innerHTML=Date();

</script>

</body>

// body에서 버튼 클릭, 링크로 head함수 호출

<head>

<script type="text/javascript">

function tost(){

alert("I am an alert box!");

}

</script>

</head>

<body>

<input type="button" name="btn01" value="버튼01" onclick="tost()" />

<a href="javascript:tost()" style="text-decoration:underline; color:#515151">클릭</a>

</body>

2. HTML

<!--This is a comment. Comments are not displayed in the browser-->

2. CSS

/*This is a comment*/

◈ External style sheet

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

◈ Internal style sheet

<head>

<style type="text/css">

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

◈ Inline style

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

4. XML

<!-- This is a comment -->

5. PHP

//This is a comment

/*

This is

a comment

block

*/

<div class="leftmenu">

<?php include("menu.php"); ?>

</div>

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

html 주석처리는 왜 하는 가?

(위에서 보시는 것처럼 1~5까지가  주석처리한 부분입니다.)

그렇다면 주석처리는 왜 하는가 ? 이 질문에 답부터 말씀드리며 나중에 소스를 볼 때 편하게 하기 위해서입니다.

지난 번에 어떻게 작업을 했는지를 알 수 있죠 !!

그래서 "주석처리" 웹일을 하는분들이라면 항상 보셨을거라 생각되는데요. html내에서 아래 처럼 주석처리를 하게됩니다.

<!-- 주석처리 --> 안에 주석처리 라고 되어있는 부분은 브라우저 화면상에서 보여지지 않게 됩니다. 하지만 소스상에는 남아있는거죠.

위에서 말씀드렸다시피 디자인이 수정된경우 나중을 위해서 주석처리를 하시는분들도 있을거고 그냥 싹 지우시는 분들도 있을건데요.

이럴땐 나중을 위해 주석처리를 해두시는게 좋다고 볼수있겠죠? 후에 클라이언트가 이를보고 다시 원래대로 바꿔놔라 했을경우....

그러니 주석처리 하는 습관을 꼭 기르시기 바랍니다.

그럼 주석처리 하는 방법을 알았으니 이 주석처리를 또 어떤식으로 활용할수 있는지 다같이 생각해 보자구요.

저희가 홈페이지를 제작하면서 수차례 수정을 합니다. 그리고 유지보수도 하게되죠.

유지보수를 하기앞서 분명 퍼블리싱 가이드를 확인하고 유지보수 하는 분들도 있는 반면, 가이드가 없어 자기만의 스타일로 수정을 하는 분들도 더러 있을 것입니다.

이 과정에서 사이트가 1년이 넘어가고 2년이 넘어가게 되면 분명 소스는 난장판이 될게 뻔할텐데요.

이를 주석처리를 함으로써 좀더 효과적으로 효율적으로 작업을 할수있게 된다면 좋겠죠?

분명 알고계시는 분들도 계실테지만 모르시는 분들을 위해 적어보겠습니다.

<!-- (header) -->

<!-- (lnb) -->

<!-- (contents) -->

<!-- (footer) -->

이렇게 크게 레이아웃을 잡는 머리, left메뉴, 컨텐츠, 바닥글 부분을 주석처리 함으로써 구분을 줌으로써 좀더 보기 쉽게 되었습니다. 그렇죠?

그리고 수정을 하였을때에도 아래처럼

<!-- ( 주석처리_20170512 ) --> 이렇게 날짜를 기입하고놓으면 내가 언제 수정했는지 알수있겠죠?

공동작업시 이처럼 작업해 주시면 유연하게 대처하실 수 있게 되겠습니다.

오늘은 html주석처리를 하면 작업을 효율적으로 할 수있다라는 말로 포스팅을 마칩니다.

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)