모든 강좌는 실무 기준으로 작성되며 이론 및 내부 구조 등이 궁금하신 분들은 직접 검색하시고 공부하시기 바랍니다.

 

Html 을 사용할 수 있도록 필요한 최소한을 설명합니다.

 



 

먼저 Html 이란 Hyper Text Markup Language 의 약자이며

 

홈페이지를 만드는데 있어서 기본적인 프로그램 언어라고 생각하시면 됩니다.

 

 

1. Html 의 구조

 

 

Html 은 <로 시작해서 > 로 끝나는 태그라는 것을 가지고 작성합니다.

 

하나의 시작 태그는 <html>과 같은 구조이며 이 태그가 끝나는 시점을 알리는 부분은 </ 로 시작해서 >로 끝나는 태그로 작성합니다.

 

그럼 하나의 태그 모양은 <html> </html> 과같은 모양이 되고 이 태그 사이에 다른 태그 및 텍스트를 작성하여 홈페이지를 만든다고 생각하시면 되겠습니다.

 

위 그림과 같이 기본 Html 태그 구조html, head, title, body 의 구조를 가집니다.

 

html 영역은 눈에 보이는 한 페이지를 가르키는 영역이라고 생각하고, head는 말 그대로 머리라고 생각하면 됩니다.

 

사람도 공부를 해서 머리에 집어넣듯이 html도 머리에 각종 설정하는 정보를 집어넣어 똑똑하게 만든다고 생각하세요.

 

title은 인터넷 익스플러로를 실행하면 탭들이 보일텐데 그 탭의 제목을 나타냅니다.

 

body는 실제 홈페이지의 내용을 작성하는 영역이며

 

모든 태그는 시작태그와 종료태그가 존재하며 그 위치나 순서 또한 위의 구조를 따라야 합니다.

 

이제 위 코드를 작성하는 방법을 알려드리겠습니다.

 

가장 연습하기 좋고 심플한 방법은 연습장(notepad) 입니다.

 

오타 없이 타이핑 하는 연습이 필요하고 오타가 났을 경우 찾기 어렵지만 꼭 찾아야 하기 때문에

 

심플하지만 어려운 연습장 사용을 권고합니다.

 

위 그림과 같이 연습장에 작성하고 저장하실 때 연습.html로 저장하세요.

 

확장자를 꼭 html로 저장해야 합니다.

 

 

그럼 다음 저장한 html 파일을 실행시키면 다음과 같은 화면이 브라우저에 나오게 됩니다.

 



 

 

2. Body 태그의 속성

 

모든 태그들은 공통적인 속성이 존재하며 때때로 특정 태그는 자신만의 속성을 가지기도 합니다.

 

속성이라 하면 화면이 보여지는 배경, 글자색, 여백 등을 조절할 수 있습니다.

 

지금은 body 태그의 속성을 연습해봅니다.

 

기본적인 구조는 처음 설명한 모양과 같고 body 부분만 고치면 되겠습니다.

 

body에 설정되는 속성은 body 태그 안에 작성되는 태그 및 텍스트에 영향을 미칩니다.

 

 

위에 작성된 body 태그의 속성 대해 설명합니다.

 

bgcolor : 배경색상을 설정합니다.

text : 글자 색상을 설정합니다.

- 색상을 설정하는 방법 -

1. 색의 이름을 영어로 기술한다.

2. #RRGGRR의 형식으로 기술한다. (16진수 표기법)

3. rgb(R,G,B) 형식으로 기술한다. (10진수 표기법, % 사용 가능)

 

background : 배경이미지를 설정한다.

ex) background = "경로명/이미지파일명.확장자"

 

- 경로명 표시 방법 -

1. 현재폴더 : .

2. 상위폴더 : ..

3. 최상위펄더 : /

4. 하위폴더 : 폴더명

 

ex) ../그림파일명.확장자 - 상위 폴더
 /그림파일명.확장자 - 최상위 폴더

 

link  - 방문 내역이 없는 링크 걸린 글자의 색 지정

vlink - 방문 내역이 있는 링크 걸린 글자의 색 지정
alink - 링크걸린 글자를 클릭하는 순간의 색 지정

 

- 링크 설정 방법 -
 형식 : <a href="문서명 또는  URL주소">글자나 그림</a>  - <a></a> 태그

 

bgproperties="fixed" - 배경이미지는 스크롤되지 않는다.
 
topmargin - 상하의 여백을설정한다.
leftmargin - 좌우의 여백을 설정한다.

 

실행시키면 다음과 같이 나오게 됩니다.

 

 

 

bgcolor 을 yellow로 설정했지만 background 때문에 보이지 않습니다.

 

두개를 동시에 설정하면 배경색보다는 배경이 위에 올라와 보이게 됩니다.

 

궁금하신 분은 직접 해보시길 바랍니다.

by 개발자 CofS 2016.01.18 10:42
  • King_Max 2016.10.13 13:46 신고 ADDR EDIT/DEL REPLY

    감사합니다! 오늘부터 열심히 배워보겠습니다! =)

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2016.10.14 09:05 신고 EDIT/DEL

      부족한게 많지만 좋은 참고자료가 됐으면 좋겠습니다 ^^

  • Favicon of http://lsh34206.tistory.com BlogIcon 푸링유튜브 2017.03.01 22:43 신고 ADDR EDIT/DEL REPLY

    실행 어떻게 해요?
    그리고<br>이 어떤뜻이에요?

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.03.02 09:19 신고 EDIT/DEL

      메모장에서 작업하신다면 html 파일로 저장 후 실행하시면 됩니다.
      기타 에디터 툴에서 작업하신다면 그 툴에 맞게 실행하시면 되구요

      br 이란 줄바꿈 태그입니다.

  • Favicon of http://lsh34206.tistory.com BlogIcon 푸링유튜브 2017.03.02 15:05 신고 ADDR EDIT/DEL REPLY

    오오 알려주셔서 감사해요~!

  • 퓨어찡찡 2017.04.06 11:13 신고 ADDR EDIT/DEL REPLY

    감사합니다 너무 정리잘되있고 열심히배워보겠습니다

  • qw6396 2017.06.11 01:18 신고 ADDR EDIT/DEL REPLY

    text글자를 green으로했는데 링크글자를 다른색으로 정해도 올 컬러 전부 green으로 뜨네요 이럴떄는 어떻게 할까요?

    • Favicon of http://cofs.tistory.com BlogIcon 개발자 CofS 2017.06.12 09:20 신고 EDIT/DEL

      body 에 선언하지 마시고 태그별로 스타일을 선언하세요 ㅎㅎ

  • Favicon of http://cofs.tistory.com/120 BlogIcon 한울 2018.03.08 13:08 신고 ADDR EDIT/DEL REPLY

    boakground 오타 있습니다.
    좋은 강좌 감사합니다~

  • patience 2018.10.23 20:04 신고 ADDR EDIT/DEL REPLY

    내용 잘 봤습니다. 따라해봤는데 재밌네요. 설명이 너무 알기 쉬워서 큰 어려움이 없었습니다.
    앞으로 자주 방문해서 공부 좀 하겠습니다.
    감사합니다.