노마드 코더 코코아톡 클론코딩 2일차
노마드 코더 코코아톡 클론코딩 2일차
잡담
어제 왜 코드를 지워버려도 웹 사이트에 반영이 되는 지에 대한 답변을 받았는데 브라우저가 아이콘을 기억해서 clear 하는 데 시간이 걸린다고 한다.
지금도 계속 아이콘이 남아 있는 걸 보면 브라우저가 계속 기억하고 있나 보다. 중요한 내용은 아닌 거 같으니 이 정도로 하는 걸로.
정리
HTML
- 다른 태그들 a. 검색할 때 mdn 키워드를 포함하는 걸 추천한다. w3 사이트는 권장하지 않는다.
- Form tags a. input 태그: 입력창, type 속성에 따라 기능이 달라진다. ex) text, password, file, url, email, range..
- Semantic HTML a. sementic: 문서를 보기만해도 그 의미를 짐작할 수 있다.
b. abbr: ex) My name is NSA p태그 안에 이런 식으로 작성하면 NSA에 마우스를 가져다댔을 때 Nicolas라는 title(약칭의 의미)이 나타남.약칭은 title에, 약어는 content에 적는다.
c. audio 태그: controls(이게 있어야 실행된다), autoplay 속성 등과 함께 사용.
d. mark 태그: 하이라이트 표시
e. sup: 글자가 위로 나옴, sub:글자가 아래로 나옴.
f. 속성에 enabled 이나 true을 적으면 작동된다는 의미.
* 위 태그들을 외우려 하지 말고, 검색하는 습관을 가질 것
ㄱ. submit 속성(제출): value 속성으로 내용 수정.
ㄴ. placeholder 속성
ㄷ. required 속성: 검증
ㄹ: minlength 속성: 최소 글자
ㅁ. accept 속성: file type 에서 원하는 타입의 파일만 첨부가능.
b. 작성하는 방법만 알면 나머진 검색만 하면 된다. 태그열고 > 속성 > content > 태그닫고
c. label 태그: form에 question을 추가. input과 함께 작동한다. label에는 for 속성을, input에는 id 속성을 적고 두 값을 일치시키면, label을 누르면 label과 값이 같은 input을 실행시킨다. 속성에 공백 포함하면 안된다.
d. id 속성: body 안에 어떤 태그에든 넣을 수 있다.
* 태그 하나당 하나의 id만을 가질 수 있다(고유해야 하기 때문에). CSS의 작업이 가능한 이유도 id가 있기 때문이다.
b. 의미가 없는 태그(non-sementic): div(박스처럼 생각),span(짧은 텍스트). 박스는 서로 붙어있을 수 없다.
c. header 태그: 동일한 박스 기능. 코드 자체로 의미가 부여되어 있다. 그냥 보기만 해도 header라는 걸 이해할 수 있다.
d. main 태그, footer(꼬릿말) > 이런 태그들은 div 태그에 id를 붙혀줘도 결과는 같지만, 코드 자체를 이해하는데 문제가 생긴다. sementic으로 작성하도록 노력하기.
요약
- 태그를 외우려 하지 말고 매커니즘을 기억하자.
- input 태그의 type 속성에 따라 다양한 유형의 값을 입력하고 컨트롤할 수 있다. label 태그는 input 태그와 함께 사용한다. 바로가기 키와 비슷하다. label을 사용하려면 input의 id와 label의 for 값이 동일해야 한다.
- 태그 하나당 하나의 id만을 가진다.
- 태그를 작성할 때 의미가 없는 div 같은 태그의 사용을 피하고, 보기만 해도 의미를 짐작할 수 있는 sementic 태그를 사용하는 습관을 가지자.