노마드코더 코코아톡 클론코딩 #2 수강일지

(개인확인용도/간단정리)

VSC 

• 파일명은 항상 소문자로 작성
• 브라우저는 항상 content를 보여줌
• 단축키 - 태그 앞 뒤 한번에 수정 Ctrl + D(하나씩 선택됨)(전체선택 Ctrl + F2)

 

HTML

   - 브라우저는 tag를 이해 할 수 있기 때문에 tag 사이에 text를 넣어줌

(tag는 아무말이나 마음대로 만들수 있지만 브라우저가 이해 할 수 있는 tag는 한정돼있음)

 

   - attributes(속성) = 태그에 추가하는 정보

(속성값은 "큰따옴표"로 작성)(작은따옴표 X)

 

   - html 문서는 항상 <!DOCTYPE·html> 코드로 시작

(필수는 아니지만 브라우저에게 text 파일이 아니라 html문서 라고 알려주는 역할)

 

   - HTML 문서는 HEAD(웹사이트의 환경 설정), BODY(사용자가 볼 수 있는 내용)로 구성됨
(브라우저 화면상에 보여질 내용들은 body에 있어야 함)

(head 부분의 코드는 화면상에 보이지 않고 사이트의 정보를 브라우저에게 알려주는 역할)

 

 

 

*List tag

<ul> (unordered list) : 순서가 없는 리스트

<ol> (ordered list) : 순서가 있는 리스트

- <li>로 리스트 내용을 적어줌

 

 

*Form tag

<input /> : 무언가를 입력할 수 있는 태그

 

<label>  : input의 라벨

lable은 input과 함께 작동한다. (label이 input을 activate)
lable 태그에 for=""
input 태그에 id="" 에 완전 똑같은 value가 들어가야 함.

 

* Id (고유식별자임, 중복된 id를 사용하면 doesn't work!)
id는 body 안에 어떤 태그에든 넣을 수 있는 attribute임
Tag당 중복되지 않는 하나의 id 만을 가질 수 있다
(Why? CSS가 태그를 지정하여 꾸미기 위해서 ID가 필요하기 때문)

 

 

* More tag

 

태그 검색시 검색어에 mdn 붙여서 검색(태그의 속성까지 한꺼번에 볼 수있음)

 

<a> (anchor)(link를 떠올리면 됨)
attributes

href = http reference라고 함 (a 태그에만 추가 가능)
target = 기본값은 self이고, _blank 입력 시 새 탭에서 링크가 열림

 

<img>

<img />  = 다른 태그와 다르게 /로 닫는 태그가 없다 (자체 닫기 태그이기 때문)
ex) <img src = "......" />

이미지 소스는 인터넷 이미지 주소,

내 컴퓨터 이미지 파일 사용 가능(html과 같은 폴더에 이미지 있어야 함)

다른 폴더일 경우 폴더명/이미지.확장자 ex) img/logo.jpg

 

<meta> (meta는 부가적인 정보라는 뜻)(self-closing tag)

attributes

1.content
2.name

meta charset="utf-8" (항상 꼭 넣어줘야함. > 글자 깨짐 방지)

3. property og:title, og:description, og:image  = content의 요약내용을 SNS에 게시되는데

최적화된 데이터로 가지고 갈 수 있도록 설정하는 용도

ex) og:~~ 네이버 카카오톡
fb:~~ 페이스북
twitter:~~ 트위터

 

 

<div> (division)

box,container의 특성을 가지고 있어서, 기본적으로 옆에 다른 box가 위치할 수 없음

어떤 의미가 없이 작성한 contents를 구분해주는 역할

 

 

* semantic (의미의, 의미론적인) 태그

<header>, <main>, <footer>, <address> 태그 등이 이에 해당함
semantic 태그는 div와 동일한 역할을 하지만,

문서를 보기만 해도 어떤 내용인지 쉽게 파악할 수 있고 검색 엔진도 이를 이해할 수 있다

-> div나 span 태그에 id를 붙여 container를 각각 구분해도 되지만,

그렇게 작성하면 이해하는데도 오래걸리고 효율적인 방법이 아님.

언제나 코드는 누가봐도 빠르고 쉽게 이해할 수 있게 작성하는 것이 더 효율적이니

항상 semantic 태그를 사용하여 문서의 내용을 간결하게 작성하는 습관을 들이자

 ex)

<div id="header"> Hello </div> (X)

<header> Hello </header> (O)       ★항상 간결하게!