FRONT END MEETUP

세션 요약

미디어 쿼리, 브레이크 포인트

• 연사자 : 김수진 님

반응형 웹

• 미디어 쿼리
• 그리드
• 플랙시블 이미지

쿼리 : 질문하다

• 조건들에 대해 맞춰 스타일을 주는 것

크로스 브라우징

• 사파리
• 모바일 어플리케이션
• 갤럭시 폴드

뷰 포트 너비 값에 대한 브레이크 포인트

브레이크 포인트

레이아웃이 바뀌는 포인트

어떻게 정할까

바운더리 / 레인즈

• 바운더리
  • 숫자로 끊기는 지점
• 레인즈
  • 영역(바운더리로 끊긴 것들)
    • 휴대전화
    • 패드
    • 데스크탑

• 360 sm
• 760 md
• 960 lg
• 1440 xl

여기서 조금씩 수정

반응형 웹 작업은 작게 시작해서 쌓아 올리는 것

변수 선언으로 관리하기

• sass mq
  • gulp 4
    • gulpfile.js
      • 함께 보기
      • 함께 보기

풀페이지 디자인

• 기획자 / 디자이너와 꾸준한 대화

• 대응이 프론트 단에서 어렵다

max를 쓰지 않는 게…. 좋다…

모호하다

min 위주로 사용

퍼블리셔 to 프론트엔드

• 연사자 : 김인숙 님

퍼블리셔로 전환할 때

• 웹 표준, 웹 접근성에 대해 무지
• 사이트 마크업 분석
  • 클론 코딩

프론트엔드 개발자로 전환할 때

• 근본적인 컴퓨터 공학 지식의 필요성을 느낌
  • 방통대 진학
• 컨퍼런스, 밋업, 스터디 참석
• 사내 / 사외에서 배운 지식을 공유
  • 자바스크립트를 잘 모른다는 것을 깨달음
    • 모던 자바스크립트 관련 책 보면서 코드 따라 치기
    • 스터디 참석

공부법

• 40분 공부 / 20분 휴식
• 스탑워치 활용
• 10분 단위로 플래너 활용

• 자계발은 복리로 돌아온다
• 이력관리는 평소에도 필요ㅏ다
• 내 자신에 대한 객관적인 평가
• 프론트 엔드 개발 기술 트랜드에 대한 관심
• 한계를 두지 말자
• 회사 업무 뿐만 아니라 내 자신을 위한 일을 하자