전체 글68 개인 이력서 - 반응형 웹 디자인 적용기 반응형 웹 디자인이란? 반응형 웹 디자인이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다. 개인적으로 만든 이력서 페이지에 처음으로 반응형 웹을 적용시켜 보았습니다. PC버전, 테블릿 버전(모바일 가로모드 포함), 모바일 버전에 대해 각각 적용시키기로 했고 우선 Figma로 간단한 레이아웃 와이어 프레임 설계를 했습니다. 스타일은 scss를 적용하였습니다. 1. 공통 mixin 파일에 media쿼리로 각 기기별 최대 width 픽셀값을 적용해줍니다. // 기기별 최대 width px $mobile-max: 767px; $tablet-max: 1023px; // 기기별 최소 width px $mo.. 2023. 10. 22. 생각의 탄생 - 유추 "우리를 구속하거나 자유롭게 하는 것은 감각이 아닌 유추를 통해서 미지의 것들을 조명 할 수 있는 능력의 유무임을 알게된다" 보통 인간의 감각은 시각이 중요하게 미친다고 생각되기 쉽다. 하지만 실제 세상은 단순 눈으로 보는 것보다 그 외의 정보들로부터의 절대적 확장으로부터 구성된다. 우리가 눈으로 보는 모든 제품들(그게 거대 기업이든 대단한것이 아니든)의 초기 영감은 결국 단순 시각에서 비롯된 것이 아니라 그들이 중요하게 느낀 다양한 감각과 그것들이 쌓여진 데이터 정보의 시냅스 연결로 탄생하게 된다. 이러한 감각들에서 새로운 확장을 이끌어 내는게 결국 유추이며 이 책에서 예시로 든 헬렌켈러의 경우 시각이 아닌 다른 정보들로 유추하여 세상을 꿰뚫어본다. 단편적인 정보는 시각으로 들어오겠지만 결국 나의 영감.. 2023. 10. 19. (포트폴리오)Sprite Generator - 두번째, SpriteArea 및 MaxRects 알고리즘 구현 목차 첫번째, 개요 및 구성 두번째, SpriteArea 및 MaxRects 알고리즘 구현 지난 시간에 이어, 실제 이미지가 보여지는 SpriteArea와 MaxRects 알고리즘을 어떻게 구현했는지 알아보겠습니다. 동작 과정 개발사항 Layout 이미지가 많아져서 캔버스 크기를 넘어가더라도 스크롤링하여 처리했기 떄문에 SpriteArea 레이아웃 자체는 고정되게 처리하였습니다. 이렇게 함으로써 사용자는 SpriteArea에서 나중에 다운로드할 이미지의 본래 크기 자체를 제한없이 확인할 수 있습니다. 또한 이미지를 다운 받았을 때, 캔버스의 여백부분은 투명하게 처리되야 하므로 초기 캔버스 배경은 transparent 처리하였습니다. 캔버스 렌더링과 이미지 로딩 드래그앤드롭 Area에 올라간 이미지들은 J.. 2023. 10. 17. (포트폴리오)Sprite Generator - 첫번째, 개요 및 구성 목차 첫번째, 개요 및 구성 두번째, SpriteArea 및 MaxRects 알고리즘 구현 이미지 스프라이트(image sprite)란? 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 왜 쓸까요? 여러 이미지를 한번에 로딩 시킬 수 있습니다. 이미지 로딩 시 깜빡임을 없애고 개별 이미지에 대한 관리를 따로 하지 않아도 된다는 장점이 있습니다. UI 화면 반응형이 아닌 적응형 레이아웃을 선택했고(개발시에 참고했던 사이트와 동일) Desktop 작업용으로 생각했기 때문에 최대 width값을 1440px(좌우 마진 포함한 사이즈. 미포함시 1060px)으로 맞췄습니다. UI의 경우 최대한 심플하게 구성하였습니다. 일단 이미지를 올리면 4가지 영역으로 구분됩니다. Drag&Drop 영.. 2023. 10. 15. 이전 1 2 3 4 5 ··· 17 다음
