HTML 개념 정리 (feat. 노마드코더 코코아톡 클론코딩)

HTML, CSS, Javascript

 

-html : markup(content) language

브라우저에게 웹사이트의 content 구조가 어떤지 설명해줌

뼈대

​

-css : Cascading Style Sheets

html과 함께 사용함

브라우저에게 웹사이트가 어떻게 보여야 하는지 알려줌

link들이 어떻게 보이는지 알려줌

근육

​

-javascript : web programming laugnage

웹사이트를 동적 상호작용하게 해줌

뇌

​

css와 html은 따로 하나만 사용하지 않고 같이 사용한다.

 

 

---

HTML

​

-리스트

1. ordered list - ol

2. unordered list- ul

​

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

​

-href : http (or hyperlink) reference. 이동할 곳을 알려줌

ex) <a href="http://www.google.com">go to google</a>

anchor는 href라는 속성을 가짐

href는 anchor 태그에만 추가할 수 있음

​

-target 속성: 기본값은 "_self"

target="_blank" 다른 탭에서 링크 창이 열린다.

​

-img 태그: 닫아주는 태그가 없는 selt closing tag.

이미지 태그 사이에 컨텐츠가 없음. 이미지의 속성 src가 img의 컨텐츠이다.

<img src =" " />

​

-meta(부가적인 정보) 태그 : 구글 검색에서 보여지는 description.

title과 description은 검색에 중요한 비중을 가짐.

meta 태그의 두가지 속성 -> content, name

<meta charset="utf-8"> -> 브라우저에게 text를 어떻게 그려달라는지 말해줌

이 메타태그가 없으면 글자가 깨져보일 수 있음

​

-html lang : 검색엔진들에게 도음을 줌. 우리 사이트에서 사용되는 언어가 무엇인지 말해줌

 

-head 태그 : 보이지 않는 사이트 설정들을 바꿔줌

​

*태그와 속성은 모두 외우지 말고 mdn을 찾아보자.

​

form 태그>

input 태그 : 가장 중요한 태그. self-closing tag

형식 -> <tagname attrname="atrvalue"></tagname>

​

-label 태그

label은 input과 함께 작동

label 태그에 for 속성

input 태그에 id 속성

id와 for 에 들어가는 값은 같아야 한다.

​

*id란? body 안에 어떤 태그든 넣을 수 있는 attribute

scripting이나 css를 식별하려는 목적을 가짐

고유식별자. element당 하나의 id만 가질 수 있다.

css가 어떤걸 가르키면서 속성을 지정하는건 id 가 있기 때문에 가능

​

-div(division) 태그 [box]

위아래로 위치시킴

none sementic tag. 의미가 없는 태그임

​

-sementic : 문서를 보기만 해도 그 의미를 짐작할 수 있음

header (head는 보이지 않는 태그<->header는 body안에 포함된 태그. div를 대체할 수 있음)

main, footer, aside, span(short text), p(문단 태그)

​

*span, div태그는 의미가 없고 header, main, address 등 의미를 가진 시멘틱 태그를 되도록이면 사용하도록 하자.

​

​