22_01_12_Wed.md

[22.01.12.Wed] - Day 04

HTML

• semantic 적인 요소 생각하면 label-input 에 연동할 id 명을 name으로 하는 게 나을 수도 있음
  • 스크린 리더기 등 voice to text 그렇게 해석해 줄 수 있는 것이 있음
• select 박스 (콤보 박스)
  • option; 여러 개 중에 1개 선택
  • select 박스에 multiple 속성 있음
    • 자동으로 쭉 늘어남 (선택지 많아지면 스크롤 가능)
    • 여러 개 선택 가능 (ctrl/커맨드 키 이용)
    • size 속성은 화면에 몇 개 보이는지 설정 가능
    • 실무에서는 multiple 사용하는 경우 거의 없음 => 보통 checkbox 사용함
  • 선택 옵션 많은 경우에는 select 박스 이용
    • input:radio와 비교!
    • radio 버튼은 name 동일하게 해야 grouping 됨
    • 선택 옵션 별로 없을 때는 UX 적으로 radio 버튼이 좋음
    • JS 코드 사용할 때 radio 버튼을 활용하면 코드가 좀 더 복잡해짐
      • 귀찮아서 select 박스 만들어서 활용하는 사람들 많음
      • 아무래도 select 박스 다루기가 간편해서..
      • 하지만 사용자 입장에서는 두 번 클릭하는 번거로움으로 불편함
      • UX적으로 선택 옵션 적을 때는 라디오 버튼 이용하자!
    • ex. 태어난 국가 같은 경우에는 라디오 버튼으로 하기에는 무리 (select 이용!)
• 체크 박스 (틱 박스)
• textarea; 여러 줄 입력 가능
  • cols, rows 설정 가능
    • 보통 style 속성으로 width, height 설정함
  • 사이즈 자동 조절 가능해서 실무에서는 거의 안씀
  • 실무에서 가끔 입력하는 텍스트 라인수 늘어나면
    자동으로 늘어나도록 보여주세요 하는 요구사항 있긴 함
    (JS 코드 이용)
• button
  • type="button" 생략된 것임
  • 구 브라우저는 type="button" 반드시 지정해야 함 (인식 못하는 경우 있음)
• input:submit
• fieldset (입력할 데이터 폼 있는데 grouping 해주는 것, 연관 그룹끼리)
  • legend 태그; grouping 한 부분이 어떤 묶음인지 정보 알려줌
• datalist 태그
  • 코드 블록도 안나옴..
  • 실무에서 많이 사용 가능
  • option 태그는 self-closing임
  • input:list 와 연동
  • 문제점; 선택하고도 지울 수가 있음
    혹시 사용자가 강제로 지울 수도 있으니 나중에 서버로 전송되는 시점에
    사용자가 제대로 입력했는지 추가 로직 작성해야 하는 번거로움 존재
    • select인 경우에는 value 값을 통해 코드 값이 실제로 서버로 전송되니 구분 가능!
  • datalist는 눈에 보이는 값만 그대로 사용할 때 사용하기!
  • select box와 차이점
    • select box가 5개밖에 없으면 괜찮음
    • 하지만 200개면 스크롤 하기 너무 부담
    • table에 select 박스 다 넣으면 긴 테이블 렌더링 되려면 시간 오래 걸리는 문제
    • input:list, datalist 활용하면 훨씬 빠르게 키워드 조금만 입력해도 찾을 수 있음
    • 한 화면에 여러 번 작성할 필요가 있는 경우
• 시맨틱 요소 (HTML5에서 추가됨)
  • header
  • nav
  • main
  • section
  • article
  • aside
  • footer

CSS

• css는 html에 디자인 입히는 언어
• cascading style sheets
• css 3가지 방식
  • inline style
  • internal style
  • external style
• css selector (선택자)
  • declaration (디자인 선언 블록)
    • property, property value (선언; 속성, 속성값)
• selector 는 태그 이름, id, 클래스 이름으로도 다 가능
• selector 조합해서 사용 가능
• * 는 body 까지 다 포함해서 모든 태그에 디자인 입힘
  • 전체 선택자 (universal selector)
• 태그명 가지고 한 것은 태그 선택자
• class 선택자
• 클래스 선택자가 태그 선택자보다 더 우선 순위 높음
  • !important 속성 넣으면 최우선 적용됨
• 클래스는 여러 개 추가 가능 (한칸 띄고)
  • 여러 디자인 속성 적용
  • 최근 추세) 2가지
    • 부트스트랩; 디자인 시스템
      • 클래스 하나만 사용해서 다 적용
      • 물론 일부분 유틸리티 성으로 제공
    • 테일윈드; 유틸리티 디자인
      • 모든 디자인 속성들을 하나 하나 다 쪼개서 일일이 다 넣음
      • 중복된 코드 줄일 수 있음 (작은 조각만 추가하면 됨)
      • 물론 클래스명 규칙은 있지만 애초에 일일이 다 정의해서 써야함
• 태그 선택자는 공통 영역에만 사용하고 실제 화면에서 구분이 필요한 영역은 사용 안함
  • 대부분 클래스 가지고 사용함
  • 만약 id만 있으면 # 붙여서 사용
    • 대신 id라는 것은 무조건 그 해당 요소 1개만 있음 (unique)
• 실무에서는 inline style은 거의 안씀 (정말 특별한 경우 제외하고)
• SCSS 이용하면 보통 변수 값으로 활용해서 상속 받아서 사용 가능
• 복합 선택자
  • 2개 이상 같이 이용해서 사용
  • > 이용해서 찾아가서 바로 밑에 있는 요소 찾아서 디자인 적용 (직계 자식들만 찾음)
    • 그 자손까지는 안감
    • > 빼면 그 밑에 있는 놈 다 디자인 먹힘 (자손까지도 다 포함)
• div.div-area2
  • 태그 이름이 div이면서 클래스명이 div-area2 인것
  • 한칸 띄면 하위 요소 의미하는 것임
• 속성 선택자
  • ex. input[type='text']
• JS의 document.querySelector('') 이용해서 html DOM 요소 접근
  • querySelector('') 안에 들어가는 것이 CSS Selector하고 문법 동일
  • cf. input[type=text]
• 가상 클래스 선택자 (수도 클래스)
  • action에 대한 설정 가능
  • ex. a:visited
  • visited, hover 등 프린트물 참고
  • li:nth-child(2n + 1) // 홀수
    • 2n은 짝수임
• external css
  • css 외부 파일로 분리
  • html의 head 태그 안에 link:css
• html 요소마다 입힐 수 있는 상세한 CSS

[Note]

• 자바 JSP 기반은 form 사용하지만 최근 FE SPA 프레임워크는 사용 안함 (submit 방식 사용 X)
  • 기존 html 가지고 있던 form 내부 submit 관련 기능 사용은 못하는 아쉬움
  • 이제 angular.js 더 이상 지원 안한다고 발표됨
    • 근데 후속작으로 angular 라는 이름으로 따로 진행?
• empty 태그; self-closing 태그
• form 태그
  • action 속성 값으로 서버 주소 넣음
    • 입력된 값을 보낼 곳
  • method 속성
    • http 메서드
      • GET; 주소 URL에 보임, read
        • 링크 저장할 용도 있고 한번에 찾아갈 때 사용
      • POST; 주소 URL 안보이도록 보내기, POST
        • 데이터 조회할 때도 GET, POST 모두 사용 가능
        • 조회할 때 POST 방식 쓰면 URL에 안보이게 되서 공유 불가
        • 누군가 링크 저장해서 바로 들어오면 안되거나 할 떄 POST 방식 사용
        • 유저 이메일, 아이디 등은 URL 주소에 표시 안되고 감추도록 해야할 경우 있음
  • target 속성
    • _blank; 새 창 열리면서 전송됨
    • form에서 iframe으로 쏘고 iframe 쪽에서 서버 주소 사용함
      (프로그레스바 등 활용해서 UX 높일 수 있음)
      (잠시 이동했다가 하얗게 붕 떴다가 다시 돌아오는 불편함 방지)
• formvalidate 속성을 input, form, button 등에 다 넣을 수 있음
  • form에도 novalidate 속성 지정 가능
  • 실무에서 validate 체크 안하는 경우 거의 없긴 함
• JS 정규식 이용해서 이메일, postal code 등 valid 체크 처리 유용
• section vs. article
  • 사실 구분 크게 애매함
  • section; 컨텐츠 구분
  • article; 기사, 블로그 내용 등..
• aside vs. nav
  • 좌/우 측 메뉴바
  • 보통 aside 안에 nav 이용함
  • 사실 nav 바로 사용해서 개인화 기능으로 상단 또는 좌/우측 으로 선택도 가능
• div 태그 (division); 특정 구역
  • 화면에서 컨텐츠 위치 잡을 수 있고 컨텐츠 담기 가능
  • 과거에는 div 태그 이용해서 레이아웃 다 잡았었음
  • 모든 요소들 다 div 태그 안에 넣을 수 있어서 과거에는 div 태그 도배였음
  • div 태그는 웹 해석기가 해석 못함
• 시맨틱 요소 잘 만들어야 SEO에 최적화 잘됨
• class 속성은 style 주는 방식 중 하나
• css는 개발자가 알아야 할 정도 수준으로만 진행 예정
• 과거에는 html 안에 css 언어 같이 있었음
  • 나중에 분리됨
• 우리가 CSS 많이 할 필요는 없음
  • 코드 보고 이해할 수 있을 정도면 됨 (디자인 적용된 것 이해!)
  • 그래야 새롭게 디자인 입힐 수 있음
• 태그, id, 클래스, * 등 여러 selector 에서의 우선순위
  • id 선택자가 우선순위 가장 높음
  • 그 다음 클래스, 태그
  • 같은 종류라면 디자인 속성 값 다 합쳐짐
  • 같은 종류이고 동일한 속성에 대한 것이면 아래에 있는 것이 우선순위 더 높음
  • 인라인 스타일 방식이 우선순위 제일 높음 (개발자들이 주로 많이 활용)
    • 일일이 external css 파일 수정하기 너무 번거로움
• 실무에서는 internal 스타일로 사용하는 경우 거의 없음
  • 대부분 웹 퍼블리셔가 external css 파일로 만들어서 개발자에게 전달함
• CSS 선택자 이해하는 것이 제일 중요! (JS에서도 계속 사용함)
• Vue는 HTML, CSS, JS 작성하는 영역 완벽히 분리됨
  • FE 개발자는 HTML, JS만 집중해서 코딩 가능
• React는 코드 안에 함께 있어서 CSS 잘 다뤄야 함!
  • 미국 개발자는 FE 개발자가 CSS 매우 잘 다룸

Source Code