반응형
Notice
Recent Posts
Recent Comments
Link
관리 메뉴

짧은코딩

HTML 본문

노마드 코더/코코아톡 클론코딩

HTML

5_hyun 2022. 5. 31. 18:18
반응형

-태그 참고 사이트

https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다.

developer.mozilla.org

 

-meta

구글에 넷플릭스를 검색하면 이렇게 나온다. 구글이 사이트에서 titel과 description을 가져오는 것이다.

meta는 부가적인 정보라는 뜻이다. meta 태그는 두개의 attribute를 갖고 있다. content, name을 가지고 있다.

 

<meta charset="UTF-8">

UTF-8이 없으면 사이트 글자가 깨져보일 것이다.

 

-lang

<html lang="en">

이것을 넣는 이유는 구글, 네이버 같은 검색 엔진들에 도움을 주기 위해서이다. 사이트에서 주로 사용되는 언어가 한국어인지 영어인지 검색엔진에게 알려주는 것이다. 한국어는 kr이다.

그리고 구글에게 우리 사이트의 meta의 decription이 무엇인지 등을 검색 엔진에 정리해서 알려준다.

 

-link

 <link
    rel="shortcut icon"
    sizes="16x16 32x32 64x64"
    href="https://nomadcoders.co/m.png"
  />

이런식으로 노마드 코더님의 사이트에서 이미지를 가져오면

이렇게 로고가 바뀐다.

 

-label

label은 하나로 묶어준다.

그리고 label에서 for은 id와 같은 역할이다.

만약 type="email"로 하면 이메일 형식만 입력 받는다.

 

-사소하지만 중요한 규칙

1. html의 attribute 값에는 항상 큰 따옴표를 사용한다.

2. semantic 태그

의미가 있는 태그이다.

항상 semantic 태그로 코딩해야 쉽게 이해 가능하다.

div 대신 main, footer, aside, address 등등 의미가 있는 box를 되도록 쓰는 것이 좋다.

 

반응형

'노마드 코더 > 코코아톡 클론코딩' 카테고리의 다른 글

Form의 속성  (1) 2022.06.28
클론 코딩 시작 and login 페이지  (0) 2022.06.24
GIT and GITHUB  (0) 2022.06.23
ADVANCED CSS  (0) 2022.06.21
CSS  (0) 2022.06.12
Comments