본문 바로가기

Programming/함께 하는 기초코딩

기초코딩- HTML의 기초(총 정리)

저번 글에 이어서 계속해서

HTML에 대해 알려 드리도록 할게요


저번 글에서는 

div와 span

의미는 없지만

꼭 필요한 태그

대해서 설명해드렸는데요.

 

만약 기억이 잘 나지 않으시거나

혹시 모르시는 분들은 

밑에 글을 참고해주세요.

tm-csc.tistory.com/1153

 

기초코딩- HTML의 기초(의미없지만 필요한 태그 div, span)

저번 글에 이어서 계속해서 HTML에 대해 알려 드리도록 할게요 저번 글에서는 attibute 활용에 대해서 설명해드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해�

tm-csc.tistory.com

이번 글에는 뒤죽박죽

섞여있을 듯한 HTML에

대해 다시 한번 총정리하는

시간을 가지도록 할게요.

 

기본적으로 HTML은 

홈페이지를 구성하는 

뼈대라는 사실은 잊지 마세요.

 

HTML은 일반적으로 

모두 다 태그로 이루어져 있어요.

 

 

원하는 태그의 이름을

아무거나 지어도 되지만

이러면 브라우저는 이해하지 못하고

어떠한 기능도 가지지 못하죠.

 

그렇기에 제가 저번에 알려드린

HTML tags MDN으로 검색하여

많은 태그들을 확인할 수 있는데요.

 

 

우선 태그를 적는 규칙을

알아보면

 

< 를 가장 먼저 적어주고

원하는 태그를 적은 뒤 

>로 닫아주세요.

 

그다음 </사용한 태그>

이렇게 닫아주는 형태까지

적어줘야 태그가 적용되죠.

 

물론 vsc에서 사용한다면

자동으로 나오기는 하지만요.

 

그리고 원하는 내용을 

태그 사이에 적어줌으로써

원하는 형태를 홈페이지에

나타나게 할 수 있죠.

 

또 당연히 태그 사이에 

내용을 적을 때 다른 태그를

사용해도 되죠.

 

 

attribute는 태그에

강력한 효과를 줍니다.

 

속성을 변경해 주는 것이기에

비밀번호가 보이는 창이기도

문자를 입력하는 창이기도 

체크박스가 되기도

같은 태그 안에서도

여려 형태를 보여주죠.

 

 

하지만 그렇다고 해서 

attribute가 없는 또는

기능이 없는 의미가 없는

태그가 불필요한 거 아닌데요.

 

상자와 같은 divspan

같은 태그들은 html 구조적인

역할을 하게 되고 

상자 안의 상자로 앞으로 

태그를 작성하게 되므로 

꼭 알아야 하는 태그이죠.

 

또 모든 태그에는 id라는 

고유의 이름을 정해줄 수 있죠.

 

이는 나중에 수많은 div와

span 그리고 반복되는 

같은 태그들을 구분하기 

위해 사용하며 css를 사용할 때

무엇보다 편하게 지목하여 

사용할 수 있습니다.

 

당연히 수많은 태그들은 

외우 필요가 없고 어떤 태그들이

있는지 MDN사이트에 들어가

하나씩 인지만 하셔도 충분히

나중에 사용할 때 검색하여 

사용하시면 됩니다.

 

 

물론 자세하게 HTML에 대해 

알고 싶다면 제 글을 하나하나 

보는 게 도움이 되겠지만

기본적인 개념만 알고 싶다면

이 번에 총정리 글만 봐도 

이해가 가실 거라고 생각합니다.

 

여기까지 궁금한 점이 있으시다면

댓글로 작성해주세요.

 

그리고 공감 구독도 부탁드립니다.