HTML을 시작하기에 앞서 개발툴이 필요하겠죠!!
인터넷 검색을 해보시면 여러툴이 있는데 저는 이클립스를 사용하겠습니다.
.html 을 생성하게 되면 크게 head 부분과 body 부분이 만들어지게 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <!-- head 에서는 환경설정을 한다고 생각하시면 됩니다. --> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <!-- 바디에서 html이 작동한다고 보시면 됩니다. --> <body> Hello <br/> </body> </html> | cs |
태그는 시작과 끝을 가지고 있습니다. 시작태그는 < , 끝태그는 </ 을 사용해서 구분을 합니다.
html 태그안에는 head와 body 태그가 있는데
head 태그는 주로 환경설정 , html 문서의 환경을 설정해주는 역할을 합니다.
body 태그는 html 문서가 보여지고 동작하는 부분을 작성하는 부분입니다. html이 작동하기 위해서는 body 태그안에
코딩을 해야 한다고 생각하시면 됩니다.
그럼 간단한 태그들을 알아볼까요?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>Insert title here</title> </head> <body> <h1>h1 태그 입니다.</h1> <!-- h 태그는 자동개행을 가지고 있다. --> <h2>h2 태그 입니다.</h2> <h3>h3 태그 입니다.</h3> <h4>h4 태그 입니다.</h4> <h5>h5 태그 입니다.</h5> <h6>h6 태그 입니다.</h6> <p>p 태그는 주로 문단,단락의 역할을 합니다.<br/> 행바꿈입니다.</p> <p><a href="http://naver.com">네이버 홈페이지 </a> <p><i>KOREA</i></p> <p>KOREA<sup>seoul</sup></p> <p><ins>KOREA</ins></p> <p><del>delete</del></p> </body> </html> | cs |
body부분에 여러 태그들이 들어가있는데 하나씩 알아봅시다.
먼저, <h>태그 h태그는 h1~h6까지 존재하는데 글자의 크기를 설정해주는 역할을 합니다. h1에서 h6로 갈수록 작아지게 됩니다.
html의 경우 밑줄을 띄우고 싶으면 <br> 태그를 사용해야하는데 h 태그의 경우 자동개행입니다.
<p> 태그는 문단,단락의 역할을 합니다.
<br> 태그는 개행 역할을 하게 되는데 다른 태그들과 달리 시작과 끝 태그가 하나로 통합되어 있습니다. <br /> 이렇게 사용합니다.
<a href> 태그의 경우 링크 역할을 합니다. 우리가 웹페이지에서 특정 링크를 누르게 되면 이동하는것을 볼수 있는데 그때 href를 사용합니다.
<p>태그안에 <i> , <sup> , <ins> , <del> 태그가 들어가있는데
i 태그는 폰트 종류중 하나입니다.
sup 태그는 글자 오른쪽 상단에 작게 표시되는 역할을 합니다.
ins는 밑줄을 그어주는 역할을 합니다.
del은 글자를 사용하지 않는것처럼 보이게 중간에 줄을 긋는 역할을 합니다.
<결과>
'프로그래밍 강의 > HTML 과 CSS' 카테고리의 다른 글
| [HTML/CSS] Chapter6. 블록요소와 라인요소 (0) | 2018.09.14 |
|---|---|
| [HTML/CSS] Chapter5. Form 폼 태그!! (0) | 2018.09.14 |
| Chapter4. 테이블 태그!! (0) | 2018.09.06 |
| Chapter3. 리스트 태그!! (0) | 2018.09.06 |
| Chapter1. Web 이란? (0) | 2018.09.04 |
