211112 오늘공부 - 프론트엔드 스쿨 10일차

zeroto99·2021년 11월 12일
1

수업 내용 (한재현 강사님)

모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

과제 실습 - 1만 시간의 법칙 반응형 웹 구현

  • 반응형은 기기 하나를 선정해서 거기에 맞춤.
    수업은 360px 기준으로 진행함.

  • 피그마, PerfectPixel(구글 확장앱) 이용해서 디자인 싱크 맞추기.

    1. 피그마 화면 100% 상태에서 구역 나눠서 캡쳐
    2. PerfectPixel로 웹 위에 캡쳐본 맞춰 올리기
    3. 캡쳐본과 비교하면서 css 수정


CSS 설계 기법

  • 종류

    • OOCSS (Object Oriented CSS)
      SMACSS (Scalable and Modular Architecture for CSS)
      BEM (Block, Element, Modifier)
  • 강사님은 BEM이랑 SMACSS가 섞인 스타일.

  • 나만의 css 설계 기법 만들어서 사용하기.

  • 자기 스타일에 맞게 사용하다가 실무에서는 회사에 맞춰서 사용하면 됨.

채용 공고 분석

  • 채용 공고를 보면 어떤 걸 준비하고 공부해야 되는지 알 수 있어서 종종 확인하는 편인데 강사님이 새로운 시각으로 분석해주셔서 놀라움의 연속이었다.

  • 좋아했던 기업의 참혹한 현실도 알게되고😥... 벨로그에 적기에는 오프더레코드 같은 느낌이라 메모장에 간직해뒀다가 채용 시장에 뛰어들 때 꺼내보는 걸로...

과제 - 위니브 로그인, 모달창

  • 나만의 css 설계 기법 활용하기



  • 로그인창 : 마크업, css까지 완료했다.
    모달창 : 마크업은 이미지들 가상 요소로 넣어줘야 하고 css는 패딩만 들어가 있어서 다른 요소들 잡아줘야 한다.
    깃허브에 오늘 한 분량까지 업로드했다🌱

오늘의 TIP

  • github에 SSAFY 검색해보면 괜찮은 github 주소가 많다.

  • 퍼블리셔와 프론트엔드의 차이점

    • 퍼블리셔 : 이미지 에디터 + HTML + CSS + 크로스 브라우징 + 웹표준 + 접근성
    • 프론트엔드 : HTML + CSS + 크로스 브라우징 + 웹표준 + 접근성 + 자바스크립트 + 프론트엔드 프레임워크 (Angular, React, Vue)

새로 알게 된 내용

  • 디자인 시안의 구현도를 높이기 위해서 엄~청 세~심한 작업이 필요한지 몰랐다. 시안 캡쳐본 올려놓고 하나하나 맞출 줄이야. 마음의 준비를 해놔야겠다. 그래도 서로 최대한 맞추면서 작업해야 모두가 만족하는 작업물이 나올 수 있지 않을까. 협업... 쉽지않다 😋

profile
일단 해버리는 사람 되기~~

0개의 댓글