개탕 IT FACTORY

HTML의 기본구조 및 태그 본문

Front-end/HTML_CSS

HTML의 기본구조 및 태그

rendar02 2018. 11. 17. 23:35
반응형

웹사이트 구축할때 쓰이는 3가지 언어에 대해서 설명 드렸습니다 

HTML , CSS , javascript 


그중 오늘은 HTML에대해서 자세히 알아볼까합니다.


HTML


전글에서도 말씀드렸지만 HTML은 태그기반의 언어입니다. 


HTML의 기본구조는 이렇게 되어있습니다 


<!doctype html>
<html>
  <head>
    <title>Hello HTML</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

HTML의 기본구조입니다 


보통 시작태그와 끝태그로 구성이 되어있습니다 

시작태그는 <HTML> <head> <body> <p> 등으로 /가 없는것들 이고 

끝태그는 </HTML> </head> </body> </p> 등으로 /가 존재하는 태그입니다 


보통 태그는 시작태그 끝태그가 존재하지만 가끔 시작과 끝을 한번에 하는 태그가 존재합니다 

예를들면 </br>같은 개행 태그같은경우 한번에 끝내도 상관없습니다.



하나씩 설명을 드리겠습니다 <html>로 시작해서 </html>로 끝나는건 동일하나 안에 기능들을 설명해드리죠 


<head>
<title>제목</title>
</head>

<head>태그


head태그안에는 title이 존재하고 그외 웹사이트의 정보등을 담는것들이 존재합니다 

예를들면 구글 폰트를 적용시킬 링크나 혹은 스타일시트를 적용시킬 링크 등을 담는 <link>태그등을 배치하죠


title같은경우 브라우저로 접속시 표시되는 웹사이트 이름을 표시합니다 


티스토리를 접속시 브라우저 탭에 티스토리라고 적힌것이 바로 그것이죠 



<body>태그


<body>태그의경우 웹사이트에 보여지는 영역입니다 


네이버에 접속할시 보여주는 모든 정보들이 바로 여기있습니다 버튼,링크버튼,택스트박스 등 여러가지가 다 이곳에 배치되어있죠 


사실 이곳안에는 수많은 태그들이 있습니다 


<img>태그 - 사진등을 배치할때 사용  ex) <img src="img_girl.jpg" width="500" height="600">


<a>태그 - url 링크를걸어 두는 태그(url이외도 가능) 

ex)<a href="https://www.w3schools.com">This is a link</a>


<p>태그 - 한단락으로 구성되어 있는 태그 (한줄을 차지한다)


<table>태그 - <tr>행과 <td>열로 구성되어있다 테이블을 만든다(표형식)


ex) <table>

       <tr>

          <td>

          </td>

       </tr>

    </table>


이외 여러가지 <strong>태그라든지 <h1> ~ <h7>로 글자크기 굻고 크게 하는 태그라든지 


여러가지가 있습니다 


이것을 다 알아야되냐 하면 음... 역시나 많이 알수록 좋긴 하겠지만 굳이 다 알필요는 없습니다 


필요에 따라 혹시나 검색을 해보시면 되고 


만약 글짜 크기나 굻기 변경 혹은 폰트 변경등은 CSS 스타일로도 충분하기때문에 


전체적인 틀만 알아 두시면됩니다 


그리고 구글 검색을 통해 만약 사이트의 네비게이션 바가 필요하다 그러면


HTML navigation bar


아주 잘나온답니다 심지어 영어지만 동영상도 존재하니 참고하세요!!

반응형

'Front-end > HTML_CSS' 카테고리의 다른 글

CSS셀렉터와 요소  (0) 2018.12.26
CSS기본구조  (0) 2018.12.25
HTML,CSS그리고 javascript  (0) 2018.11.04
'Front-end/HTML_CSS' Related Articles more