정리 내용
HTML 대표적인 tag 종류
<u> ~ </u>: underline의 약자, 밑 줄 생성.<strong> ~ </strong>: 글씨 진하게 강조.<h1> ~ </h1>: header의 약자, 제목을 뜻함. 1~6까지 있으며 1이 크기가 제일 크고 6이 크기가 제일 작음.<br>: break의 약자, 줄바꿈.<p> ~ </p>: paragraph의 약자, 문단을 뜻함. 단락을 만든다.<img src="" width="">: img는 image의 약자, src는 source의 약자, src에 업로드할 사진의 주소를 기입,
크기를 변경하고 싶으면 width 속성에 크기 입력. 속성값인 src와 width의 순서는 상관없음.<ol> ~ </ol>: ordered list의 약자. 순서 있는 목록으로 1,2,3처럼 차례대로 증가하는 번호가 붙는 목록. 목록의 내용은 li로 li의 부모태크.<ul> ~ </ul>: unordered list의 약자. 순서 없는 목록으로 번호 대신 점이나 사각형 등의 도형이 목록 앞에 붙는다. 목록의 내용은 li로 li의 부모태크이다.<li> ~ </li>: list의 약자. 목록을 만드는 태그. 이 태그는 단독으로 쓰이지 않으며 ul or ol 태크 내부에 들어가는 자식 태그이다.<meta>: metadata의 약자. 메타데이터란 데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해주는 데이터를 뜻한다.
해당 문서에 대한 정보를 정의할 때 사용함. 반드시 요소 내부에 위치해야 한다.<title> ~ </title>: 해당 문서의 제목을 정의할 때 사용. 브라우저의 제목이나 페이지 탭의 제목, 검색 결과에서 해당 페이지의 제목으로 나타남.
모든 HTML 문서에는 title 요소가 필요하지만, 두 개 이상의 title 요소를 포함할 순 없다.
html 문서에 title 요소가 존재하지 않으면, 해당 문서는 html 유효성 검사를 통과하지 못한다. 반드시 요소 내부에 위치해야 한다.<head> ~ </head>: 해당 문서에 대한 정보인 메타데이터의 집합을 정의할 때 사용. , <style>, <base>, <link>, <meta>는 head에 포함되어 있어야 한다.
<body> ~ </body>: 해당 문서의 본문으로 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용된다.
html 문서에는 단 하나의 만 존재해야 한다.<html> ~ </html>: HTML문서를 구성하는 기본 단위.<!doctype html>: 해당 선언은 html 문서에서 가장 먼저 선언되어야 한다.
선언된 페이지의 html 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지 않는다.<a> ~ </a>: anchor의 약자. 하이퍼링크를 정의할 때 사용. href 속성에 링크 목적지를 설정.<iframe> ~ </iframe>: lnline frame의 약자. 현재 html문서에 다른 문서를 포함시킬 때 사용. ex) 동영상<div> ~ </div>: division의 약자. 문서에서 특정 영역이나 섹션을 정의할 때 사용.
div요소는 여러 html 요소들을 하나로 묶어주며 css로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너로 사용.
또한, css와 함께 웹 페이지의 레이아웃을 설정하는데도 사용됨.
아무런 의미없이 단지 디자인적 역할로만 쓰고싶을때도 사용됨.<span> ~ </span>: 문서에서 인라인 요소들을 하나로 묶을 때 사용.
span 요소는 그 자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹하하거나 속성값을 공유하는데 유용하게 사용할 수 있다.
div 요소는 블록 타입의 요소인데 반해 span 요소는 인라인 타입의 요소이다.<input>: 사용자로부터 입력을 받을 수 있는 입력 필드. form 요소 내부에서 사용됨.<form> ~ </form>: 사용자로부터 입력을 받을 수 있는 html 입력 폼을 정의할 때 사용.
<button>, <fieldset>, <input>, <label>, <option>, <optgroup>, <select>, <textarea> 들을 포함한다.<nav> ~ </nav>: naviagtion의 약자. 다른 페이지 or 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용. ex) 메뉴, 목차, 인덱스 등<footer> ~ </footer>: 하나의 문서에 여러 개의 footer 요소가 포함될 수 있다.
아래와 같은 정보를 포함한다. (1.저자 정보, 2.저작권 정보 3.연락처 4.사이트맵 5.연관 페이지 6.페이지 맨 위로 가는 top버튼 )<style> ~ </style>: 문서의 스타일 정보를 정의할 때 사용. 스타일 요소는 CSS를 명시하며, html 문서에는 여러 개의 style 요소를 포함할 수 있다.
출처 & 깃허브
생활코딩 web/html&internet
github
