노마드코더 코코아톡 클론코딩 2일차

#2.2 Our First HTML Tag

html의 목적은 브라우저에게 '여기서부터 여기까지가 content야.' 라고 알려주는 것.

이때 "여기서부터 여기까지"를 HTML tag라고 한다.

html에서는 이런 tag를 text로 쓰고, 두 태그 사이에 넣는 내용이 content가 된다.(title, link, image 등..)

<h1>Hello, this is HTML!</h1>

html은 아주 간단하다! 태그를 열고, text를 적고, 태그를 닫아준다.

#2.3 More Tags and Prettier

ul = unordered list

<ul>만 적으면 브라우저는 이게 list인 건 알지만 그 안의 텍스트들이 뭔지는 모른다. 그래서 <li>태그를 작성해준다.

li = listed item

#2.4 Tag Attributes

a = anchor(닻) ; 링크

태그에 추가하는 부가적인 정보: attributes(속성)

h1태그는 속성이 필요없지만, a 태그는 속성이 필요하다. -> href 속성

href = HTTP reference 또는 hyperlink reference ; 이동할 곳을 알려준다.

<a href="http://google.com">Go to google.com</a>

target="_self" : 현재 페이지에서 링크로 이동 [기본값]

target="_blank" : 새로운 페이지를 열어 링크로 이동

img 태그는 self-closing tag이다. <img />

src 속성은 이미지의 주소를 담는다.

<img
  src="https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg"
/>

#2.5 More Tags and Head

같은 폴더 안의 이미지 파일 -> 이미지 이름.확장자 (logo.jpg)

다른 폴더일 경우 -> 폴더/이미지.확장자 (image/logo.jpg) ; 경로 표기법

모든 html 파일은 <!DOCTYPE html>로 시작한다. (필수!!)

두번째로는 <html> 태그를 연다.

웹사이트는 head와 body라는 두 개의 파트로 구성된다.

head 파트에서는 웹사이트의 환경(외부적으로 보이지 않는)을 설정하고, body는 사용자가 볼 수 있는 content를 보여준다.

head 안의 title 태그 : 브라우저의 tab 제목 설정

브라우저 화면상에 보여질 내용들은 body에 있어야 한다.

#2.6 Its All About the Head

meta : 부가적인 요소

meta 태그는 두 개의 속성을 가지고 있다. 1.content 2.name

charset : 브라우저에게 텍스트를 어떻게 그려달라는지 말해준다.

html의 lang 속성 : 구글, 네이버 같은 검색엔진에게 우리 사이트에서 사용되는 언어가 무엇인지 알려준다.<html lang="kr">

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

위의 코드는 아래와 같은 웹사이트의 아이콘 이미지를 설정한다.

og: ~~ 는 웹사이트가 카카오톡에서 공유될 때 사용되는 정보들 (og:title, og:image, 등..)

#2.7 More Tags

mdn을 이용해서 구글 검색할 것.

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

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

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에

developer.mozilla.org

#2.8 Form Tags

form 안에 양식을 만들어줘야함. -> input 태그

<form>
	<input />
</form>

아무 부연설명없이 이렇게만 작성하면 웹사이트에 빈 입력창 하나만 뜬다.

마찬가지로 mdn에서 input의 속성들을 살펴보자.

input에는 type이란 속성이 있는데, 하나 혹은 여러 개의 type(유형)을 가질 수 있다. type에 따라 input의 모양이 완전히 다르게 나타난다.

#2.9 More Tags and IDs

label 태그는 input과 함께여야 작동이 된다.

-> label에는 for 속성을 적어주고, input에는 id 속성을 적어준다. 이때 id와 for에 들어가는 값은 동일해야 한다.

label은 for과 같은 값을 가진 id를 들고있는 input을 작동시켜준다.

*id는 body 안의 어떤 태그에든 넣을 수 있는 속성이다. id는 고유식별자(unique identifier)이므로, 태그당 하나의 id만 가질 수 있고 각 id의 값은 고유해야 한다.

앞서 배웠듯이, html은 뼈대이고, 나중에 css로 디자인을 입힌다. css는 어떤것을 가르키면서 '이 title은 파란색이어야 해.' '이 image는 크기가 작아야해' 라고 말하는데, 이렇게 특정 대상에 스타일을 적용할 수 있는 이유는 id가 존재하기 때문이다.

#2.10 Semantic HTML

div : 컨텐트 분할 요소 - html문서에서 가장 많이 보이는 태그이다.

div = division(구분, 분할) *의미론적으로는 아무 값이 없는 box이다.

이와 같은 기능을 가졌지만(box) 보기만 해도 무슨 의미인지 짐작이 가능한 태그들(semantic 태그)

header
main
footer
span : 짧은 텍스트를 위한 태그
p : 문단을 위한 태그

등등..

사방팔방 div만 사용하지 말고 semantic 태그를 사용해서 html 문서를 이해하기 쉽게 만드는 것이 좋다.

#2.11 Recap

속성 값에는 항상 "큰 따옴표"를 사용할 것!!

어떤 속성은 모든 태그가 사용할 수 있고 일부 속성은 특정 태그만 사용 가능하다.

id 속성은 모든 태그가 가질 수 있다.

2.10에서 배웠던 semantic 태그들은 코드 자체에 의미가 부여된 것이다. (전부 container)모두 다 div 태그로 대체할 수 있지만 코드만 보고 어떤 의미인지 파악하기 위해 semantic 태그를 사용한다.

🐶🦒