HTML intermediate (1)

🚀div 태그와 span 태그의 차이

• div
  div태그는 블럭 레벨로서 태그 자체로 영역을 차지한다. div 안에 또 div를 넣는 작업을 할 수 있지만 이것은 속 안에 들어가는게 아니라 컨텐츠를 뒷배경으로 쓰고 겹겹이 쌓인다고 생각하면 된다. 예를들어 div 태그에 텍스트가 존재하면 그 텍스트 위에 쌓이지 않고 그밑으로 쌓인다.
• span
  span태그는 div와 달리 Inline elements로 담고 있는 컨텐츠의 양에 따라 크기가 달라진다. 블럭레벨이 아니라서 옆에 다른 컨텐츠가 올 수 있다.

🚀 semantic 태그

: div태그와 기능은 다를 바가 없고 이름을 가짐으로서 그 영역이 어떤 부분인지, 어떤 위치에 있는지, 어떤 컨텐츠를 담고 있는지 등등을 알아보기 쉽게 끔 만들어진 태그들이다.

• header: 윗부분에 위치하며 주제,제목등이 있는곳을 알아볼 수 있다.
• nav: 메뉴나 목차 등을 알아볼 수 있다.
• article: 각기 독립적이고 홀로 설 수 있는 내용을 담는다
• aside: 주요한 내용이 아닌 부차적인 내용을 담는다.
• footer: 문서에 대한 꼬릿말 부분으로 문서에 대한 정보를 담는다.(ex: 출처, 글쓴이 등등)

🚀 Head 태그

:html의 head 부분에 들어가는 태그. body영역의 태그들이 아니라서 페이지에 뜨지 않는다.

• meta: 브라우저가 출력하는 문서의 기능, 컨텐츠, 환경, 스타일링, 자바스크립트 등을 설정.
  밑에는 meta태그의 속성들이다.
  • charset 속성 : 문자 코드의 종류 설정 (UTF-8을 설정하면 모든 언어의 문자를 인코딩 가능
  • http-equiv 속성 : 문서를 전송받아 해석하는 브라우저의 멀티미디어 형식을 설정 (브라우저에 전송되었을 때만 의미를 가짐)
  • name="viewport" 속성 : 문서의 출력 형태를 설정
  • content="width=device-width, initial-scale=1.0" : 현재 사용하는 기기의 출력 배율을 1을 사용
  • name="keywords" : 문서가 포함하고 있는 컨텐츠들의 대표 키워드 검색엔진에 노출되기 위해 사용
  • name="author" : 문서 작성자
  • name="discription" : 검색 결과에 표시되는 문자들을 지정

🚀 iframe 태그

:iframe 태그를 사용하여 html문서에 다른 웹페이지나 유튜브 영상 같은걸 넣을 수 있다.