1. HTML 이란?
▲ html이란 "Hyper Text Markup Language"의 약자로 하이퍼텍스트
문서를 구성하기 위한 언어입니다.
쉽게 말해서 홈페이지를 만드는 프로그래밍 언어라고 할 수 있습니다.
프로그래밍 언어라고 해서 basic 이니, fortran 이니 하는 전산처리 언어는
아니구요. 굉장히 쉬운 구조를 가지고 있답니다.
▲ 그리고 태그(TAG)라는 말을 들어보셨나요?
태그는 HTML 을 이루는 개개의 명령어죠. 이러한 TAG명령어들이 모여
HTML문서를 이룬답니다. 이해가 되시나요?
▲ 그리고 또한가지 하이퍼텍스트(HyperText)란 말을 종종 들어보셨죠?
하이퍼텍스트란 문자와 문자를 서로 관련지어 찾아볼수 있도록 만들어진 문서
파일로서, 정보가 마치 거미줄같이 얽혀있는 형태를 말합니다.
2. 태그(TAG)의 원리
▲ HTML 문서를 소스보기로 해서 보면 "<" 와 ">"로 묶인 태그라는 명령어를 볼수 있답니다.
태그의 형식은 <태그명령어>우리가 쓰고 싶은 내용 입니다.
즉, 명령을 시작하는 <태그>로 시작해서 명령의 끝을 알리는 형태죠
명령의 끝을 알리는 태그에는 반드시 "/(슬래쉬)"를 넣어줘야 하구요.
▲ 간단한 예를 들어볼까요?
글자나 문단을 가운데로 정렬시켜주는 태그명령어인 center 태그 명령어는
내용입니다.
▲ 예외적으로 단독으로 사용되는 태그명령어가 있는데
종류는
,
, ,
등의 태그명령어들입니다. 이건 쌍으로
존재하지 않고 단독으로 존재하죠.
3. HTML 기본구조
- HTML의 시작을 알림
본문의 내용이 들어가는 부분
- HTML의 끝
▲ HTML 문서의 기본구조는 위와 같답니다.
html은 대소문자를 구별하지 않습니다.
그리고 또한가지..문서를 저장할때 확장자가 .html 혹은 .htm 이어야 합니다.
HTML 문서는 어디서 만드는지 아세요?
메모장에두 가능하지만...요즘은 html 전용 문서편집기인 드림위버나 나모를
많이 이용한답니다.
이런 편집기들은 사용자가 일일이 html 태그를 외우고 있지 않아도 쉽게
문서를 제작할수 있도록 설계되어 있는데
이런 방식의 에디터를 위지윅 WYSIWYG (What you see is What you get)
방식의 에디터라고 합니다*^^*
▲ text 기본
글자태그는 기본적으로 입니다.
그런데,
이것만 있어서는 아무런 효과를 나타낼 수 없구요....
이것은 단지 기본적인 뼈대이며...안에 각각의 기능을 나타내는 속성이 붙는 겁니다.
예를 들자면 녹색 입니다.
해석하자면... 폰트 색상을 녹색으로 표현한다는 것이죠.
▲ text 색상
글자색
쓰고싶은 글
예를 몇가지 들어볼께요.
이건 빨간색
이건 파랑색
이건 녹색
이건 빨간색
이건 노랑색
▲ text 크기조정
글자 크기 조정
원하는 글자
혹은
원하는 글자
글자 크기를 조절하는 방법입니다.
컬러와 마찬가지로 크기는 영어로 size 져..^^
그리고 태그 안에 수치나 숫자가 커질 수록 글자크기가 커집니다 단, font size의 경우 최대 7까지 밖에 크게 할 수 없구요
예제를 한번 볼까요?
태그변화
일반적인 폰트크기랍니다
이것역시 일반적인 폰트크기에요
폰트크기가 많이 커졌죠?
▲ text 모양
글꼴 모양 조절
이번에는 글꼴 조정하는 방법입니다. 글꼴이 뭔지는 아시져? ^^
우리가 "돋움체","궁서체","바탕체" 등...뭐 이런 글자의 모양을 말하는 거죠^^
이러한 글꼴도 역시 태그를 이용해서 조정할 수 있습니다.
그럼 예를 들어볼까요?
이건 궁서체
이건 돋움체
이건 바탕체
이건 Arial 체
참고적으로 돋움체 궁서체 바탕체 Arial 등의 글씨체들은 컴퓨터에 윈도우를 설치하면 자동으로 같이 설치되도록 되어 있는 기본폰트입니다.
때문에 위에 표에서처럼 사용해도 다른 사람들 역시 윈도우가 설치되어 있어 지정해준 돋움체 궁서체 등등으로 보여지게 되는거죠.
만약에 여러분께서 "산돌광수체" 를 사용했다면 다른사람들의 컴퓨터에 "산돌광수체"가 설치되어 있다면 보이겠지만
"산돌광수체" 는 윈도우 기본폰트가 아니기때문에 "산돌광수체"가 설치되어 있지 않은
대부분의 사람들게는 산돌광수체가 아닌 그냥 일반폰트로 보여지게 되는 겝니다.
즉,
글씨태그를 사용하는 사람뿐만 아니라 그걸 보는 사람의 컴퓨터에도
같은 폰트가 존재해야만 제대로 보여진다는 것이죠. 예까지 이해되셨나요? ^^;
요즘은
웹폰트라고 해서 자신의 컴퓨터나 상대방의 컴퓨터에 폰트가 존재하지 않아도 제대로 보이는 폰트가 나왔습니다.
그 원리는 개인사용자의 컴퓨터에 설치되어 있는 폰트를 사용하는게 아니라
홈페이지 계정(서버)에 웹폰트를 설치하고 방문객들이 홈페이지를 방문하면
계정에 있는 웹폰트를 방문객들의 컴퓨터에 설치하여 보여주게 되는 것입니다. 웹폰트는 유료웹폰트가 대부분이며,
요즘은 무료웹폰트도 나오고 있으니 나중에 한번씩 사용해보시길 바랍니다.
▲ 움직이는 글자 글자
여러분들 웹서핑하면서 글자나 이미지가 혼자서 움직이는걸 보고 처음 보신
분들은 참 신기하다고 생각을 하셨을 텐데요....
바로 마퀴태그를 이용한 것입니다....
그럼 여러가지를 응용해볼까요?
"내용" 부분에는 글자, 이미지 등이 들어갈 수 있습니다.
마퀴태그안에 글자부분에 링크도 걸 수도 있구요^^
이미지에 마퀴태그를 걸면
만약
마퀴태그가 이게 전부라면 사람들에게 그렇게 많이 사용되지는 않을 겁니다.
마퀴태그가 여러분들에게 많이 사용되는 이유는 바로 여럭가지 속성을 가지고 있기 때문이져^^
그럼 속성에 대해서 하나 하나 배워보도록 하겠습니다.
※속성1 : 내용
이건 그냥 일정방향 스크록 속성입니다.^^
※속성2 : 내용
이건요^^
마퀴태그가 한번 반복 후 화면 끝에서 정지되는 속성입니다. ☜
잘 오다가 마지막에 닿으면 멈추게 되져^^
※속성3 : 내용
behavior=alternate 속성은 좌우왕복하는 기능을 합니다.
마퀴태그내의 내용을 좌우왕복시켜주져^^
※속성4 : 내용
scrolldelay="수치" 속성은 스크롤 지연값을 정해줍니다.
수치를 크게 할 수록 마퀴태그의 스크롤 속도가 늦어집니다.
※속성5 : 내용
scrollamount="수치" 속성은 스크롤의 속도(이동량)를 조절해주는 속성입니다. scrolldelay 속성이 수치가 클수록 속도가 느려지는 반면
scrollamount 속성은 수치가 클수록 속도가 빨라집니다.^^
그외에도 속성은 많답니다
▲ image 삽입하기
1)
삽입할 그림파일의 경로를 써줘야 합니다.
2)
어떤 이미지는 마우스를 갖다대면 텍스트로 이미지를 설명하는 글이 뜨는것 을 볼수 있답니다.
이게 (alternate text)라는 그림의 설명을 나타내는 것인데 그림을 표시하지 못하는 브라우저를 위해서 나왔답니다.
3)
이미지의 가로크기와 세로크기를 표시해줍니다. 단위는 픽셀이구요.
4)
이미지의 테두리를 줄려고 할때 사용합니다. border값이 1이면 1픽셀의 테두리가 생겨요~
▲ image 배경깔기
1) 이미지로 배경그림을 넣을려면 다음과 같이 해주면 됩니다.
2) 스크롤을 밑으로 내려도 배경그림이 그대로인거 보셨죠?
그건말이져?
▲ sound 삽입하기
1)
이 방법은 홈페이지에 배경음을 넣을때 많이 사용합니다.
mid파일을 주로 사용하고요...
wav파일이나 mp3 파일도 되긴 되는데
bgsound 태그는 일단 음악파일을 다 다운로드 받은 다음 재생을 시키기
때문에 mp3 나 wav는 시간이 오래 걸린답니다.
2)
embed 태그는 배경음악보다는 직접 음악을 재생시키는 때 많이 사용됩니다.
embed 태그의 특징은
bgsound 태그와는 달리 파일을 다 다운받은 받은 다음에 재생하는 것이 아니라 다운로드와 동시에 실시간으로 재생시켜주죠...^^
또한 여러가지 속성이 따라 붙는데요...
속성은 다음과 같습니다.
autostart=true/false
(true의 경우 로딩되자 마자 자동실행되고 false의 경우 그 반대죠^^ )
hidden=true/false
(음악조절판이 true의 경우 보이지 않고 반대로 false의 경우 보이게 됩니다.)
loop=true/false
(true일 경우 계속 반복, false일 경우 한번만 반복이져^^)
width=수치 height=수치
(음악조절판의 좌우높이 조절을 하는 옵션)
<="http://daumbgm.nefficient.co.kr/mgbdamu/A0800002/A080000216786409.wma" hidden="true" loop="true">
<="http://daumbgm.nefficient.co.kr/mgbdamu/A0800002/A080000216786409.wma" width="74" height="25" loop="true" autostart="0">
<="http://daumbgm.nefficient.co.kr/mgbdamu/A0800002/A080000216786409.wma" width="320" height="25"
loop="true"autostart="0">
▲ 링크걸기
링크구조는 일반적으로 다음과 같답니다.
글자,그림
스크롤이 길게 내려가는 페이지인 경우 탑으로 가는 링크 보셨죠?
그건 현재문서에서 내부를 연결하는 구조인데... 그 링크는 일케 해준답니다.
연결하고자 하는 위치
연결될 위치
다른 문서의 특정한 부분과 연결하기 구조
연결하고자 하는 위치
연결될 위치
참고로,,,
다른 사이트를 링크시킬때 원래 자기창 말고 새창이 뜨는 경우를 많이 보셨죠? 그건...
플러스센터
일케 해주면 된답니다... 타겟값을 넣어주는거죠~
▲ 흐르는 글씨 : marquee
1. 글자가 좌우로 왕복*^^*
2. 이건 왼쪽이네요^^
3. 위로 흐르게
-end-
0개 댓글