Web Study

인터넷 서핑을 하다보면 간혹 어떤 사이트에서는 이미지가 한 번에 열리지 않고 제 각각 따로 시간을 두고 열리게 되는 불편한 현상을 겪으신 경험이 있으실 겁니다. 이런 부분을 방지 하기 위해서 이미지를 한 번에 모아두고 찾아서 사용하게끔 만들어 놓은 것을 스프라이트 이미지(Sprite Image)라고 합니다. 이런 현상의 주 원인은 아무래도 할당된 traffic(데이터의 양)을 초과해서 그렇지 않나 싶은데요. 그렇기 때문에 이용자가 많은 사이트에서는 저렇게 이미지를 모아 놓은 방식을 활용하여 용량을 줄이는 것으로 알고 있습니다. 저는 사이트 클론 코딩을 연습 할 때 너무 유용하게 잘 쓰고 있네요. 사용 방법은 1. 크롬에서 f12를 눌러 사이트 개발자 도구를 연다 2. 해당되는 이미지를 shift+ctrl..

카카오뱅크 메뉴 및 컨텐츠 따라해보기(flex 개념 응용) 오늘은 flex개념을 응용한 사이트 메뉴와 컨텐츠 일부를 따라서 만들어 보았습니다. 처음에 만들 때는 flex box 개구리 게임처럼 뭔가 쉽게 쉽게 될 것 같다는 생각으로 임했었는데, 생각보다 많은 시도를 하면서 개념을 비로소 이해하고 완성하게 되었네요. 역시 실전연습이 정말 중요한 것 같습니다. 사이트 메뉴 모작을 하면서 가장 어렵게 느껴지는 점들이 있었는데, 그 중 첫번째는 적응형, 반응형, 최소 너비가 잡혀 있는지 등에 따라 html 구조가 달라지게 되는데, 바로 바로 유형 적용을 못해 시간이 지연되거나 헷갈렸다는 점이네요. 그래도 기본 예제를 통해 몇 번 연습해보니 어느 정도 이해가 되는 부분 이었습니다. 사실 몰랐다기 보다는 전에 확실..

swiperjs(스와이퍼js) 슬라이더 오늘은 기존에 사용하던 owl carousel(아울캐러샐) 대신 swiper(스와이퍼)를 사용 해봤습니다. 요즘에 꽤 좋다고 평가되는 플러그인이기에 사용방법도 익힐겸 공부를 해봤습니다. 저는 아직 기본적인 부분만 사용을 해봤기 때문에 일단은 "많은 부분이 다르다" 이렇게 말씀 드리긴 어려울 것 같지만, 그래도 몇가지 차이점을 바로 알 수 있었습니다. 첫번째로 다양한 데모 버전을 지원한다는 것입니다 swiper > demos(기본 지원 버전) owl carousel > demos(기본 지원 버전) 딱봐도 큰차이가 느껴지는 것 같습니다. 물론 owl carousel(아울캐러샐)로도 수정을 통해 다양한 작업이 가능 하지만( API 옵션 적용 등) 저는 그 부분이 어렵게 ..

플렉스(flex box)를 이용한 플렉스 반응형 그리드 연습하기 기존에는 float 속성과 음수 마진을 이용해 반응형 그리드 작업을 해왔지만, 이번에는 새롭게 배운 flex 개념을 적용하여 작업을 해봤습니다. 플렉스 아이템(flex item)간의 간격을 마진(margin)으로 조정하고 나서 여백을 없애주는 작업이 float-음수마진 보다 좀 더 어렵게 느껴지는 부분이 있었습니다. 반복적인 학습을 통해 확실히 이해할 수 있도록 해야겠고 좀 더 다양한 플렉스 예제를 통해 적응하고 또 능숙해질 필요성을 느끼는 부분이네요. See the Pen JjRKxPL by issue72y (@issue72y) on CodePen.

레이아웃 정렬에 효과적인 플렉스 박스(flex box) 공부하기 정식 명칭은 플렉서블 박스(flexible box)라고 하며 플렉스 박스(flex box)라고 부르기도 한다. 이 레이아웃은 다양한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜 줌으로써 반응형 웹 사이트에 유용하게 쓰일 수 있다. 기존에 float을 통한 정렬 방식을 사용 해왔지만, 좀 더 유동적인 레이아웃 구성이 가능해 현재 가장 보편화된 방식으로 쓰이고 있다. 플렉스 박스(flexible box)의 구성은 플렉스 컨테이너(flex container) - 플렉스 요소(flex item)로 이루어진다. 기본적으로 쓰이는 플렉스 박스(flex box)의 속성은 다음과 같다 속성 설명 1. display HTML 요소에 대한 박스의 타입..