html 태그 연습장 다운받기 html 태그 배우기
html 태그 연습장 다운받기 html 태그 배우기 방법을 알아봅시다.
예전에 배우다 재미를 못 느껴서 그만두었는데, 최근에 홈페이지 제작하는 강좌를 봤는데 재밌더라구요.
그래서 다시 태그 부터 배워볼려고 html 태그연습장을 다운받았는데
태그연습장이나 문서편집 프로그램(에디터) 아니면 메모장 이용해서 연습 할수도 있는데
매모장은 html 소스를 붙여넣은 후 다른이름으로 저장해서 html 형식으로 저장해야 결과를 볼 수 있기 때문에 조금 번거로울수 있어요.
문서 편집 프로그램은 설치해야 하는 번거움움이 있고
태그연습장은 설치필요없고 다운받은후 압축을 풀고 연습할 html 소스를 붙여넣기만 하면 되구요.
아주 간단하게 바로 결과를 볼 수 있기때문에 매우 편리합니다.
혹시나 html 태그 연습장 필요하신분들을 위해 공유해봅니다..
태그연습장은 초보들이 html 태그 배우기 위해 많이씁니다.
태그 연습장이 뭐예요?
우선 태그에 대해서 말드릴께요^^&
태그연습장은 말 그대로 태그를 연습하는거에요
태그로는 여러가지 할 수 있죠
그걸 연습한 다는 말이에요 ^ ^
쉽게 말하면 홈페이지를 만들기위해서 필요한 일종의 명령어라고 생각하시면 됨니다^^*
html은 마니 들어 보셧죠^^* html로 시작하는 소스를 태그라로 합니다 주로 태그 연습장은 메모장이나 워드페드로 쓰임니다^^*
워드페드나 메모장에 태그를 연습해서 주로 올리죠^^*
이 메모장이나 워드페드를 보고 태그 연습장이라고 합니다 홈페이지를 만드는데 꼭 필요하죠^^* 연습을 해야 하니까요^^*
압축 풀고 'HTML 태그연습장' 실행 해줍니다.
이 파일을 열 때 사용할 앱을 선택하세요.
창이 뜨면 Microsoft Edge 선택하고 하단에 '항상 이앱을 사용하여 .html 파일 열기' 체크해주시고 확인 눌러주면 됩니다.
그럼 요렇게 태그연습이 뜹니다..
그러면 태그는 어케 사용 할할까요?
사용법은 간단합니다.
연습할 태그를 <body> 와 </body>사이에 넣고 [봅시다] 클릭 하면됩니다.
예제로 하나 보여드릴께요.
링크 태그를 이용해서 링크를 누르면 사이트 이동하는 예제에요.^^
<a href=http://daum.net> 다음바로가기 </a> 이렇게 쓰고 봅시다를 눌러보시면
이렇게 뜰거에요. 다음 바로가기 눌러보시면 daum.net 사이트로 이동될거에요.
이미지 뜨게 하는 방법은 <img src=이미지주소 여기넣으면 됩니다.>
그럼 이미지가 떠에요^^
이미지 누르면 사이트로 이동하려면
<a href=이동할 사이트 주소> <img src=여기에 이미지 주소 넣으면 됩니다.>
위에 방법은 태그 연습장이용해서 연습하는 방법이구요.
다른 방법으로는 태그 연습장 쓰지 않고
직접 메모장에서 하는 방법이에요. 이방법은 조금 번거로울수 있어요.
자신이 연습하고 싶은 태그를 메모장에
쓰고 파일을 저장할때
뒤애 확장자를 .txt 로 저장하지말고 확장자를 .html로 붙여주고 저장하시면됩니다.
그리고 html 파일을 실행해보시면 태그 연습한게 뜹니다.
꼭 .html(확장자) 로 저장하셔야 됩니다.
아니면 AcroEdit 프로그램을 이용해서 연습하는 방법이에요.
AcroEdit 프로그램을 설치하면 태그연습도하고 각종문서 편집도 할 수 있어요.
AcroEdit는 개인이 만들 프로그램으로 누구나 무료로 사용할 수 있답니다.
AcroEdit 다운로드
http://www.acrosoft.pe.kr/board/download
여기서 프로그램을 다운받아 사용하셔도 됩니다.
⊙ HTML 문서의 기본 구조
1. <HTML>~</HTML> : HTML 문서의 시작과 끝을 알려주는 태그로 크게 <HEAD>와 <body>부분으로 나눕니다.
2. <HEAD>~</HEAD> : 문서 제목을 표시하는 <TITLE>~</TITLE>이 포함됩니다.
3. <body>~</body> : 본문 내용이 들어갑니다.
⊙ 줄, 문단 바꾸기 : <P>,
⊙ 글자 크기 바꾸기
1. <H1>이 가장 큰 글씨이고 <H6>로 갈수록 글씨의 크기가 작아지는 태그로 주로 제목을 쓸 때 많이 사용합니다.
2. <FONT SIZE="숫자"> 숫자가 커질수록 크기가 커집니다.
⊙ 글자 색과 글꼴
<FONT COLOR="색" FACE="글꼴(예:엽서체 굴림체)"> 색은 영어로 써야 하고 (예를 들어서 초록색이면 GREEN 이라고 ""안에 써 넣는다. 위에 있는 SIZE="숫자" 도 사이에 끼워넣으면 같이 쓸수 있다.
⊙ 정렬하기
가운데 정렬 : <CENTER>~</CENTER>
⊙ 수평선 넣기
<HR> 홈페이지 내용을 구분하기 위한 것입니다.
⊙ 글자 모양을 바꾸는 다른 태그들
<B> : 굵게
<I> : 기울임꼴
<U> : 밑줄
⊙ 이미지 넣기 : <IMG SRC="그림파일명">
⊙ 문서연걸하기 (링크걸기)
<A HREF="연결할 문서 이름">~</A>
작업한 문서들을 서로 연결해주어야 완전한 하나의 홈페이지가 됩니다. 이렇게 연결해주는 역할을 하는 것이 하이퍼링크입니다.
⊙ 흐르는 글자 만들기(마퀴태그)
<MARQUEE>~</MARQUEE>
이외에도 태그들이 더있지만 시간상 여기까지만 쓸께요.^^
꼭 대문자로 하지 않아도 되고, ~ 글자는 생략해도 됩니다.
그럼,,, 참고하세요......... ^,^