HTML5의 태그 개수가 50개도 넘다 보니 다 외우는 것이 어렵다.
따라서 기능적인 관점에서 태그를 분류하고 이 분류를 기억하는 것이 기억에 용이할 것이다.
우선 익숙해질 때까지 태그가 어떤 카테고리에 들어갔는지 계속 보다보면 효율적일 것이다.
1. 레이아웃 관련 태그 = <div>
웹사이트의 화면에 컨텐츠를 넣기 위해선 레이아웃을 정하는 것이 선행된다. 상단 메뉴바, 중간 컨텐츠영역, 하단부와 같이 레이아웃을 결정하는 것이 선행되어야 한다.
다른 블로그나 책에서 섹션 태그라고 하면서 여러 태그를 언급하는데 내 생각에는 div면 충분한 것 같다. 왜냐면 각 div 별로 class를 header, main, footer로 나누는 것이 header, section, footer를 쓰는 것과 의미적으로 똑같기 때문이다. 처음 공부할 때에는 "섹션 구분은 div를 사용한다"를 기준으로 진행하면 될 것이다.
다만 웹 접근성 측면에서 <div class="header">와 <header> 차이점이 있는지 확인해보아야 할 것이다.
2. 해당 html 파일 설정 태그 = <head> 영역에 들어가는 태그들
html 파일을 작성하였을 때 화면에 표현되는 것이 아닌 설정에 해당되는 태그이다. html 상에서는 <head> ~ </head>에서 ~ 부분에 해당되는 부분이다. 인코딩 설정, 디자인 설정, 페이지 제목 등이며 자세한 태그 설명은 이후 글에서 설명하도록 한다.
3.문단 태그 = <p>
html5 파일은 문서를 작성하는 것이다. 따라서, 문단을 구분해야 한다. 즉, 국어시간에 배운 단락의 단위 별로 p 태그를 사용해주면 된다.
4.문단 작성 중 사용하는 태그들
한 문단을 작성할 때 사용하는 태그는 줄바꿈, 글자 굵게, 글자 기울이기, 사진 첨부, 표 사용 등이 있다. 1, 2, 3을 제외한 태그들을 의미한다.
위와 같은 방식으로 html tag를 구분하게 되면 html 파일 작성시 굉장히 심플해진다. 첫번째로 레이아웃을 div로 구분하여 영역을 구분한다. 해당 영역에 두 문단 이상이 들어갈 경우 p태그로 문단을 구분한다. 한 문 단을 작성할 때 필요한 표, 목록, 첨부가 필요하면 해당 태그를 검색해서 사용하면 된다. 기존의 책이나 수업들을 대부분 여러 가지 카테고리로 태그를 구분해주는데 오히려 더 헷갈리고 기억도 나지 않는다. 단순한 방식으로 기억하는 것이 우리의 머리를 가볍게 손은 빠르게 해줄 수 있다.
글 작성에 참고한 사이트들 링크:
https://dasima.xyz/html-tag-classification/
HTML 태그 종류 세 가지 분류 및 간단한 예제 - SOFT HIVE
HTML 태그는 어떤 종류가 있을까요? 기능에 따라서는 제목, 단락, 목차, 표, 이미지, 링크 태그 등이 있습니다. 블록 인라인 요소로 차지하는 영역에 따른 분류가 가능합니다. 마지막으로 열고 닫는 태그 또는 빈 태그로 구분이 가능합니다.
dasima.xyz
https://www.w3schools.com/tags/ref_byfunc.asp
HTML Reference
www.w3schools.com
https://www.tutorialrepublic.com/html-reference/html5-tags.php
List of HTML5 Tags/Elements - Tutorial Republic
HTML5 Tags/Elements The following section contains a brief overview of HTML5 Tags. HTML5 TagsOrder by Alphabet
www.tutorialrepublic.com
https://durablemylife.tistory.com/31?category=180340
'웹(web) > 프론트엔드-html' 카테고리의 다른 글
| HTML form, input (0) | 2020.05.22 |
|---|---|
| HTML z-index with background (0) | 2020.05.20 |
| HTML Table (0) | 2020.05.13 |
| html <img> vs css {background-image}(img태그와 백그라운드 이미지 비교) (0) | 2020.05.05 |
| html guide line(가이드 라인) (0) | 2020.04.28 |
