-
Unit4 - [HTML] 기초공부 2022. 7. 4. 15:14반응형
HTML
:HyperTextMarkup Language의 약자
:웹 페이지의 틀을 만드는 마크업 언어
사용방법
:HTML은 tag들의 집합
:Tag 부등호<>로 묶인 HTML 의 기본구성요소
:html확장자 사용
트리구조
<html문서시작> //이 문서가 HTML문서임을 명시
<html> //html시작 태그로, 문서 전체의 틀을 구성
<head> //head 태그는 문서의 메타데이터를 선언
<title> : Page title //문서의 제목, 브라우저의 탭에 보여짐
</head> //</태그이름> 은 해당 태그가 끝났음을 의미
<body> //body태그는 문서의 내용을 담는 곳
<h1>: Hello world //heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
<div>:Contents here //content division을 의미하며, 줄바꿈됨
<span> : Here too! //줄바꿈이 없는 content 컨테이너
</div> //div태그가 끝났음을 의미
</body> //body태그가 끝났음을 의미
</html> //html태그가 끝났음을 의미
Self closing tag
태그 내부에 내용이 없다면, <tag></tag>와 같이 표현된 경우 </tag> 와 같이 표현 가능
<div> : division
한줄을 차지한다
<span>: span
컨텐츠 공간만큼 차지합니다
<img>: image
<img src=“ ”> 이미지는 닫는 태그가 없다
<a>: link 삽입
http://www.naver.com”>네이버
<ul>&<li>: undered list & list item <ol>:번호매겨진리스트
<input>: input(text(사용자입력 할 수 있는 창)+password(비밀번호 *****) , radio(하나만 선택할 수 있는), checkbox(여러개체크가능)) 다양한 입력폼 생성
<textarea>: multi-line text input 텍스트 입력할 수 있는 칸 줄바꿈도 가능
<button>: button 누를수있는버튼생성
<h1> 은 시맨틱 요소입니다. "이 페이지에서 최상위 제목" 인 텍스트를 감싸는 역할(또는 의미)를 나타냅니다.<h1> 은 시맨틱 요소입니다. "이 페이지에서 최상위 제목" 인 텍스트를 감싸는 역할(또는 의미)를 나타냅니다.
- 검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다 (SEO 참조).
- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.
- 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.
- 개발자에게 태그 안에 채워질 데이터 유형을 제안합니다
- 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.
- <article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
- <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
- <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
- <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
- <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
- <main> : 문서의 주된 콘텐츠를 표시합니다.
id와 class 를 목적에 맞게 사용하기
Id: 고유(unique)한 이름을 붙일때
Class: 반복되는 영역을 유형별로 분류할때(반복되는 항목은 class로 지정한다. 같은 clss값을 지정해줌으로서, 동일한 유형임을 알 수 있다.
반응형'공부' 카테고리의 다른 글
React Redux (0) 2022.07.06 [CSS] 기초 (0) 2022.07.05 [JavaScript] 기초 제어문2 (0) 2022.07.01 [JavaScript] 기초 (0) 2022.06.30 22.04.25 Learn how to learn (0) 2022.06.29