HTML 구조와 태그

📝 HTML 구조

• HTML은 Tag와 Tag 사이에 내용(Content)를 추가해서 작성한다.
• Tag에 속성을 추가할 경우 1번째 Tag에 속성(Attribute)과 값(Value)을 추가해야한다.
• 사용방법은 아래의 이미지를 확인
  

🔊 HTML 태그사용 주의점

• HTML코드는 존재하지 않는 태그를 사용한다고 에러를 브라우저에서 띄우지 않는다.
• 에러 없이 그냥 태그 안의 내용(Content)을 브라우저에 띄워준다.
• 아래의 예시로 확인해보자
• 아래처럼 없는 태그인 food 태그 사용 시 웹브라우저에서는 그냥 내용인 chicken만 브라우저에 띄어준다.

<food>chicken</food>

📝 태그 응용방법

• 시작한지 얼마 되지 않았지만 수많은 HTML 태그를 모두 외우는 것은 미친짓인거 같다.
• 자주사용하는 태그만 외워서 사용하고 그 외의 태그는 필요할 때 찾아서 사용하는 것이 바람직해 보인다.
• 태그를 찾을 때에는 MDN이라는 HTML 사이트를 찾아서 사용하는 것이 바람직한거 같다.
  

📖 자주사용하는 태그

• 모든 태그를 모두 외울 수는 없지만 자주 사용하는 태그는 반드시 기억해두자.
• 아래의 표에는 자주 사용하는 태그를 기록해 두었다.

태그	설명
h1 ~ h6	제목을 표현할 때 사용하는 태그 (제목크기순 : h1 ~ h6)
a	웹페이지로 이동하는 링크를 생성하는 태그
div	웹페이지의 박스를 생성하는 태그
span	짧은 글을 입력할 때 사용하는 태그
img	이미지를 추가할 때 사용하는 태그 (셀프클로징 태그
p	긴글의 문장을 작성할 때 사용하는 태그
ol	순서가 있는 리스트를 작성할 때 사용하는 태그
ul	순서가 없는 리스트를 작성할 때 사용하는 태그
li	ol, ul태그 안의 리스트 내용을 작성할 때 사용하는 태그

📌 공부하며 느낀점

• HTML은 웹페이지의 구조를 작성하는 언어이기 때문에 작성 전에 구조를 미리 그림으로 그려보는 것이 좋을 것 같다.
• 공부할 수록 모든 태그를 다 외워야 될 것 같은 위화감이 몰려오지만 필요한 내용만 외우고 나머지는 필요할 때 찾아서 사용해야 된다.
• 모든 태그를 외우는 것은 시간을 땅에 버리는 짓이다....
• HTML은 코딩언어의 느낌보다 디자인 영역이 조금 더 짙어 보인다....