공부

Unit4 - [HTML] 기초

Choi___ 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값을 지정해줌으로서, 동일한 유형임을 알 수 있다.