nana_log
Home
  • 분류 전체보기 (68)
    • Study (63)
      • Markup (2)
      • CSS (12)
      • JavaScript (21)
      • Framework (5)
      • Tools (0)
      • Web Animation (2)
      • Design (8)
      • etc. (13)
    • Days (4)
      • Work (2)
      • Loves (2)
Home
  • 분류 전체보기 (68)
    • Study (63)
      • Markup (2)
      • CSS (12)
      • JavaScript (21)
      • Framework (5)
      • Tools (0)
      • Web Animation (2)
      • Design (8)
      • etc. (13)
    • Days (4)
      • Work (2)
      • Loves (2)
About
블로그 내 검색
Portfolio

nana_log

인터렉티브 모션과 자바스크립트를 공부하고 있는 웹 퍼블리셔에요 :-9

  • Study/etc.

    [DP] Web Publishing Copy - Studio JT

    2019. 10. 31.

    by. 나나 (nykim)

     

    https://studio-jt.co.kr/

     

    디자인이 깔끔하고 예뻤던 사이트.

    많이 배웠습니다! 감사함니당( ´ ▽ ` )ノ

     

     

     

    #

    프로젝트 리스트의 이미지를 CSS background image 와 태그 <img /> 두 개로 표현했다.

    검색엔진 노출 때문인 것으로 추정.

     

     

    #

    어르신 브라우저 대응을 위해 flexbox를 쓰지 않고 있었다.

    연습도 할 겸 float, table 등으로 대체해서 써봤다.

    써 본 결론은? 그래도 플박이 최고임.

     

    #

    대부분의 이미지는 jpg로 처리한 듯 했다.

    왠만하면 jpg로, 투명처리가 필요할 때만 png로 한다면 이미지 용량을 줄일 수 있을 듯.

     

     

    #

    요기서 손이 건물 뒤로 스윽 사라지는 걸 어떻게 표현하지 고민했는데 그냥 overflow 처리했다!

    애니메이션은 CSS로 적당히~

     

    이 영역의 모든 요소(타이틀, 이미지, 백그라운드)가 뷰포트에 맞춰 비율을 유지한 채 줄어들도록 되어 있다.

    원래는 스크립트로 처리되어 있었지만 (귀찮아서) CSS로 대체했다.

    타이틀과 이미지는 vw로, 백그라운드는 padding으로 처리했다. 슈슈슝 =3

     

     

    #

    맥 모니터를 background와 border-raidus로 처리한 건 신기했다 오와ㅏㅏ

     

     

    #

    이 부분도 보더랑 그림자가 살짝 들어갔는데 너무 예쁘다ㅠㅠ

    이런 섬세한 표현 하구 싶다... :Q

     

     

    저작자표시

    'Study > etc.' 카테고리의 다른 글

    [되짚기] 초보를 위한 Git 다루기 / 풀리퀘하기  (0) 2020.04.16
    웹 퍼블리셔를 위한 VS CODE 확장 프로그램  (2) 2020.04.05
    [DP] Web Publishing Copy - Studio JT  (1) 2019.10.31
    [SVG] clip path  (0) 2019.09.17
    [AWS] S3 버킷으로 정적 웹사이트 호스팅하기  (0) 2019.07.01
    iTerm, Zsh, Oh my Zsh 설치하기  (0) 2019.03.07

    댓글 1

    • 프로필사진
      눈누란라 2020.10.27 14:29

      블로그 너무 재밌게 보고있어요~ 열심히 공부하시는 모습을 보고 저도 많은 자극을 받게 되네요 :D 좋은 글 많이 올려주세요! 팬이에요 >.<

      수정/삭제답글

    관련글

    • [되짚기] 초보를 위한 Git 다루기 / 풀리퀘하기 2020.04.16
    • 웹 퍼블리셔를 위한 VS CODE 확장 프로그램 2020.04.05
    • [SVG] clip path 2019.09.17
    • [AWS] S3 버킷으로 정적 웹사이트 호스팅하기 2019.07.01
    맨 위로
이전
1 ··· 5 6 7 8 9 10 11 12 13
다음
전체 글 보기
  • Github
  • Portfolio
  • Mail

Today 586

Total 142,897

좋아하니까, 나답게

Designed by Nana
블로그 이미지
나나 (nykim)
쉽고, 재밌고, 특별한 걸 좋아해요. 가끔은 걷고 가끔은 뛰면서 나아가는 중.