html의 기초

html의 기초, html의 다양한 태그들, html이란?

 

 정의

프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어입니다.

웹개발의 가장 기초가 되는 언어입니다. 

 

쉽게말해서 브라우저라는 빈 스케치북에 밑그림을 그릴 수 있게 해주는 연필 같은 존재라고 생각하면 됩니다.

 

 

 기초 태그들

1. 잘 꾸며지는 것 vs 안꾸며지는 것

display: block  VS display :inline

css는 나중에 알려드리겠습니다. 지금은 block은 태그를 잘 꾸며주고 inline은 꾸미기가 어렵다고 이해하시면 됩니다.

 

 

block 태그들은

<div></div>

<p></p>

<h1></h1>

<h2></h2>

<h3><h3>

등등이 있습니다.

 

html의 div태그는 하나의 박스라고 생각하면 됩니다.

 

div 설명

현재 div에 강제적으로 크기를 넣어서 색이 칠해졌지만 기본적으로 크기를 안주면 가로의 길이가 100%입니다.

html에서는 가로를 width라고 하고 높이를 height라고 합니다. 이것도 알아 두십다.

display: block인 것들은 width의 값들이 모두 100%라고 생각하면 됩니다.

 

 

<div></div> => 레이아웃을 잡아주는 기초 박스

<p></p> =>텍스트를 넣는데 기초가 되는 태그

<h1></h1> => 가장중요한 텍스트

<h2></h2> => 두번째로 중요한 텍스트

<h3><h3> => 세번째로 중요한 텍스트

 

h1 ~ 4 html코드들은 자동적으로 글씨의 자동으로 두께를 조절해줍니다.

이렇게 자동으로 처리 해줌으로써 html 코드 하나씩 수정해줄 필요가 없게 됩니다. 

 

 

다음으로는 display: inline를 알아보겠습니다.

html의 inline 태그들은 기능이 있는태그라고 생각하시면 이해 하기 쉽습니다.

또 inline 태그들은 width값이 100%가 아닙니다.

<a></a>

<img />

먼저 a태그는 링크 태그라고 생각하세요. 

a태그를 누르면 구글,네이버, 다음 등으로 연결해준 링크로 이동하게 됩니다.

 

a태그 설명

이처럼 html 태그 고유의 기능이 있으면 모두 inline이라고 보시면 됩니다.

이러한 inline html 태그들은 꾸며주기가 어려운데 이것을 꾸며주기 쉽게해주는것이 inline-block입니다.

inline들을 block인 것처럼 만들어서 잘꾸며지게 해주는 것이라고 생각하면됩니다.

 

 

 

 

마지막으로

block 안에는 inline이 들어갈 수 있지만 inline 안에는 block 이 들어갈 수 없습니다.

 

예를들어

<div>

   <a>

        바로가기

   </a>

</div>

이렇게는 올바른 코드이지만

<a>

   <div>

        바로가기

   </div>

</a>

이것은 올바른 코드가 아닙니다.

 

왜냐하면 맨처음 말했듯이 block 은 width가 100%이고 inline은 width가 100%가 아닙니다.

간단하가 큰거 안에 작은거가 들어갈 수 있지만 작은 것 안에 큰거가 들어갈 수 없기 때문입니다.