이곳에서는 정말 기본적으로 알아두셔야 할 태그에 대해서 공부합니다. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
HTML 태그란? | HTML의 기본구조 | 글자태그 | 그림태그 | 하이퍼링크 | 테이블태그 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
1. 태그란? 먼저 여러분 HTML 이라고 들어보셨나요? 일단 HTML 이란 "Hyper Text Markup Language" 의 약자. 2. 태그의 두가지 종류 태그엔 두 가지가 있는데 하나는 열었으면 닫는 태그, 또하나는 단독으로 쓰이는 태그입니다. |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
아래 태그를 보세요. 저것이 가장~ 기본적인 골격입니다.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
이곳에서부터는 반드시 태그연습장을 키시고 연습하시면서 하세요. 1. 가장 자주사용되는 글자 태그
결론 !! <b></b>는 글씨를 굵게 해주고 <u></u>는 글씨에 밑줄을 거준다! 2. 첨자 관련 태그 이제 아래첨자, 위첨자를 배워볼까요?
별로 쓸대는 없지만 수학 공식이나, 연산할 때는 그래도 가끔쓰이지 않을까하는 ;; 개인적인생각입니다. 3. 글자 위치 관련 태그
결론!! 역시 외우셔야 합니다. 자주쓰입니다. 특히 <center> 는 가운데 정렬로 TIP:: 공백 태그라고 아시나요~?
글씨 크기와 색상등을 조절해 봅시다! 4. 글자 크기 마음대로!
<font size="*"> 는 *의 숫자는 작을수록 크기가 작고 클수록 커집니다. 5. 글자 색상 바꾸어 버려!
글자 색상을 정해주는 태그 아시겠죠? 굵은 글씨부분에다가 색상코드나 영문을 집어넣으면되요. 6. 글자 폰트를 바꿔 보기
글씨체를 조절합니다. 그런데 우리 컴퓨터들에게는 기본적인 것만 저장되어있기때문에 요곳들은 종합해서 써볼수 있냐구요? 당빠죠!
자 여기까지는 완전 기본태그! 7. 한줄띄는 태그 글자를 쓰다보면 한줄을 씌고 싶은데, 일반 HTML 작성할 때는 아무리 엔터를 눌러도,
<br> 태그를 이용해주셔야 합니다. <br> 태그의 특징은 닫는태그가 없습니다. 8. 문단태그 한줄띄는 것보다 조금터 크게 문단형식으로 띄우는 태그가 있습니다.
<br>보다는 <p>가 크게크게 띄워집니다. 9. 글자 쓴 그대로 나타나게 하는 <pre> 태그 생각보다 자주쓰이는데요. 알아두시면 좋을 것 같습니다.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
그림 태그! 이거많이들 기다리셨죠~? 그림 태그에 대해서는 무지 간합니다. 1. 기본적인 그림 태그
결론!! 이미지 태그 쉽죠? <img src="이미지태그주소"> 요렇게만 해주시면 되는겁니다! 2. 그림태그에 그림설명 넣기
alt="그림설명" 이렇게 하시면됩니다. 3. 이미지와 문단 정렬 이미지와 글자가 함께 쓰일때 나타나는 모습을 조절할 수 있습니다.
위에 쓰인바와 같이 이미지 태그 안에 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
아 이것도 빼놓을 수 없이 중요한 태그입죠! 이것을 통해서 다른 홈페이지로 이동할 수 있습니다. 1. 하이퍼링크 태그
굵은글씨로되어있는 제홈페이지 주소를 원하시는 주소로 바꾸시면 됩니다. 2. 하이퍼링크 태그 건 것을 새창으로 띄우기 자, 그런데요.. 여러분들이 한 것을 미리보기해서 클릭하면 새창이아닌 그자리에서뜨죠? <a href="http://yoonmi.net" target="_balnk">윤미쩜넷</a> 저렇게 굵은글씨를 추가해주셔야 합니다. 그래야 새창으로 떠요~~ 묻지 말고외워라!
3. 하이퍼링크 걸린 이미지에 테두리 없애기 자, 그런데 여기서 또 질문! 이상탄 테두리가 생겨요!! 그쵸?
어떻습니까? 완벽하지 않습니까? 하하하~ |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
테이블태그는 표를 만드는 태그입니다. 1. 기본 테이블 태그 <table> 첫 시작은 <table> 그다음에 줄을 나누는 태그 <tr>이 있습니다. 자 무슨말인지 모르겠죠?;; 그럼 우선 태그연습장에 아래와 같이 입력해봅니다.
결과물은 다음과 같습니다.
자 잘모르겠죠? 그럼 두께를 줘봅시다.
결과물은 다음과 같습니다.
이제 셸을 나눠보겠습니다. <td> 가 늘어나겠죠.
결과물은 다음과 같습니다.
<td>를 세 번 사용했더니 셸(칸)이 세 개가 생겼습니다. 그러면 셸과 나눔과 동시에 줄도 늘려볼까요?
결과물은 다음과 같습니다.
<tr>이 한번 더 늘어난 만큼 줄이 하나 더 생겼어요. ^-^ 2. 테이블 태그 크기 조절 각 테이블 마다 가로나 세로 크기를 조절 할 수 있습니다.
결과물은 다음과 같습니다. 테이블의 세로 크기를 200px로 주었기 때문에,
3. 테이블 배경 색상 주기 테이블 배경 색상을 줄 수 있습니다. 전체적으로도 가능하고, 셸마다도 가능합니다.
결과물은 다음과 같습니다. 지금 보면 아랫줄 왼쪽 셸은 아무색도 없는데요.
여기까지 고생하셨습니다. 사실 테이블 태그가 이것말고도 무궁무진 합니다. |