[멋사 FE 스쿨] 9일차 리뷰

오전(09:00~11:50) 수업 by Wade

진도 많이 나갔다

미디어 쿼리

• screen은 모니터, 스크린이 있는 디바이스
  print는 출력 미리보기
  abbr이 뭐였나? 축약어
  attr() : css 속성 가져오는 함수

• pixel ratio는 클수록 css 1px에 들어오는 기기 화소수가 높으니까 화질이 좋다. → 해상도 별로 style을 다르게 줄 수 있다.
  console 창에서 window.devicePixelRatio로 알 수 있다.

  BOM(Browser Object Model) api

  → 브라우저의 정보를 가져오는 api가 있다. 기기정보도 가져올 수 있다.

• -webkit-device-pixel-ratio 이걸 왜 알아야 할까?
  → 해상도 따른 이미지 제공

• 그럼 왜 해상도 따른 이미지 변화를 감지해야하나?
  → 레티나 디스플레이 때 또 다룰거긴 한데

레티나 대응

• 물리픽셀 vs 논리픽셀
  디바이스 실제로 vs css에서 표현하는 화소 기본 단위
• 1px 안에 들어가는 화소의 단위가 다른데, 그냥 ratio가 1인 경우 작성한대로 보이겠지만 2~3인 경우 이미지가 더 작게 표현된다.
• 일반 디스플레이에서 잘 렌더링 되던 것이 레티나같이 화소가 많은 디스플레이에서는 이미지가 흐려진다.

→ 이때 대응하기 위한 것이 device-pixel-ratio

• 아이폰 4부터 적용됐다.

1만시간법칙 페이지 과제 실습

• 백그라운드 이미지는 alt를 굳이 안넣어도 되는 것 같다.
• title log는 alt를 좀 더 자세히
• position 속성이 너무 많으
• 이미지 자리 차지할 놈은 absolute로 잘 띄워서
• input label
• 개행시 주로 display 속성을 block으로 바꿔서 개행하신다고
• 꾸며주는 이미지(클릭 이미지 같은), 설명이 불필요한 이미지는 설명 필요 없다
• 렌더링에서 보통 300kb만 돼도 너무 크다고 생각한다.
• 폰트 이미지를 4개나 사용하는 것은 흔치 않다.
• 그러면 다양한 텍스트 어떻게?*
  → 한군데에서만 쓰이는 폰트가 있다면 이미지 텍스트처럼 처리하자. 한번밖에 안쓰는 폰트를 다 다운로드하면 낭비니까. 포토샵, 피그마 등으로 이미지로 뽑아내자. 폰트 사용하기에 효율이 안좋다.
• 의미 없는 이미지와 같은 것들은 가상요소로 만들어주는 게 좋다.
• 글씨가 잘리는 화면을 기준으로 반응형을 나눴나?
  → 실무에서는 보통 그렇게 하지 않는다. 기기에 맞추고 다른 기기에 맞춘다. 막 다 줄여가면서 하지는 않는다.
• 모바일 우선?
  → 네이버 웹 메인은 아니다. 너무 많은 정보가 담긴 웹 화면을 다 반응형으로 만들기는 너무 곤욕스러워서 그냥 아싸리 모바일 전용화면을 만든 것
• 모바일, 태블릿, PC 따로 하지 않고 요즘은 모바일에서 만들고 디벨롭한다. PC부터 하면 줄여가면서 분명히 지워야하는 정보가 발생한다.

https://experienceleague.adobe.com/docs/target/using/experiences/vec/mobile-viewports.html?lang=en

→ 이 페이지에서 각종 기기 대응해야하는 사이즈 확인 가능

• FE개발자는 디자인 센스가 있으면 좋다.
• 디자인적으로 부족하다고 느껴지면 좋은 사이트를 클론 코딩해보는 것도 좋다.
• 한줄 인용은 blockquote 보다는 그냥 qoute 태그가 좋을 듯
• label, input 쌍으로
• 결과를 보기 위해 서버에 전송하는 button에는 type이 따로 필요 없다.
• 필요한 스킬은 참고해서 다른 사람의 코드를 클론해보자
• 중요한 건 구현하면 되는 것
• 기기 구현
• 굳이 묶어주지 않아도 되는 text는 span 이런걸로 묶어주지 않아도 된다.
• textarea tag 등에서 cols, rows로 한다면 굳이 px로 써주지 않는다. 개수로 생각.
  cols=10이라는 것은 제일 큰 font-family 따라서 10개가 가로로 들어가도록 사이즈 잡아주는 것
• 보통 여러줄의 text 입력 받고 싶으면 textarea 쓴다.
• wysiwyg(What You See Is What You Get)
• JS까지 배우면 wysiwyg eidter 같은 것 만들 수 있다.
• HTML,CSS는 정해진 규칙 같은게 없어서 주변 실력 좋은 개발자들에게 코드리뷰 받고 하면 좋다.
• 코드 작성하고 주석 처리한 것들은 지워주자
• 인용문은 article보다는 blockquote 등의 태그로 감싸주자
• input이라는 요소가 있으니까 form tag로 감싸주기 fieldset까지 넣으면 더 좋다.
• placholder의 텍스트는 연한 색깔로
• 줄바꿈을 after요소로 할 수도 있겠다.
• footer의 dt? → table 요소니까 자식 요소가 하나밖에 없을 때는 쓰지 말자
• 저작권 small tag로 넣는 거 나쁘지 않다.
• 가리는 컨텐츠 없이 잘 반응하기

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

• breakpoint system
  구글에서 조사한 기기들의 평균 너비 정보
  → 이런 것들을 max-width, min-width 등에 넣어주면 된다.
  기기 기준하고 싶으면 adobe기준으로 가자

오후(13:00~18:00) 수업 by Wade

재현님 코드 리뷰

• main이 footer까지 감쌌다.
• h1으로 로고를 감쌌다.
• p 태그로 했는데 form 태그로 감싼거 보고 반성하심..ㅎ
• 텍스트는 뭐 안주고 그냥 텍스트 자체로 사용
• 숫자만 입력해야하는 input은 type도 number로 하자
• heading 태그도 매우 중요하고 유용하게 쓸 수 있다.

마크업 후에 가장 먼저 해야하는 일?

• cross browsing도 중요하지만
• 웹 표준 검사, CSS 표준 검사
  → validator 돌리기(w3c markup validation service)
  돌렸을 때 Warning은 고치기를 권장 정도 되겠지만
  Error는 렌더링 과정 자체에서 문제가 발생할 수 있다.
  • 돌려보니 흥미로운 점?
    article, section의 heading tag가 빠졌다는 warning이 많이 발생한다.
• id는 한페이지에서 한개만 사용 가능
• 유명 홈페이지들도 오류가 많이 보이던데 실무 프로세스?
  실무자가 입사를 해서 코딩을 하고 validation 돌리고 오류가 많다면 깨지겠지
  원래는 선임의 검사를 받는다.
  validation 통과까지 수정을 저쳐야 한다.
  BE 개발자에 따라 마크업 구조가 바뀔 수도 있다.
  하지만 오류 없던 것들도 오랜 세월 수정, 수정되면서 오류들이 쌓이는 경우도 있음
• html의 각 태그들의 속성을 외우는 것이 중요하다.
  html 무시하는 사람들이 있는데 한없이 깊다. 언어는 계속 변하고

https://www.advancedwebranking.com/html/

< 가장 많이 사용하는 태그들 모아둔 사이트>
우선은 여기 있는 태그들의 속성만 알아도 충분할 듯..?
어떤게 인라인, 블록인지 너무 스트레스 받지 말자

• img 태그에 사이즈 주는 건 권장되지 않는다. inline css는 권장되지 않는 것
• html 초반에는 에러도 많이 나고 하는데 어느시점 에러가 나지 않는다면 뿌듯☺
• validation은 최소한의 검사

현업에서는 선임의 코드리뷰 다시해서 통과를 해야하는데

• 그 때 검사하는 것?
  → 실제 화면에서 구동되는 것을 보는 것

주의할점!

→ 크롬에서 보여주는 화면은 예상하는 화면을 보여주는 것이지 실제 아이폰, 기기에서는 어떻게 작동하는지를 알 수 없다.

절대로 개발자 화면만 보고 제출해서는 안된다

• 그런데 확인을 어떻게?
  스마트폰 주소 자체에서 ip주소로 접속해서
  꼭 기기로 확인해주자!

간단한 피그마 사용 방법(뷰어 기준)

• reset.css도 안쓰는 태그면 지워줘 보자

• 텍스트지만 이미지로 구현 된 것은 alt로 설명 넣어주기 굳이 자식으로 텍스트 넣어줄 필요 없다.

• 강사님 마크업 순서를 보니

1. 구조를 전부 짜서 컨텐츠들 넣어주기
2. 다음에 class를 입력해주기

• 익숙한 사람들은 어떤 태그에 class를 넣어줘야 할지 알겠지만 잘 모르는 사람들은 전부 다 넣기를 추천
• 조상 태그가 2개 이상이면 해당 태그까지 타고 들어가는 경로가 안전 할 것 같으니 애써서 class 넣어주지 않아도 될 듯
• 요소 선택자는 잘 사용하지 않는 게 좋을 것 같다. 하지만 반복적인 요소한테는 굳이 class를 넣어주지 않아도 된다.
  ex. ul 안에 li가 여러개 있는데 몇번째 골라야 하는 데 .. 암튼 그런 경우
• 컨벤션, prefix등 정해진 것들이 회사마다 있다.
• 회사는 연봉 협상 때 제시하는 금액에 따른 근거를 갖추고 있다. 우리도 거기에 대응하기 위해선 실력을 잘 갖추고 자신의 역량을 알아야 할 것
• 강사님은 특정 px가 주어지면 거기에 맞춰 px을 넣으신다.
• px 쓸 때 소수점 이하까지는 잘 안쓴다. 소수점 올림, 내림 하는 게 브라우저마다 다름
• 피그마 등에 디자이너들이 넣어준 수치대로 넣어주는 것이 가장 좋다! 너무 복잡하게 생각하지 말자
• margin collapsing 중 → 부모 자식 요소간 자식의 margin-top, bottom 등이 부모 요소에 영향을 미치지 않는 현상
  해결?
  부모자식간 간격은 부모에 간격을 줘서 만들자
• 이동할 필요가 없을 때는 자연스럽게 position relative 주는 경향
• z-index줄 때도 계산하기 편하게 10단위로 주는 게 좋다.
• z-index는 position값이 있어야만 적용이 된다.
• 리팩토링은 나중에 많이 보게 될 과정이다.
• 부모에게 준 속성은 자식에게 상속!!
• input이 부모 속성 중 font-size 등을 상속 받지 못하는 것 같아서 input에 추가로 css 추가
• layout에 직접적 영향을 미치는 padding, margin 등은 상단에 빼줌으로 중요도를 나타낸다.
• 요소 선택자 2개를 이어쓰는 것을 비추천 하신다..
• 2개 정도 스타일 같이 할 수 있으면 같이 하는 편
  그 밑이면 굳이 묶어서 사용할 필요 없을 듯
• 이미지의 의미 있고 없고를 판단할 수 있어야 한다