'* Web/HTML'에 해당되는 글 5건

HTML 과제

* Web/HTML

<html>
<head>
<title> new document </title></head>
<body>
<html>
<head>
<title>
컴퓨터 보안
</title>
</head>
<body background="images\sky.jpg">
<center>
<b>
<font size="6" color="red" face="휴먼옛체">
컴퓨터</font>
<font size="6" color="blue" face="휴먼옛체">
보안
</font>
<font size="6" color="red" face="휴먼옛체">
알아보자!
</font>
</b><p><br><hr>
<font size="4" color="green">
<b><u>보안</u>의 정의</b>
</font>
</center><br>
<font>
<b><u>컴퓨터 보안(computer security)</b></u>은 이론 컴퓨터 시스템과 실제 컴퓨터 시스템에 적용되는 정보 보안의 하위 분류인 동시에 컴퓨터의 운영에서 보안의 강화를 말하는 컴퓨터 과학의 하위 분류이다.<br>
<b><i>"보안"</i></b>의 뜻은 응용 프로그램마다 다르며, 보통 컴퓨터 시스템에 저장되거나 처리되는 정보의 신뢰성, 이용 가능성을 말하는 보안 정책으로 정의된다.
</font><br><br><hr>
<font size="4" color="green" align="center">
<menu>
<li><b><u>보안</u>의 기초적인 종류</b></font></menu>
 <table border="1"width="100%">
  <tr>
   <td>
    <table border="1" width="100%">
     <tr align="center"  width="25%" height="20">
      <A href="http://twodragon.tistory.com/category/Wargame/TRY2HACK">
        <td>웹 해킹</td></A>
<A href="http://twodragon.tistory.com/category/Wargame/F.T.Z">
      <td>시스템 해킹</td></A>
<A href="http://blog.naver.com/aaaa875/110118373677">
      <td>네트워크 해킹</td></A>
     </tr>  
    </table>   
<hr>
<menu><li type="circle"><b>웹해킹이란?<br></b>
웹 해킹(영어: web hacking)은 웹 사이트의 취약점을 공격하는 기술적 위협으로, 웹 페이지를 통하여 권한이 없는 시스템에 접근하거나 데이터 유출 및 파괴와 같은 행위를 말한다.유형으로는 웹 엔진 취약점을 이용한 해킹과 웹 애플리케이션의 취약점을 이용한 해킹, 각종 웹 서버 및 미들웨어 기본 제공 샘플 파일을 이용한 해킹 등이 있다.
웹 애플리케이션을 통해서 발생되는 해킹이 주로 일어나는데 이를 OWASP에서 10대 웹 애플리케이션의 취약점을 발표하였다.웹 애플리케이션 해킹으로 가장 빈도가 많이 발생하고, 보안상 영향을 크게 줄 수 있는 것들로는 SQL 삽입(영어: SQL Injection), XSS, CSRF 웹 셸 업로드 등이 있다.
<br>
<img src="images\144.jpg">
 
<hr>
<li type="square"><b>시스템해킹이란?<br></b>
시스템의 프로그램 취약점을 이용한 해킹 기법 버퍼 오버플로우(buffer overflow)라든지 포맷 스트링(format string)과 같은 기법들을 이용하여 취약한 시스템을 공격하여 해당 시스템에 접속, 관리자 권한을 획득하는 것이 주목적이다.
<br>
<img src="images\14.jpg">
<hr>
<li type="disk"><b>네트워크해킹이란?<br></b>
네트워크 해킹 취약점을 자동으로 검색해주는 도구를 스캐너(Scanner)라고 하며, 이러한 도구를 이용하여 정보를 수집하는 것을 스캔 공격이라 한다. 초기에는 네트워크 보안취약점을 발견하여 조치함으로써 보안을 강화하기 위한 목적으로 ISS(Internet Security Scanner)와 SATAN(Security Analysis Tool for Auditing Networks)과 같은 도구들이 개발되었다. 이 도구를 개발한 미국의 단파머(Dan Farmer)는 시스템 관리자들이 이러한 도구를 활용하여 자신의 네트워크 취약점을 제거하기 바라는 마음으로 개발했다고 한다. 하지만 이러한 도구는 불법적인 시스템 침입을 노리는 악의적인 사용자에 의해 사용되기도 한다. 특히, 최근에는 Jsbach라는 해커가 보안 취약점을 찾아주는 mscan과 sscan이라는 강력한 스캔 도구를 공개하여 이를 이용한 공격이 급증하고 있다. 이외에도 스캔 공격을 탐지할 수 없도록 하는 은닉 스캔(Stealth Scan), 특정한 보안 취약점에 대해서만 스캐닝하는 특정 취약점 스캔 공격, 스캐닝 사실을 숨기기 위한 은닉(Stealth) 스캔 공격, 네트워크 구조 스캔 공격 등도 소개되고 있다.
<br>
<img src="images\114.jpg">
<hr> 
</table>
</body>
</html>

'* Web > HTML' 카테고리의 다른 글

HTML 과제  (0) 2012.04.10
HTML+CSS+JavaScript2  (0) 2012.03.23
1.2 글자와 문단 관련 태그  (0) 2012.03.16
문서의 공통 구조  (0) 2011.11.21
HTML 이란?  (1) 2011.11.21
Name
Password
Homepage
Secret

HTML+CSS+JavaScript2

* Web/HTML

 





HTML+CSS+JavaScript2  EX25

<HTML>
<HAED>
 <TITLE>하이퍼 링크</TITLE>
</HEAD>

<BODY>
<CENTER><H1> 김남용의 홈페이지 </H1></CENTER>
<HR SIZE="5" WIDTH="80%" COLOR="BLUE">

<DIV ALIGN="CENTER">
<A HREF="http://www.nate.com"> 네이트 </A><BR><BR>
<A HREF="http://www.naver.com"> 네이버 </A><BR><BR>
<A HREF="http://www.ducsi.ac.kr/Ducsi/entrance/main.jsp"> 입시정보 </A><BR><BR>
</DIV>

<DIV ALIGN="RIGHT">
<A HREF="http://www.nate.com"><img src="nate.GIF"><br><br></a>
<A HREF="http://www.naver.com"><img src="naver.gif"><br><br></a>

</div>

</BODY>
</HTML>


HTML 수업2


<html>
<head><title> 표만들기 </title></head>
<body>
<h2> 표 만들기 태그 </h2>
<hr color="#00FF00">

<table border="5"width="500"height="200"align="center"align="center"
bgcolor="#ACCCDC"
bordercolor="#FFCCFF"
cellspacing="5"  <!--셀과 셀 사이의 간격>
cellpadding="0"  <!--셀과 셀 안의 텍스트간의 간격>
>
 <caption>컴퓨터 공학과</caption>

 <th> 전공필수 </th>
 <th> 전공선택 </th>
 <th> 교양선택 </th>
 <tr align="center">
  <td> 인터넷활용 </td>
  <td> PC활용 </td>
  <td>C언어</td>

 </tr>

 <tr align="center">
  <td> 전산개론 </td>
  <td> 멀티미디어개론 </td>
  <td> 디지털공학개론 </td>
 </tr>


 <tr align="center">
  <td> 경영학개론 </td>
  <td> 심리학개론 </td>
  <td> <img src="picture/빵.jpg"> </td>

 </tr>
</table>
</body>
</html>

 

rowspan사용법

<html>
<head><title></title></head>
<body>

<h2> 셀 병합 </h2>

<table border="1">
 <caption>컴퓨터공학과</caption>
 
 <th>전공필수</th>
 <th>전공선택</th>
 <th>교양선택</th>

 <tr>
  <td rowspan="2">1 4
  <td rowspan="3">2
  <td>3
 </tr>

 <tr>
  <td rowspan="2">6   <!--rowspan세로병합>
 
 </tr>

 <tr>
  <td>7

  
 </tr>
</table>

</body>
</html>

colspan사용법

<html>
<head><title></title></head>
<body>

<h2> 셀 병합 </h2>

<table border="1">
 <caption>컴퓨터공학과</caption>
 
 <th colspan="2">전공필수&전공선택</th>
 <th>교양선택</th>

 <tr>
  <td rowspan="2">1
  <td>2
  <td>3
 </tr>

 <tr>
  <td colspan="2">5   <!--colspan가로병합>
 
 </tr>

 <tr>
  <td colspan="3">7

  
 </tr>
</table>

</body>
</html>

간단한 예제

<html>
<head><title></title></head>
<body>
<table border="1">
 <caption>컴퓨터공학과</caption>

 <th align="center">교양선택</th>
 <th colspan="2" align="center">전공필수 & 전공선택</th>

 <tr>
  <td align="center">경영학개론
  <td align="center">C언어
  <td rowspan="2" align="center">인터넷활용
 </tr>

 <tr>
  <td rowspan="2" align="center">심리학개론  
  <td align="center">전산개론
 </tr>

 <tr>
  <td colspan="2" align="center">PC활용

  
 </tr>

</table>

</body>
</html>

'* Web > HTML' 카테고리의 다른 글

HTML 과제  (0) 2012.04.10
HTML+CSS+JavaScript2  (0) 2012.03.23
1.2 글자와 문단 관련 태그  (0) 2012.03.16
문서의 공통 구조  (0) 2011.11.21
HTML 이란?  (1) 2011.11.21
Name
Password
Homepage
Secret

1.2 글자와 문단 관련 태그

* Web/HTML




html+css+javascript 교재

파일저장 ex01.html 로 저장을 한다.

<html>
<head>
 <title> 글자모양 </title>
</head>
<body bgcolor=#007D93>
논리적 스타일<SUP> 논리적스타일</SUP><BR>
사용하는 <B>웹 브라우저</B>에 따라 <b><I>글자의 모양</I></b>이 달라 보이기
때문에 사용자가 <U>특별히 모양을 지정한다는 의미보다는 글자를 보통 글
자와는 다르게 표현한다</U>는 데에 의의를 두고 사용하는 방법
<P>
물리적스타일 <SUB>물리적스타일</SUB><BR>
사용자가 지정한 내용대로 <TT>글자 모양</TT>을 볼 수 있는 방법

 

</body>
</html>

 


<html>
<head>
<title>홍길동의 홈페이지</title>
</head>
<body bgcolor=#00EEE8>
<body>
<center>
<h1><I>길동이의 홈</I></h1>
<font size=4 color=pink><b>안녕하세요, 반갑습니다.</b><br></font>
<font size=3>지금은 HTML <sub>문서</sub> 작성 연습중입니다.<p></font>
<font size=2>아직 <u>왕초보</u>라 보잘것 없습니다.<br></font>
<font size=1>하지만, 열심히 공부하여 계속 발전된 모습을 보여드리겠습니다.</font>
</center>
</body>
</html>


색상표(RGB 컬러)
http://www.ourac.com/bbs/data/study_pds/Colorlab_V0.02.swf


 

'* Web > HTML' 카테고리의 다른 글

HTML 과제  (0) 2012.04.10
HTML+CSS+JavaScript2  (0) 2012.03.23
1.2 글자와 문단 관련 태그  (0) 2012.03.16
문서의 공통 구조  (0) 2011.11.21
HTML 이란?  (1) 2011.11.21
Name
Password
Homepage
Secret

문서의 공통 구조

* Web/HTML


 1. 주석 태그

주석이란 HTML 문서에는 전혀 영향을 주지않고, HTML 문서에 설명을 달고 싶을때 사용한다.
문서의 어느 곳에 써두 전혀 상관없다.
한줄에 쓰기도 하지만 내용이 많을경우 여러줄에 나누어서 쓸 수도 있다.

형식 : <!-- 주석내용 -->
예제 결과
주석달기<!-- 안보인다. --> 주석달기 주석달기 주석달기
주석달기
<!--
    안보인다.
-->
주석달기
주석달기 주석달기



2. HTML 태그

HTML 태그는 이 문서가 HTML 문서임을 나타내며, 문서의 시작과 끝을 나타낼때 사용한다.
즉, <HTML> 를 쓰면 HTML 문서의 시작을 </HTML> 를 쓰면 문서의 끝을 의미한다.
나머지 Tag들은 모두 HTML 사이에 들어간다.

형식 : <html> ... </html>
예제 결과
<html> ... <html > 생략.



3. HEAD 태그

문서의 일반적인 정보를 표시할때 사용한다.
실제로 브라우저에 출력되지는 않는다. HEAD 태그 혼자서는 아무런 역활도 하지 않는다.
HEAD 태그 사이에 TITLE, SCRIPT, STYLE, META 등의 태그를 사용해야 한다.
HEAD내에서 META는 흔히 일반적은 정보를, STYLE과 SCRIPT는 앞으로 사용할 style이나 script를
정의한다.

형식 : <head> ... </head>
예제 결과
<head><title>head연습</title></head> 생략.
<head><style>
    body { font-size:9pt; }
</style></head>
문서의 글자크기가 9pt로 된다.



4. TITLE 태그

문서의 제목을 나타낸다. TITLE 태그 사이에 쓴 제목은 브라우저 최상단 왼쪽에 표시된다.
HEAD 태그 사이에만 쓴다. TITLE은 되도록 한눈에 알아 볼 수 있게 한다. 좀더 세부적으로...
'강좌'라는 제목 보다는 '웹이조아 - HTML강좌'가 훨씬 좋다.

형식 : <title> ... </title>
예제 결과
<title> 제목 </title> 생략.



5. BODY 태그

HEAD 관련 몇가지 태그를 제외하고는 대부분 BODY 태그 안에서 사용한다.
BODY 태그 안에 쓴 내용들이 실질적으로 브라우저에 보여진다.
BGCOLOR 속성은 브라우저 전체의 배경색을 지정한다. 이 속성을 쓰지 않으면 기본적으로 흰색으로
보여진다. TEXT 속성은 글자색을 말한다. 역시 쓰지 않으면 검은색으로 나온다.
배경에 그림을 넣고 싶을때 BACKGROUND 속성을 사용한다. BGCOLOR와 BACKGROUND는 보통 같이
사용하지 않는다. 배경그림이 바둑판형식으로 브라우저를 꽉~ 채우기때문에 투명 이미지가 아닌이상
배경색은 보이지 않기 때문이다.
LINK, VLINK, ALINK는 A 태그를 쓸때 링크와 관련해서 보여지는 색이다.

형식 : <body> ... </body>
속성 : bgcolor="색" - 문서 전체의 배경색 (기본-white)
      . text="색" - 문서 전체의 글자색 (기본-black)
      . background="그림파일/URL" - 문서 전체의 배경그림
      . link="색" - 선택된 적이 없는 링크 색
      . vlink="색" - 선택된 적이 있는 링크 색
      . alink="색" - 마우스로 클릭한 상태의 링크 색

예제 결과
<body> 문서의 내용 </body> 생략.
<body bgcolor="gray" text="white"> 생략.
<body background="back.gif"> 생략.
<body background=
    "http://www.webejoa.com/img/back.gif">
생략.
<body link="blue" vlink="#ff00ff" alink="ff0000"> 생략.


[팁] 색 지정하기[색상표 보기]
. RGB를 이용 - 16진수 6자리로 구성되며 000000 ~ FFFFFF 까지 사용가능하다.
                16진수란? 0123456789abcdef다. 두자리씩 잘라서, 빛의 삼원색 Red.Green.Blue의 색을
                나타낸다. 000000은 검은색, FFFFFF은 흰색, FF0000은 빨간색... RGB로 나타낼때
                색앞에 #을 붙이기도 하는데생략해도 상관없다.
. 영어 색상이름 이용 - 흔히 알고 있는 WHITE, BLACK, RED, BLUE 등...


[팁] 경로 지정하기
. 절대 경로 - 경로의 처음부터 끝까지가 완전히 기술된 경로명을 말한다.
               드라이브명:\디렉토리(폴더)이름\파일이름
. 상대 경로 - 현재 디렉토리로부터 시작하여, 상대적인 경로를 지정한다.
               "../" 현재 디렉토리에서 상위 디렉토리로 이동한다.
               "sub/test.html" 현재 디렉토리의 하위 sub 디렉토리의 test.html파일을 지정한다.

[팁] URL(Uniform Resource Locator) 이란.
URL은 인터넷에서 접근 가능한 자원의 주소를 표현할 수 있는 형식을 말한다.
자원의 형태는 인터넷 응용 프로토콜에 따라 다를 수 있다. Web의 프로토콜인 HTTP를 사용하는
경우, 자원이란 HTML 페이지, 이미지 파일등 HTTP가 지원하는 다른 파일들이 될 수 있다.


출처:웹이조아

상세보기




'* Web > HTML' 카테고리의 다른 글

HTML 과제  (0) 2012.04.10
HTML+CSS+JavaScript2  (0) 2012.03.23
1.2 글자와 문단 관련 태그  (0) 2012.03.16
문서의 공통 구조  (0) 2011.11.21
HTML 이란?  (1) 2011.11.21
Name
Password
Homepage
Secret

HTML 이란?

* Web/HTML



 1. HTML 이란? (HyperText Markup Language)

HTML? 인터넷하면 흔히 Web이라고 생각하는데 알고보면 인터넷 서비스에는 종류가 많다.
가장 대표적인것이 Web(World Wide Web)이다. 그 외에 Telnet, FTP, E-mail등... 많이 있다.
그러니까 Web이란 인터넷의 많은 서비스중 하나이다. 인터넷과 Web을 같다고 생각하는 이유는 당연히
인터넷의 서비스중 Web을 가장 많이 사용하기 때문이다.
Web은 문서뿐만아니라 사진, 동영상, 음악... 까지 제공되니까 다른 서비스들에 비해 인기가 좋은것이다.
그리구 요즘에는 FTP, E-mail등을 Web을 통해서 사용할수 있기때문에 더더욱 Web을 많이 사용한다.
자... 그럼 Web과 HTML은 어떤 관계가 있을까? 바로 Web을 구성하는 가장 기본이 HTML이라는 것이다.
인터넷 어디서나 브라우저의 [소스]보기 메뉴를 선택하면 HTML로 이루어진 문서를 볼 수 있다.

간단히 말해 Web을 만드는 기본 언어가 HTML이다. 무슨말이냐? 비교분석을 해보면...
우리가 흔히 인터넷에 집을 짖는다구 하는데 집을 만들고 꾸밀려면 어떤것들이 필요한지 한번 알아보자.

ex) 집 - 주소(보이지 않는 정보)
        - 땅
        - 벽
        - 방 : 침대 (크기="싱글/더블")
             : 책상
             : 옷장 (색="나무색/흰색")
             : TV   (종류="흑백/칼라")

우선 간단하게만 적었다. 집을 만들려면 꼭 필요한것이 있다. 그게 바로 땅, 주소, 벽, 방 등이 될것이다.
역시 방에 들어갈 수 있는 것들을 보면 침대, 책상, 옷장, TV 등이 있을 것이다.
침대의 특징(속성)에는 크기가 있는데 "싱글"과 "더블"을 선택할 수 있을 것이다.
옷장의 특징(속성)에는 색이 있는데 "나무색"과 "흰색"이 있다. 역시 TV에도 종류가 있다.

이제 우리가 간단하게 꾸며본 집을 가지고 HTML을 이해해보자.

. 주소 : 눈에 보이지는 않지만 그 집의 정보를 나타낸다.
          HTML에서는 HEAD 태그가 이런 역활을 한다. 홈페이지의 TITLE 같은 내용을 적을 수 있다.
. 땅, 벽, 방 : 집을 만드는데 꼭 필요한 것들이다.
          HTML의 기본 구조가 되겠다. (HTML, HEAD, BODY 태그 정도...)
. 침대, 책상.. : 방에 들어갈 수 있는 것들이다.
          침대, 책상은 각각의 특징(속성)이 있다. 침대에는 크기라는 특징으로 "싱글"과 "더블"이 있는데
          이 특징을 책상에 쓸 수는 없다. 책상에도 물론 크기가 존재할 수 있지만 "싱글"이나 "더블"이라고
          크기를 쓰지는 않을 것이다. 침대, 책상, 옷장... 각각의 특징이 있는것이다.
          HTML의 BODY가 바로 이런 방이라고 볼 수 있다. 대부분의 태그가 BODY 태그 안에 들어간다.
          태그도 침대, 책상... 처럼 각각의 속성이 있다. 역시 IMG 태그의 속성을 TABLE 태그에서 쓸 수
          없다. (물론 간혹 같은 것도 있긴하다.)

또 다른 예를 하나 들고 HTML과 비교하면...

ex) 사람 - 이름
          - 머리
          - 팔, 다리
          - 몸 : 팬티 (종류="야광/망사/끈", 색="검은색/흰색/빨간색", 크기="90/95")
               : 셔츠 (무늬="체크/땡땡이/민무늬")
               : 바지

사람 역시 보이지는 않지만 이름이라는 정보를 가지고 있고 꼭 필요한 머리, 팔, 다리, 몸이 있을 것이다.
그리고 몸에는 우리가 팬티나 셔츠, 바지등을 입을 수 있다.
입을 것 마다 역시 각각의 속성이 있는데 바꾸면... 셔츠 종류에 "끈" 같은건.. ^^;
물론 색 같은 경우는 같을 수도 있다. HTML에서도 bgcolor, width, height... 같은 것들은 여러 태그에서
똑 같이 쓰이는 속성이다.
그리고 옷을 입을때 팬티와 바지를 입을 때 순서가 있다. 바지 위에 팬티를 입으면.. 미친넘이다.
(슈퍼맨이라고 생각하는 사람은 없겠지? ^^;)
HTML 태그도 겹쳐 쓸 수 있는데 순서가 있다. <B><I>글씨</I></B>
<B><I>글씨</B></I> 처럼 쓰면 안된다는 얘기다.

<I><B>글씨</B></I> 는 가능하다.

이렇게 태그(Tag)라는 이미 정해져 있는 명령을 이용해서 홈페이지를 만들 수 있다.
컴퓨터 언어하면 어렵게 느껴지겠지만 HTML은 알고보면 쉽다. 조금만 관심을 가지면 금방 배울수 있다.


2. HTML의 역사

사실 홈페이지 만드는데 무슨 역사까지 알아야 할까. 최소화해서 잠깐 집고 넘어간다.
HTML은 최초에 Tim Berners-Lee가 CERN에 있으면서 개발했고 NCSA에서 개발 한 Mosaic 브라우저로
보편화되었다. HTML이 보편화 되면서 표준안이 필요했고 W3C에서 표준안을 발표하구 있다.

[링크] http://www.w3c.org - W3C 홈페이지


3. HTML 작성에 필요한 준비물

대부분 O/S는 Windows를 사용할테지만 혹시 있을지 모르는 Linux 등의 User를 위해...
기본 적으로 HTML을 작성하기 위해서는 Edit 프로그램이 필요하다.
Win용은 "메모장".



Linux용은 "vi"가 대표적이다.
물론 이것 말구두 문서를 작성할수 있는 거의 모든~ 프로그램을 사용할수 있다.
워드프로세서같은 것두 전혀 상관없다. 어떤 프로그램을 이용한든 상관없지만 HTML 작성하고 저장할때 TEXT
형식으로 확장자를 HTM 또는 HTML로 저장해야한다.
좀더 화려한 홈페이지를 만들기 위해선 포토샵과 같은 그래픽관련 프로그램두 필요하다.
좀더 동적인 홈페이지를 원하시는 분들은 CSS, Flash, JAVA, JavaScript등...
수없이 많다. 하지만 HTML만 알아두 얼마든지 깔금한 홈페이지를 만들 수 있다.
많은 노력과 시간이 들것이다.



4. HTML의 기본 원칙 필독~!!!

 1. <단어> 형태를 Tag(태그)라고 한다. 
    태그는 시작태그와 종료태그 두가지가 있다.
    차이점은 종료태그는 </태그>와 같이 슬래시가 들어간다.

 2. <태그>는 태그의 시작을, </태그>는 끝을 의미한다.
    종료태그가 없거나 생략가능한 경우도 있다.

 3. 태그는 대소문자를 구별하지 않는다.
    <HTML>, <html>, <Html> 모두 같게 인식한다.

 4. Enter(줄바꿈), Space Bar(띄어뜨기)는 아무리 많이써도 하나의 Space(공백)으로 나타난다.
    줄바꿈, 띄어쓰고 싶을때는 정해진 태그를 사용한다.

 5. HTML 문서내에 JavaScript, CSS를 같이 쓸 수 있다.
    사용자마다 컴퓨터 환경이 조금씩 다른데 그런 영향을 받지않고 홈페이지 제작자가 의도한 모양,
    스타일로 사용자에게 보여줄 때 CSS를 사용한다.
    JavaScript는 HTML로는 할수 없는 좀더 동적인~ 홈페이지를 제작할수 있게 도와준다.

 6. HTML 파일의 확장자는 .HTML 또는 .HTM으로 한다.
    이거 말구 딴걸루하면 안된다.
 7. HTML문서는 <HTML>로 시작해서 </HTML>로 끝난다.
    버전에 따라 생략가능하지만 [기본구조]는 꼭 쓰도록 한다.

 8. <태그><태그2></태그2></태그>의 형식으로 태그안에 다른 태그를 사용할 수 있다.
    이때, <태그><태그2></태그><태그2>와 같이 순서가 바뀌면 안된다.
    사실은 되는 경우도 있다. ^^; 그러나 분명 틀린 문법이다.

 9. <태그 속성="인수"></태그> 형태로, 태그에 속성을 쓸 수 있다.
    <태그 속성="인수" 속성2="인수"></태그>처럼 속성을 연속해서 쓸 수도 있다.
    속성을 모든 태그에서 쓸 수 있는건 아니다. 각각의 태그마다 자기의 속성이 있다.
    이거 외우는게 좀 골치아프다~.
 10. 인수의 큰 따옴표는 생략가능하며, 작은 따옴표로 대신할 수 있다.
     단, 인수에 Space(띄어쓰기)가 있을 때는 생략할 수 없다.

 11. 문서에 쓰이는 색은 두가지 방법으로 표시할 수 있다.
   . RGB를 이용 - 16진수 6자리로 구성되며 000000 ~ FFFFFF 까지 사용가능하다.
     두자리씩 잘라서, 빛의 삼원색 Red.Green.Blue의 색깔을 나타낸다.      
   . 영어 색상이름 이용 - WHITE, BLACK 등...

 12. HTML 작성시 들여쓰기(Tap, Space Bar이용), 주석문 달기를 해준다.
     나중에 문서 수정시 도움이 많이 된다.

 13. <!-- 주석문 --> 형태로 주석(설명)을 사용할 수 있다.

 14. CSS는 HTML 문서내에 포함되어서 사용하는 것이 보통이다.
     따로 파일을 만들어서 HTML 문서에서 불러다 쓸 수도 있다.
     HTML 문서의 <HEAD> 태그 사이에 <STYLE> 태그를 써서 사용하거나
     태그 뒤에 직접 STYLE이라는 속성을 이용하여 사용할 수도 있다.

 15. Java Script역시 HTML 문서내에 포함할 수도 있고 따로 파일을 만들 수도 있다.
     CSS와 마찬가지로 <HEAD> 태그 사이에 <SCRIPT> 태그를 사용하거나
     태그의 이벤트 속성 값으로도 사용할 수 있다.



위의 내용이 이해가 안되면 될때까지 보도록한다.
예제를 접하다보면 무슨 말인지 조금씩 이해할 수 있을것이다.


5. HTML의 기본 구조

HTML문서는

  <html>
     <head>
        <title>문서의 제목</title>
     </head>
     <body>
     본문
     </body>
  </html>

  의 형태가 가장 기본이다.

1. <HTML>...</HTML>는 HTML문서의 시작과 끝을 의미한다.
2. <HEAD>...</HEAD>는 문서의 일반적인 정보를 표시할때 사용한다.
    실제로 브라우저에 출력되지는 않는다. TITLE, SCRIPT, STYLE, META 태그 등을 쓸 수 있다.
3. <TITLE>...</TITLE>는 문서의 제목으로 브라우저 상단에 표시된다. HEAD태그 사이에만 쓴다.
4. <BODY>...</BODY>는 실제 브라우저에 나타나는 내용이 들어간다.
    거의 대부분의 태그를 여기다 쓴다.

자.. 그럼 위에 파란색으로 써진 부분을 복사해서 과연 어떻게 나오는지 한번 확인해 보자.
파란색으로 써진 예제를 선택하구 복사한 후에.. 메모장에 붙여넣구. 저장을 한다.
그런다음 익스플로러에서 불러오기해서 확인해 본다.
하얀~ 화면에 걍 "본문" 딸랑 이거 나오면 성공이다.


그렇담... 이번에는 [메모장] 에서... "본문" 이라구 써진 부분에(body태그사이) 아무거나 써보구
역시 저장을 한다.
익스플로러에서 확인을 해보자~. 성공?
혹시.. 설마.. [메모장]에 [복사]하고 [저장]하란 말이 뭔말인지 몰라서 못한다면?...할말없음
성공했다면? 이제 HTML 반은 배웠다.
나머지 반은, 다른 태그들. 각각의 태그들이 하는 역활만 한다.
HTML 작성시 가장 기본이니까 꼭꼭~ 무조건 외워두도록 한다.


6. HTML 문서의 오류

HTML을 작성후 여러가지 이유로, 내가 원하던 결과를 못 얻을 수 있다.
소스를 다시 확인하며 아래와 같은 실수를 하지 않았는지 찾아본다.
오류는 브라우저 버전, 상황에 따라서 될때도 있겠지만 고치도록 한다. ^^*


1. 오타가 없는지 확인해 본다. 가장 많이 실수하는 부분이다.

2. <태그></태그> 처럼 태그의 시작과 끝을 제대로 썼는지 확인한다.
    / 와 </태그>를 빼먹는 경우도 많다.

3. <태그><태그2></태그></태그2>처럼 태그 순서가 바뀌진 않았는지 확인한다.
    <태그><태그2></태그2></태그>가 올바른 방법이다.

4. <태그 속성="인수">에서 따옴표를 한쪽만 쓰진 않았는지 확인한다.

5. 인수에 Space(띄어쓰기)가 있는데 따옴표를 생략하진 않았는지 확인한다.

6. < 태그> 처럼 괄호와 태그글자 사이에 Space(띄어쓰기)가 있는지 확인한다.

7. 태그와 속성은 확실하게 구분 되었는지 확인한다.
    <FONT ALIGN="CENTER">... <FONT>태그에는 ALIGN이란 속성이 없다.
    <H1 FONT COLOR="BLUE">... 두개의 태그를 괄호안에 같이 쓸 수 없다.
    <H1><FONT COLOR="BLUE">...가 올바른 방법이다.

8. 속성의 인수를 제대로 썼는지 확인한다.
    <OL TYPE="DISC">... DISC 타입은 <UL>태그에서 쓴다.

9. 익스플로러 전용, 넷스케이프 전용 태그를 잘못 쓰진 않았는지 확인한다.



웹이조아
출처: http://webejoa.com/tag/index.html

홈페이지 제작 기술 HTML&CSS김재호,박사준,박현근
상세보기


'* Web > HTML' 카테고리의 다른 글

HTML 과제  (0) 2012.04.10
HTML+CSS+JavaScript2  (0) 2012.03.23
1.2 글자와 문단 관련 태그  (0) 2012.03.16
문서의 공통 구조  (0) 2011.11.21
HTML 이란?  (1) 2011.11.21
BlogIcon 알바 . 2017.11.30 17:48 신고 URL EDIT REPLY
감사합니다
Name
Password
Homepage
Secret