HTML은 Hyper Text Markup Language의 약자로. 웹 브라우저에 보여지는 화면 그 자체라고 말할 수 있다.
HTML을 일단 알아보자면, 기본적으로 테그(Tag)라는 개념이 있다.
html 파일의 예문을 한번 보자.
<머라머라>
</머라머라>
이런 구조가 눈에좀 들어오나 모르겠다.
걍 저게 테그다. 시작테그와 닫기테그(</>)
이런 테그들이 HTML에 100가지가 넘게 있다고 한다.
뭐.. 글자 크기 바꾸기, 줄바꾸기, 속성 부여하기 등등.. 많은 테그들이 있는데. 다 외울 필요없다.
자주 쓰이고 눈에 밟히는 녀석들만 외워주면 된다. 모르면 그때그때 구글링을 하면된다.
구글링은 진리다.
그럼 이렇게 난잡하게 적혀있는 테그를 뭐 어떻게 봐야 하나.
쉽다. 그냥 시작테그와 닫기테그 안에 있는 녀석들이 상위테그에 종속되어 있다고 보면된다.
위 예제에서 <html>테그가 상위테그이고 그밑에 <head>, <body>가 있다.
그리고 <head> 하위에는 <title>이 있다. 이렇게 이해하면 된다.
그림으로 보면 이럼.
마치 트리구조와 같다. 요걸 DOM(문서 객체 모델) 이라고 함
이걸 알아야 CSS 작성할 수 있으니까 알고는 있으셈.
뭐 html자체가 문법이랄것도 없고.. 그냥 자주쓰는 테그를 알랴줌.
* 텍스트 테그
<h1> ~ <h6> : 제목을 나타내는 테그이다. h는 heading의 약자.. 글자 크기가 h1이 제일크고 h6이 제일 작다.
<p> : 본문을 나타내는 테그이다. p는 paragraph의 약자. 단락마다 한줄 간격을 삽입한다.
<hr> : 가로줄을 나타내는 테그이다. hr은 horizontal line의 약자. 닫기 테그가 없다.
<br> : 줄바꿈을 하는 테그이다. 마찬가지로 닫기 테그가 없다.
* 목록, 테이블 테그
<ul>, <ol> : ul은 숫자 없는 목록, ol는 숫자가 있는 목록을 표시한다.
<li> : ul과 ol사이에 위치하여 항목을 나타낸다.
<table> : 말그대로 표를 만드는 테그이다. 안에 tr, td테그를 쓴다.
<tr> : table row, 표에서 행을 나타낸다.
<td> : table data, 표에서 열 즉, 값을 나타낸다.
* 링크, 이미지 테그
<a> : 하이퍼링크를 만드는 테그이다. 속성값으로 href 라는 녀석을 쓴다.
e.g. <a href="http://www.naver.com"> 네이버로 이동. </a>
<image> : 웹 상에 이미지를 띄우는 테그이다. 속성으로 src라는 녀석을 씀. 닫기 테그가 없다.
e.g. <img src="http://www.google.co.kr/images/srpr/abc.png">
* 폼 테그
<form> : 문자를 입력할 수 있는 폼을 만들고 서버로 전송하는 테그이다. action과 method를 속성으로 가진다.
action은 전송할 서버url, method는 http 요청 메소드 적는 속성이다.(http://blog.naver.com/s2kiess/30182409370 참고)
e.g. <form action="www.naver.com" method="get">
그리고 w3schools 라는 웹 언어에 대한 튜토리얼과 예제들이 가득한 곳이 있다.
검색하면 많이 보일 거임. http://w3schools.com/html/default.asp
'IT 그리고 정보보안 > Knowledge base' 카테고리의 다른 글
| CSS Box Model (0) | 2021.04.15 |
|---|---|
| CSS (Cascading Style Sheet) 개념 (0) | 2021.04.15 |
| PIE (Position Independant Executable) (0) | 2021.04.15 |
| SSP (Stack Smashing Protection) (0) | 2021.04.15 |
| 스택 가드 (Stack Guard) (0) | 2021.04.15 |