Press "Enter" to skip to content

Living

“각종 편리한 생활용품들을 소개하고 제품 공유합니다.”

그 외에도 잡다한 생활지식이나 팁, 다양한 짤 등 개인적인 취미나 생각들, 소소한 일상을 끄적이는 공간입니다. 제가 좋아하는 음악, 영화, 유투브도 추천합니다.

간단한 태그 지식

작성자
스플
작성일
2021-07-29 18:28
조회
19

기본 50가지 간단한 태그 지식 <퍼옴>

1. <html></html> HMTL 문장구조의 시작과 끝
 
2. <head></head> 머리말으로 JavaScript, Style시트 등이 삽입
 
3. <title></title> 제목으로 타이틀 바에 표시
 
4. <body></body> 본문 내용
 
5. <font face=”폰트이름” size=”크기” color=”색상”>내용</font>

글꼴의 모양및 크기를 지정

6. <marquee>내용</marquee> 텍스트에 마퀴 효과를 줌
마퀴태그의 패러매터
behavior=scrol 일정방향으로 스크롤…
behavior=slide 반복 후에 화면 끝에서 정지
behavior=alternate 좌우로 반복하기
scrolldelay=수치 스크롤 지연값을 정해준다. 값을 많이 주면 점프하듯이 스크롤…
scrollamount=수치 스크롤의 속도를 정해준다.
loop=수치 반복횟수를 정해준다.
infinite이면 무한반복…
bgcolor=RGB칼라  스크롤 영역의 배경색을 정해준다.
width=수치 스크롤 영역의 넓이를 정해준다.
height=수치 스크롤영역의 높이를 정해준다.
direction=left,right,up,down 왼쪽,오른쪽,위로,아래로…방향을 정해준다.
 
7. <script></script> 자바스크립트의 시작과 끝을 지정

8. <table width=”가로크기” height=”세로크기” border=”테두리두께” cellpadding=”셀간격크기” cellspacing=”셀여백크기”></table> 표의 시작과 끝을 알림

9. <tr></tr> 표의 열의 시작과 끝을 지정

10. <td></td> 표의 행의 시작과 끝을 지정

11. <hn></hn> 글꼴의 크기를 지정 n은 1~7사이의 정수

12. <embed src=”주소”></embed> 플래쉬, 동영상, 음악등을 삽입

13. <a href=”주소”></a> 하이퍼 링크를 지정

14. <img src=”주소” width=”가로크기” height=”세로크기”>

이미지를 삽입

15. <bgsound src=”주소” loop=”1 혹은 -1″>

배경음악을 지정 loop값이 1이면 한번 연주 -1이면 무한 반복

16. <FRAMESET></FRAMESET> 한 페이지에 두개 이상의 창을 작성
    <FRAMESET COLS=”n%,*”> 세로로 화면을 나누는 방식(프레임 열의 갯수와 그 폭을 지정)
    <FRAMESET ROWS=”n%,*”>  가로로 화면을 나누는 방식(프레임 행의 갯수와 그 높이를 지정)

17. <FRAME SRC=”문서.파일명”> 프레임에 불러올 HTML문서 링크

frame 태그의 패러매터
MARGINWIDTH=n 프레임 창의 가로 여백을 지정
MARGINHEIGHT=n 프레임 창의 세로 여백을 지정
SCROLLING=YES,NO,AUTO 프레임 창의 스크롤 지정여부,자동여부
FRAMEBORDER=n 프레임 경계선의 크기를 지정
TARGET=_blank, _self, _parent, _top 파일명 프레임 창에서 링크된 경우 링크될 때 보여주는 창을 정
NAME=  프레임에 고유의 이름을 간단하게 씀(target과 함께 쓰인다)

18. <BR> 한줄 띄기

19. <p></p> 문단 태그

20. <iframe src=”주소” name=”이름” width=”가로크기” height=”세로크기” marginwidth=”좌우여백” marginheight=”상하여백” scrolling=”스크롤바여부” frameborder=”테두리두께”></iframe>
아이프레임을 생성

21. <CENTER></CENTER> 가운데 정렬

22. <B></B> 두꺼운 글씨체

23. <STRONG></STRONG> 두꺼운 글씨체

24. <I></I> 이탤릭 체

25. <U></U> 언더라인

26. <SMALL></SMALL> 조금 작은 글씨체

27. <STRIKE></STRIKE> 취소선

28. <BIG></BIG> 조금 큰 글씨체

29. <SUP></SUP> 윗첨자

30. <SUB></SUB> 아래 첨자

31. <blockquote></blockquote> 인용문

32. <hr align=”정렬방식” width=”너비” size=”두께”>수평선 긋기

33. <pre></pre> 태그 사이의 내용을 눈에 보이는대로 출력할때

34. <ul></ul> 순서값이 없는 목록

35. <ol></ol> 순서값을 갖는 목록

36. <META></META> 문서의 메타 정보를 포함시킬때

37. <form></form> 문서에 입력 폼을 만들때 사용, 클라이언트에서 서버로 값을 전송할 수 있다.

38. <input></input> 입력 태그
입력태그의 예시
 – <input type=”text” size=”20″ maxlength=”20″> 한줄텍스트
 – <input type=”password” size=”20″ maxlength=”20″> 암호입력
 – <input type=”checkbox”> 등산 <input type=”checkbox”> 낚시 – 체크 박스
 – <input type=”radio”> 남자 <input type=”radio”> 여자 – 라디오 체크
 – <input type=”file” size=”10″> 파일 업로드
 – <input type=”hidden”> 숨긴 입력값
 – <input type=”button” value=”버튼”> 버튼
 – <input type=”submit” value=”전송버튼”> 전송 버튼
 – <input type=”reset” value=”리셋”> 리셋버튼
 – <input type=”image” border=”0″ src=”write.gif”> 이미지 버튼

39. <textarea cols=”18″ rows=”3″></textarea>여러줄 텍스트 입력

40. <select></select> 입력상자의 시작과 끝을 알림

41. <option></option> 입력상자의 각 항목의 시작과 끝을 알림

입력상자 태그 사용의 예시
<select>
<option>1학년</option>
<option>2학년</option>
</select>

42. <map></map> 이미지 맵을 지정]

43. <area> 이미지 맵의 클릭 가능 영역을 설정

이미지 맵 예시 1
<img src=”123.gif” usemap=”#Map”>
<map name=”Map”>
<area shape=”circle” coords=”30,30,10″ href=”xxx.html”>
</map>

이미지 맵 예시 2
<img src=”123.gif” usemap=”#Map”>
<map name=”Map”>
<area shape=”rect” coords=”30,20,60,80″ href=”xxx.html”>
</map>

44.  <basefont size=”크기”>  전체 글자 크기를 지정.

45. <em>내용</em> 관용적 표현을 위한 이탤릭체표현

46. <dfn>내용</dfn> 관용적 표현을 위한 이탤릭체표현

47. <var>내용</var>  관용적 표현을 위한 이탤릭체표현

48. <cite>내용</cite>  관용적 표현을 위한 이탤릭체표현

49. <tt></tt> 타자체 courier체로 표현

50. <code>내용</code>  타자체 courier체로 표현

51. <samp>내용</samp> 타자체 courier체로 표현

52. <kbd>내용</kbd> 타자체 courier체로 표현