2 LEARNING HTML
2.5 More Tags and Head
<!DOCTYPE html>선언은 html문서가 어떤 버전으로 작성되 었는지 브라우저에게 알려주는 것이다- html태그를 정의하기 전에 가장 먼저 선언되어야만한다
- 웹사이트구조는 두개의 파트로 구성되어있다 head와 body
- head파트에서는 웹사이트의 환경을 설정한다
- body는 사용자가 볼 수 있는 content를 보여준다
2.6 Its All About the Head
- meta태그의 meta는 부가적인정보라는뜻다
- name : 메타의 이름이 무엇인지
- content : 그 무엇에 관한 설명
- charset = 한글 등의 문자를 표시하게 해 주는 tag
- language = 사이트에서 어떤 언어가 사용되는지 알려주는 tag
- 그 외에도 다양한 tag들이 존재함
- html태그
- lang : kr, 검색엔진에 도움을 줌. 사이트에서 사용하는 언어가 무엇인지
- 웹 아이콘 넣는 법 : link 태그안에
- rel="shortcut icon"
- size="16x16 32x32 64x64"
- href="이미지주소" 총 3개의 attributes를 사용한다 (size는 안 쓸때도 있다)
- meta property og:image : 카카오톡에서 링크를 공유할 때 보여지는 이미지, title,
- description 도 있음, fb : 페이스 북, twitter : 트위터 등도 가능
2.7 More Tags
- 구글에 html, css, js 검색할 때 끝에 "mdn" 이라고 붙이면 mdn 사이트가 뜨는데 그 사이트 이용하기
- w3schools는 사용하지 않기
- mdn 검색 후 태그 클릭하면 해당 태그 속성들도 다 뜸
- 태그 암기하지 말고 구글링 후 사용하면 됨
- mark 태그 사용하면 텍스트에 하이라이팅됨
- p 태그로 문장 적고 중간에 mark 태그 사용 가능
- strong 태그는 텍스트 굵게 표현
- audio 태그하면 사이트에 오디오 삽입 가능
- controls 값 주고 src로 경로 입력하면 작동
- enabled는 true와 같은데 이 값을 attribute에 넣어주면 작동되는 걸로 알고 있기
2.8 Form Tags
- form안에서 가장 중요한 것은 input이다
- input은 self-closing 태그다
- input은 1개 혹은 여러개의 type을 가질 수 있다.
- input은 type에 따라 동작 방식이 달라짐
: type="color" 은 색 고를 수 있음
: type="password" 비밀번호 칠 수 있음
: type="submit" 전송 버튼 생김, 지금은 누르면 form이 어디로 보낼지 모르기 때문에 사이트가 새로고침됨
: type의 기본값은 text임
: type="file" 파일 업로드 가능 (type이 file 인 경우에만 사용 가능한 accept라는 속성은 특정 파일의 유형들만 선택 가능하도록 만드는 기능, accept=".jpg, .pdf" 이렇게 작성, 이미지면 다 괜찮으면 "image/" 이렇게 뒤에 / 붙임)- placeholder는 input이 가지는 또다른 attribute
- value라는 속성으로 submit에 적혀지는 글자를 다른 걸로 바꿀 수 있음
- disabled 속성 입력하면 해당 칸이나 버튼 작동 안되게 해줌
- required 속성 입력하면 해당 칸 작성 안하면 안넘어감
- minlength 최소 입력해야하는 글자 수 설정
html 태그를 모두 외울 필요는 없다 그렇지만 html코드 형식에 대해 숙지는 하고 있어야 한다.MDN
2.9 More Tags and ID
- form을 더 괜찮게 만들기 위한 label 태그
- label tag에는 question을 추가 가능
- label은 input과 함께여야 작동됨. 같이 사용하는 방법은 label 태그에는 for이라는 속성을 적고 input 태그에는 id라는 속성을 적는데 두 속성의 값이 동일해야 함. profile photo라는 콘텐츠를 클릭하면 for과 같은 값을 가진 id를 들고있는 input을 작동시킴.
- type 유형
- email, url 같은 값 넣으면 원하는 유형의 정보만 받을 수 있게 해줌
- range는 범위 선택할 수 있음
- date는 날짜 선택, 숫자만 입력 가능
- ID
- body 안에 어떤 태그에도 id 속성 입력 가능. 왜냐하면 id는 unique identifier이기 때문.
- 태그 하나당 하나의 id만 가질 수 있고 그 값은 고유해야 함.
- html은 뼈대. 나중에 css로 특정 스타일을 적용할 수 있는 이유는 id가 있기 때문. 나중에 css에서 "website라는 id를 가진 input을 파란색으로 해줘" 라고 입력해야 함. 따라서 id 값을 다른 태그에서 공유하면 안됨.
2.10 Semantic HTML
- 의미가 있는 태그가 있고 없는 태그가 있다
- 사용하지만 의미는 없는태그
- div tag(division): 분할, 구분, 경계선. 태그가 일자로 써지는걸 원치 않을 때 div를 사용하면 위아래로 배치됨. 구분하고 싶은 태그 영역을 div 태그로 감싸주기. div 태그의 기능은 있지만 document에서는 아무런 값이 없는 box
- 문서를 보기만 해도 그 의미를 짐작할 수 있는 걸 semantic이라고함
- div를 대체 할 수 있는 태그
- header tag: head랑 헷갈리지 않기. div태그와 같은 박스 역할을 하지만 div와는 달리 header 태그는 안에 뭔가 적으면 그냥 읽기만 해도 이게 페이지의 헤더부분인지 바로 알 수 있음.
- main tag: div에 id="main" 이라고 작성해도 되지만, 더 알아보기 쉽게 main 태그를 사용해서 웹사이트의 메인 부분인것 나타냄
- footer tag: 웹사이트의 꼬리말을 나타냄
- semantic tag 모두 div로 대체할 수 있지만 코드 이해하는데 오래걸림. 따라서 코드 짤 때 semantic으로 작성하려고 노력해야한다 그래야 코드를 볼때 이해하기쉽다
2.11 Recap
- html 뼈대
- css 근육
- js 뇌
- content, 구조 파악 html은 태그로 만들어진다
태그는 [태그]로 시작해서 [/태그] 로 끝난다.
태그 사이에 있는 것이 content라고 함
태그 안에 다른 태그를 끼울 수 있다.
attribute가 없는 태그는 좋은 태그가 아니다
attribute값을 사용할때는 항상 " "를 사용해야한다.
어떤 태그나 ID값을 가질 수 있다.
type = input,form
src = img
semantic태그들은 태그 자체만으로 보고 이해 할 수 있다
