22_01_11_Tue.md

[22.01.11.Tue] - Day 03

HTML

• DOCTYPE; 무조건 HTML 최신 버전

• html 태그; 루트 노드

  • html 태그의 lang 속성 -> 검색 엔진이나 스크린 리더기가 이해하는 언어로 세팅

  • lang 속성은 어떤 태그에서든지 다 사용 가능

    • ko로 html에 설정 했으면 다른 영어 등 있는 곳에는 lang="en" 설정

  • head 태그

    • meta charset UTF-8; 여러 언어 깨질 수 있는 것 방지

  • body 태그

• 텍스트 서식 관련 태그

  • b 태그 vs. strong 태그
    • 볼드체로 화면에 보여짐
    • 보이는 건 동일하지만 내부적으로는 다르게 동작함
    • strong 태그; 텍스트 강조 의미까지 포함 (스크린 리더기, 검색 엔진 강조하는 것으로 인식)
  • i 태그 vs. em 태그
    • 이탤릭체로 화면에 보여짐
    • em 태그; emphasize 강조 의미까지 포함
  • small 태그; 기존 텍스트보다 사이즈 작게 보여짐
  • mark 태그; 형광펜 표시 (하이라이팅)
  • del 태그; 취소선
  • ins 태그; 밑줄
  • sub 태그; 아랫 첨자
  • sup 태그; 윗 첨자

• 참조, 인용 관련 요소

  • blockquote 태그; 다른 사이트 인용 (내 original 내용 아님)
    • cite 속성으로 실제 인용 주소 넣음
    • 그렇게 해야 검색 엔진이 cite 속성 보고 어디서부터 왔는지 이해 가능
  • q 태그; 다른 책 등 인용 문구
    • 단순하게 사용할 때 활용
    • 짧은 인용할 때 사용
    • 자동으로 양쪽에 쌍 따옴표 들어감
  • abbr 태그; 약자 풀네임 알려주기 위한 용도
    • 약어는 abbr 태그로 감싸기
    • title 속성 값으로 풀네임 넣기
  • address 태그; 주소 (시도군...)
  • cite 태그; 책, 소설, 영화, 노래, 미술품 등 작품에 대한 제목을 나타낼 때 많이 사용

• a 태그

  • 외부 URL로 페이지 이동 가능
    • target 속성
      • _self; 현재 탭
      • _blank; 새로운 탭
      • _parent; iframe, 부모 페이지 찾아가서 바뀜
      • _top; iframe 밑에 iframe 쭉 깊게 있어도 제일 최상위 부모로 타겟팅
  • 로컬 내부 파일 주소를 절대/상대 경로로 넣어도 가능
  • href 속성으로 #id 현재 페이지 내에서 해당 지점으로 스크롤 (이동)
  • JS 함수 호출도 해줌; href 속성 값으로 javascript:func()
  • a태그에 href 속성으로 tel:+821000000000 세팅하면
    PC에서는 작동 안하지만 모바일에서는 바로 전화 걸림!!
  • a태그에 href 속성으로 mailto:aaaaa@gmail.com 하면
    PC면 outlook이나 default 메일 앱이 실행되고
    모바일도 default 메일 앱 실행되서 이메일 보내는 창 열림

• table 태그; 표 삽입 위함

  • tr 태그; 행
  • td 태그; 셀
  • th 태그; 각 컬럼 제목 해당하는 부분 (자동 중앙 정렬, bold체)
  • thead 태그; 테이블 header 표시
  • tbody 태그; 테이블 data 해당 부분
  • tfoot 태그; 집계 같은 결과

• 테이블 병합

  • rowspan 속성; 행 간의 셀 병합
  • colspan 속성 ; 열 간의 셀 병합

코드 스니펫

• 코드 스니펫 등록
  • settings - user snippet 설정
• html 코드 자동 완성 조각
• 커스터마이즈 가능
• 유용함
• 특정 함수 등 다른 여러 코드도 모두 다 스니펫에 등록해서 사용 가능

목록 태그

• 목록 태그 (문서 작성할 때 필요한 요소)
  • ul 태그; unordered list, 순서 없는 목록 작성할 때 활용
  • ol 태그; ordered list, 순서 있는 목록 작성할 때 활용
    • li 태그; 목록 하나 하나 (ul 밑에는 무조건 li 태그밖에 못 옴)
  • dl 태그; description list, 설명 목록 (특정 단어 정의, 설명)
    • dt태그; 용어 (무엇을 설명할지)
    • dd태그; 용어에 대한 설명

HTML 폼 요소

• input 태그
  • type="button"
  • type="checkbox"
    • label 하고 같이 사용하는 것이 좋음
    • label의 for 속성과 input의 id 속성 통일
    • label의 for 속성; 이 라벨이 어떤 요소에 대한 라벨인지 연결시킴
    • label 먼저 만들고 그 안에 input 태그 넣는 것 권장
    • id, for 연결할 필요 없음
    • checkbox는 여러 개 선택 가능한 옵션 줄 때 활용
    • checkbox도 같은 그룹이면 name 동일하게 설정해야 함!
  • type="radio"
    • 여러 개의 선택지 중 하나만 선택할 때 활용
    • 같은 그룹이라는 grouping 필요! => name 속성 이용
    • name은 동일한 이름 가질 수 있음
    • 하나의 질문에 대한 하나의 선택 값으로 인식 가능
    • checked 속성은 default로 체크되어 있는 상태로 표시 (값은 따로 안넣어도 됨)
    • checked 속성을 JS로 조작할 때는 true/false로 체크 가능하지만
      실제 HTML 내에서는 checked="false" 아님 (checked="checked" 형태임)
  • type="color"
    • 색상 선택
  • type="date"
    • 캘린더 날짜 선택 (연월일)
  • type="datetime-local"
    • 연월일 시분초까지 선택 가능
  • type="month"
    • 년/월까지 입력 받을 수 있음
  • type="email"
    • 이메일 입력 용도
  • type="password"
    • 로그인/회원가입할 때의 비밀번호/주민번호/암호 입력 받기 위한 용도
    • 동그만 모양으로 바뀜
  • type="text"
    • 텍스트(모든 문자) 입력 용도
    • value 속성 값 설정하면 기본값으로 세팅
  • type="file"
    • 파일 업로드 가능 (파일 하나만)
    • multiple 속성 있음 (동시에 여러 개 파일 선택 가능)
    • accept 속성; 특정 파일 확장자 지정 가능
  • type="hidden"
    • 사용자 눈에 안보이는 요소 (숨김)
    • 내부적으로 개발자가 필요한 특정 값 ex. 현재 보이는 사용자 ID
  • type="image"
    • img 태그와 기능적으로 조금 다름
    • input type image는 마우스 커서 모양이 손모양으로 바뀜
    • 눌렀을 때 클릭 이벤트 받을 수 있음 (버튼 같은 느낌)
    • 실무에서 거의 사용 안함
  • type="range"
    • 게이지바
    • min, max 속성 있음 (나중에 사용자들이 볼륨 입력값 얼마인지 JS 이용해서 가져올 수 있음)
    • ex. 볼륨 조절
  • type="reset"
    • form 요소 안에서만 사용함
    • 초기화 용도
  • type="search"
    • 자동으로 x 표시 나옴
    • x 누르면 입력 값 사라짐
    • ex. 검색하다가 지울 때 불편함 해소 (입력 값 자주 초기화할 때 사용)
  • type="tel"
    • 전화번호 입력
    • form 요소 안에 있을 때만 제대로된 기능 발휘
    • 전화번호에 대한 pattern 속성 있음 (어떠한 패턴인지만 허용)
      • JS 정규식 ex. pattern="\d{3}-\d{4}-\d{4}"
      • 입력값에 대한 패턴 지정
  • type="time"
    • 시간 입력
  • type="url"
    • pattern 속성; http, https 설정
  • type="week"
    • 몇 번째 week 인지 알 수 있도록 해줌
• form 태그
  • JSP 같은 거는 form 태그 안에 있어야 서버로 보낼 수 있음
  • FE 프레임워크는 form 태그 안씀
    • 단점 존재; email type input 기능 사용 불가
      • 자동으로 이메일 형식 체크 해주는 기능
        • 체크 가능하려면 반드시 form 태그로 감싸줘야 함
        • 또 반드시 input type="submit" 할 때만 가능 (form 태그 안에 input type button 안됨)
  • input 태그에 required 속성 => 유효 값인지 다 체크해줌

[Note]

• open with live server

• 스타일 속성 이용해서도 똑같이 보여지도록 만들 수 있음

• 잘 사용하도록 습관 잡기!

• SPA; FE framework (바뀌는 부분만 적용 가능)

  • 내부적으로 iframe 요소 거의 사용 안함
  • iframe 태그; 페이지 안에 다른 페이지 넣을 때 사용
  • iframe에 _self 속성 사용하면 안나옴 (사이트에서 접근 거부)
    • https 아니어서 그럼
  • 과거 iframe 태그; 화면 깜빡임 방지 용도 등으로 썼음
    • 만약 iframe 없으면 상단 메뉴에 중복된 코드 다 작성해야 했음
      (페이지로 이동하는 Hard Coding 했을 때 힘들었음..)

• id 속성은 unique함! (중복 불가)

  • 한 HTML 안에서만 적용
  • 하지만 에러를 안잡아줘서 주의해야 함!

• 태그 관련 협업 소통 문제?

  • 큰 기업 웹 디자인 시스템 잘 되어있는 쪽은 어느 정도 다 잘 체크하지만
    거의 90%이상 기업은 시맨틱 요소들 잘 안지킴..

• FE 프레임워크에서는 id 속성 거의 사용할 필요 없음

  • form 태그도 쓸일 없음

• 테이블 태그 활용할 때 명확히 구분해서 잘 작성해야 함

  • 데이터 조회 리스트에 많이 활용
  • 보통 조회 조건에 따라 tbody나 tfoot 변경함 (thead는 일반적으로 고정)
    • JS에서 프로그래밍적으로 데이터 해당하는 부분만 수정할 때 편해짐
    • table의 tbody 또는 tfoot 부분만 수정!
    • 물론 검색 엔진이나 스크린 리더기 사용할 때 유용한 점도 있긴함

• 과거에 테이블 태그 이용해서 레이아웃 위치 다 잡았음

  • 테이블 태그가 HTML 요소 중에서 가장 성능 많이 잡아먹음
    • 테이블 무수히 많으면 성능 느려짐
  • 현재도 레이아웃 잡으려고 div 태그 많이 사용함

• 프래그먼트; 웹 화면 안에서 특정 UI 조각 (UI 조각 단위)

• CSS 스타일 지정 방법

  • 인라인 스타일; html 태그에 직접 style 속성 지정
  • internal 스타일; head 태그에 style 태그 안에 때려 넣음
  • external 스타일; 별도 css 파일 생성해서 관리 (권장)

• 데이터 그리드 컴포넌트; 정렬 기능, 페이징, 조회 등 모두 구현 예정

• 01012345678 입력하면 전화번호 사이에 자동으로 - 들어가려면?

  • JS 이용
  • keydown event listen 해서 3자리 입력하고 네 자리 입력할 때 그 사이에 - 넣도록 코딩!

• 모든 input 태그에는 value 속성 값 사용 가능

  • value 속성 값 세팅 후 readonly로 세팅하면 수정 불가!
  • readonly는 읽기 모드

• input 태그에 disabled 속성은 사용할 수 없는 필드로 바뀜

• readonly vs. disabled

  • 만약 속성이 form 내부로 들어가면?
    • readonly면 서버로 데이터 전송됨
    • disabled는 서버로 데이터 전송 안됨

• input 태그에 maxlength 속성, minlength 속성

  • 글자 수 제한 가능

• input 태그에 placeholder 속성

  • 글자 힌트 줌
  • label과 연결시켜도 되긴 한데 모바일 같이 공간 작으면 placeholder 사용해서 처리!
  • 전화번호에 placeholder 추가하면 입력 가이드 줄 수 있음
  • placeholder는 입력하는 곳에 가이드 줄 수 있음
  • 하나라도 입력하면 바로 사라짐

• input 태그 required 속성; 반드시 입력!

  • form 요소 안에 있을때만 적용됨

• 화면 열릴 때 자동으로 포커스 되게 하기 => autofocus 속성

  • 특정 input 요소에 사용자가 가장 먼저 행동 취하는 요소에 focus

• 실무에서 사실 input type="button" 잘 안쓰고 button 태그 사용함

Source Code