기초코딩- HTML의 기초(more html tag, 태그찾는방법)

저번 글에 이어서 계속해서

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

저번 글에서는 

head영역의 중요성과

meta 태그를 다는 이유에

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

 

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

혹시 모르시는 분들은 

밑에 글을 참고해주세요.

tm-csc.tistory.com/1145

기초코딩- HTML의 기초 (meta tag, head영역) - 2편

그럼 이번 글에서는

다른 tag들에 관해

알려드리려고 하는데요.

 

html에 쓰이는 태그는

얼마나 있을까요?

 

그리고 어떻게 찾을 수 있을까요?

 

방법은 바로 구글에서

검색하면 가능합니다.

 

 

제가 직접 알려드리기도 하지만

너무 많은 태그를 일일이 

알려드리기보다는 코딩은 

필요한 태그를 하나씩 찾는

과정도 꽤 중요한 만큼 직접

한번 찾아보시는 것도 추천드려요.

 

그럼 어떻게 구글에서

찾을 수 있을까요

 

 

이렇게 html tags mdn

이라고 검색해주세요.

 

가장 상단에 나오는 이 사이트는

firefox라는 브라우저를 만드는 

회사에서 제공하는 웹사이트 관한

문서를 정리한 사이트이죠.

 

그래서 수없이 많은 

tag들을 찾아볼 수 있죠.

 

출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

문제는 여기서 무엇을 써야 하는지

어디에 어떻게 적용해야 하는지

구분이 안 되는 실 텐데요.

 

천천히 보시다 보면 제가 알려드린

태그들이 꽤 많이 보이실 거예요.

 

또 해당 태그가 어떻게 

작동하는지 어떤 모습으로

보일지 궁금하다면 

해당 태그를 눌러보시면 되는데요.

 

출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/br

이렇게 어떻게 쓰이는지

내가 수정해서 확인해 볼 수도 있고

다시 reset 버튼을 눌러

틀렸을 때 확인할 수도 있죠.

 

이렇게 하나씩 필요한 태그에

익숙해지시면 돼요.

 

<button class="favorite styled"
        type="button">
    Add to favorites
</button>

 

이렇게 버튼에 관한 html도

확인해볼 수도 있고요.

 

또 직접 나의 VSC에 적어서

확인해보고 직접 수정해본다면

더욱더 익숙해지고 내 것이 

될 거라고 생각하고요.

 

하지만 html태그만으로

디자인적인 요소까지 

해결하려고 생각한다면

CSS를 배우고 나서 다시

생각해보셨으면 좋겠고요.

 

처음 제가 알려드린 것처럼

HTML은 웹사이트의 뼈대,

또는 구조라는 거 잊지 마시고

내가 만들 웹사이트의 형태를

잡을 수 있는 태그 위주로 

공부하셨으면 좋겠습니다.

 

여기까지 궁금하신 점

있으시면 댓글에 남겨주시고요.

 

공감과 구독도 부탁드릴게요~

 

아!  위의 사이트의 주소는

밑에 남겨놓을게요~

https://developer.mozilla.org/ko/

MDN Web Docs