Hoon222y

Web App 개발 공부하기(4) - HTML 이론 본문

카테고리 없음

Web App 개발 공부하기(4) - HTML 이론

hoon222y 2017. 1. 24. 18:32

Hypertext - 문서와 문서가 서로 연결되어 있음.

[HTML의 기본문법]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
Hello. <strong> World </strong> !!!
</body>
</html>

가장 기본적인 틀이다. 딱봐도 몇몇 부분을 제외하고는 직관적으로 어떻게 보일지 알 수 있다. (HTML이 배우기 쉬운 이유중 하나)

<head>태그는 문서의 정보를 담고있는 태그이고 , 화면에 보이는 부분은 <body>부분에 작성을 해주면 된다.

[HTML 문법 - 속성]

많이 사용하는 태그중 하나가 바로 a 태그이다.(하이퍼링크 등등 )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
접속하세요! <a href="http://www.naver.com" target="_blank">네이버</a>로!!
</body>
</html>

<a> 네이버로 </a>라고 한다면 네이버가 링크라는 것만 알 수 있지만, a의 속성으로 href 가 들어가게되면 비로소 그 링크의 주소가 href에 적힌 링크라는것을 알 수 있는것이다. 또한 target = "_blank" 라는 속성을 통하여 클릭 시 새로운 창에서 네이버 창이 열리게 해준다.  (속성의 종류 및 각각의 상세 내용을 파워 구글링을 해보도록 하자 . GOD구글 )

[HTML 문법 - 태그의 중첩]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ol>
<ul>
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
</ul>
</body>
</html>

위의 스크린샷과 같이 순서가 필요한 list의 경우에는 <ol>태그를 , 순서가 필요없는 경우에는 <ul>태그를 사용하면 된다.

[HTML 정리]

HTML은 아주 경량화된 문법을 가지고 있는 언어이다. (태그를 알고 그 태그를 적용할 줄만 알면 되는데 너무 정확하게 할 필요는 없고 필요할 때 그때그때마다 찾아가면서 적용하는것으로도 충분하다고 생각한다. )


공유하기 링크
'전체' Related Articles more
Comments