HTML

태그와 용어 정리

DAY1
HTML: HIPER TEXT MARKUP LANGUAGE

• vscode에 index.html 파일을 만들고 html:5를 치게 되면 정해진 서식으로 완성해줌
  h 태그 : 제목
  1~6으로 갈수록 글씨 작아짐
  p 태그 : 문단 나눠주는 태그
  br 태그 : enter를 대신 쳐줌, 줄바꿈
  안 쓰면 줄이 언제나 연결됨, 아무리 space bar를 눌러도 html에서는 스페이스바 한번
  그렇다고 문단과 문단 사이에 공간을 많이 두고 싶어도 br 많이 쓰는 것은 안 좋은 코드
  p 태그를 쓰고 css를 사용하여 여백을 더 만드는게 좋은 코드
  blockquote, q태그 : 인용블록 요소, 인라인 인용문 요소
  텍스트가 김 텍스트가 짧음
  ""게 생김
  p태그에는 blockquote를 쓰진 못한다. p 태그 안에는 q태그만!!
  공통점 cite 속성 : 인용문의 출처나 문서 url을 가리킬 용도
  pre 태그 : 서식이 정해져 있는 것을 쓰고 싶을 때
  figure 태그 : 독립적인 컨텐츠를 표현함
  figurecaption은 figure 안에 넣어주기!
  hr 태그 : 수평선, br처럼 단독으로 사용
  abbr 태그 : 약어를 사용 시에, title사용 필수, 점선
  address 태그 : 주소라는 의미를 닮고 있음, 기울임체로 나옴
  cite : 인용의 출처, q나 blockquote
  bdo : 글을 오른쪽에서 왼쪽으로 씀.
  b 태그 : 굵은 글씨 요소, 제품명이나 이름, 특정부분 강조, 전체에 쓰면 안됨
  strong 태그 : 중요한 텍스트를 굵은 글씨, 컨텐츠의 중요도로 쓰임새 구분, 긴급한 느낌
  *b나 strong이나 굵은 글씨! but 중요도의 차이, css로 전체 글씨 꾸며줘야함
  i 태그 : 기울임꼴, 주위와 구분해야 하는, 기술용어, 외국어 구절, 등장인물 등
  em 태그 : 기울임꼴, 강세 요소
• 둘의 태그는 완전히 다름
  mark 태그 : 검색한 부분을 다른 색깔로(형광펜 느낌), 정말 의미나 검색 목적이 아니면 사용x
  smell 태그 : 글자를 작게 만들어줌
  sub 태그 : 아래 첨자 요소, 화학식 요소 O2(산소 쓸때)
  sup 태그 : 위 첨자 요소(지수 법칙)
  u태그 : 철자가 틀렸을 때
  s태그
  del : 제거된 텍스트의 범위를 나타냄 (cite 사용 가능, datetime)
  ins : 추가된 텍스트의 범위를 나타냄
  code : 인라인 코드 요소 한줄 한줄마다 바꿔줌
  kbd : 키보드 나타내기(키보드 입력 요소)
  a 태그 : 앵커 요소, 하이퍼링크를 만드는 요소 (사용 빈도 많고 중요함)
  href는 이동 목적지로써 a태그를 쓸때는 꼭꼭 명시해줘야함
  : http, https가 아니어도 괜찮다
  : send email
  : (xxx) xxxx
  : 뒤로 가기 가능
  절대 경로 : 현재 위치 관계없이 언제나 url으로 보내줌
  상대 경로 : href="another/a.html 현재 위치에 관계 있도록 작성
  target : 그 목적지를 어디에 띄울 건지에 대해
  새 탭에서 열림, 새탭이니까 뒤로가기 불가능
  send email
  . 현재 파일이 위치한 경로
  .. 이전 경로 / 구분
  엔티티 : html의 특수 문자
  스페이스나 꺽쇄 같은 것을 코드에 있는 그대로 사용하고 싶을때 사용하는 것
  < : 보다 작은 < 로 나타남
  > : 보다 큰 > 나타남
  " : "
  ' : '
  & : &
    : 스페이스바(공간) , 많이 쓰면 개수로 나타남
  div 태그 : 분할하거나 묶을때 사용, 아무것도 표현x, 의미가 없을 때에만 사용, 블록요소
  공통적인 영역의 레이아웃을 나누는 것
  span 태그 : 인라인 컨네이터, 구문 컨텐츠, 텍스트 꾸밀때, 가로폭, 나타내지 않음
  시멘틱 웹
  : 의미의 의미론적인
  : 요소의 의미를 고려하여 구조를 설계하고 코드를 작성한다.
  의미론적인 마크업을 사용하면
  페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주
  (웹 접근성)의미가 없는 끊임없는 div나 span을 탐색하는 것보다, 의미있는 코드 블록을 찾음
  시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색할 의미론적 마크업을 푯말로 사용 가능
  개발자에게 태그 안에 채워질 테이터 유형을 제안
  의미있는 이름짓기는 적절한 사용자 정의 요소/ 구성 요소의 이름짓기를 반영
  header 태그: 소개 및 탐색에 도움을 줌, 제목, 로고, 검색 폼, 작성자 이름 등의 요소 대부분 동일하게 보임
  헤더는 하나만!
  footer 태그: 페이지 정보나 연관된 사이트, 제작 문의, 저작권 등이 관련된 문구가 있는 것
  푸터도 하나만!
  nav 태그 : 네비게이션바 태그, 링크를 클릭하면 이동할 수 있게끔
  현재 페이지 내 또는 다른 페이지로의 링크를 보여주는 구획을 보여줌
  푸터에 들어가는 헤더에 들어가는지 구분
  aside 태그 : 요소는 문서의 주요내용과 간접적으로만 연관된 부분(사이드바,콜아웃박스)
  없어도 크게 문제x, 추가적인 정보, 부가적인 정보
  보통 css와 함께 사용
  main 태그 : body의 단 한개의 태그로 사용, 더 쓰려면 히든으로 안 보이게 해야함
  주요 컨텐츠
  인터넷 익스플로에서는 지원x
  c언어나 python 메인과 동일
  article 태그 : 하나의 웹페이지 안에 여러개 사용가능
  단독, 독립적으로 구분해 배포나 재사용 가능 구획
  게시판, 블로그 글, 매거진, 뉴스 기사
  독립된 여러개 존재 가능
  하나 안에 여러개 존재 가능
  section 태그 : 일반 구획 요소 article이랑 비슷하면서도 다름
  article이 될 수 없으면 사용
  article 안에 사용 가능 section 안에 article 사용 가능
  div로는 사용 안 하는 이유는 대부분 스타일이나 레이아웃을 위해
  문맥적으로 달라지는 부분
  단독으로 사용 가능하면 article로 사용
  정렬 목록 ordered list(
  )
  type 속성

  	<ol type="A">
  	<ol type="I">
  start속성 시작 숫자, 시작 영어
  value: 강제적으로 그 숫자부터 시작하세요
  reversed : 거꾸로 역전 시킴

  비정렬 목록 unordered list(
  )
  아이템 나열 형태
  별도 특성 x
  비정렬과 정렬 중첩 가능
  li 태그 : list item
  정의 목록 : dl태그 자식 태그- dt(term), dd(description)
  용어 정의하거나 설명
  table 태그 : 행렬의 모양으로 나타냄
  img 태그
  src특성 : 외부의 url이나 파일의 경로, 필수다.
  절대 경로 :이미지 주소 복사하여 사용
  상대 경로 : 현재 위치에서 불러옴
  alt특성 : alternative text
  설명을 입력해주는 텍스트, 접근성 차원에서 유용함
  이미지가 깨졌을 때 설명해줌
  width : 숫자가 속성값 가로길이(px), 하나만 줄이면 height도 비율에 맞춰 늘어남 세로길이도 설정해주면 원하는 크기로 조절 가능
  height : 숫자가 속성값 세로길이(px)
  -------레스터 이미지 : 확대하면 계단형으로 깨짐, 모눈종이로 색을 칠한 느낌, 일반적인 사진--
  JPEG : 정지 이미지, 압축률이 좋음. 용량을 줄일 수가 있음
  PNG : 정지이미지, 투명도 적용 가능, JPEG보다 선호
  GIF : 여러장의 이미지로 이루어진 애니메이션, 화질이 떨어짐
  WEBP : 압축률이 좋고 위에 3개보다 화질이 좋음 / 지원 브라우저가 제한적임
  -------벡터이미지 : 확대해도 안 깨짐, 점과 점을 잇는 느낌--------------
  SVG : 다양한 크기로 정확하게 그려야하는 아이콘, 다이어그램에 사용
  srcset : 여러개의 이미지 경로(반응형 이미지를 만들기 위해)(view port)
  픽셀 너비서술자, 픽셀 밀도 서술자
  sizes : 내 화면에 맞는 픽셀을 정해주는 것
  video 태그
  src특성 존재 경로 적어야함
  img와 다르게 선택사항
  sound가 있으면 autopaly 사용 안됨
  mute로 음소거 하여 autoplay 사용됨
  poster 속성은 썸네일, 이미지 지정해주면 된다
  audio 태그 : video와 동일한 태그
  한개 이상의 오디오를 사용 가능
  canvas 태그 : 자바스크립트와 함께 사용하여 그림을 그림
  iframe 태그 : 인라인 요소, 지도 삽입
  form 요소 : 사용자에게 정보 입력 장치를 만들어줌, 사용자가 정보를 입력하면 다시 서버에 돌려줌
  input-label label은 id를 보고 찾는다 id는 겹치면 안됨
  fieldset 태그 : legend가 첫 자식이어야함
  disabled 사용 불가하게 만드는 속성 <> 안에 넣어서 적는 것

    ```

  범례1
  음식 이름 :
  색깔 :
  범례2
  음식 이름 :
  색깔 :
  제출 ``` option : datalist나 select의 후보군을 적는 것 select는 목록에 있는 것들을 고를 수 있는 것, label만 존재함. input은 없어도 됨( 자체적으로 input 기능을 함) selected : 화면에 띄워놓게 "" 빈 값으로 두면 값이 안 들어왔다고 판단함 optgroup : 그룹을 라벨링할때 사용 textarea : 댓글이나 리뷰 등의 쓰이는 textbox rows="2" : 행개수를 늘리기 cols="2" : 열개수 늘리기 placeholder는 힌트를 주는 속성