Web Study

가상클래스 ::after를 사용하였는데 jQuery에서 선택이 안된다ㅠ.ㅠ 그래서 찾아보다가 아래와 같이 사용할 수 있다는 걸 알았다. 하지만 이마저도 ie11이상의 브라우저만 지원한다고 한다. 이외에도 몇가지 방법이 있었지만, 좋은 방법인지 모르겠다. 코드 사용도 늘어나고... 그냥!! jQuery쓸거면 왠만하면 가상클래스는 사용하지 않는게 좋을 것 같다는 생각이다. active를 다른 곳에 걸어주고 사용하는 걸로 간단하게 해결됐다.(바보ㅠ) 그래도 jquery사용시 가상클래스를 범위로 선택하면 안된다는 것을 알게 됐다. 부모 영역 #parent { width: 200px; height: 200px; position: relative; background: #f1f1f1; pointer-events: ..

KAKAO AI flex box + svg이미지 가져오기 + 2차 메뉴 구성과 정렬 + 메뉴 하단 보더 적용 시 2차 메뉴와 자연스럽게 연결 해주기 + jQuery 기초 점점 줄어들다가 최소 너비에서 줄어들지 않는 적응형으로 구성 2차 메뉴까지 flex box로 정렬 svg이미지 따로 모아주는 작업 하기 소개 서비스 제품 미니링크 미니헥사 헤이카카오 카카오미니 카카오홈 파트너 카카오톡 자동차 내비게이션 스마트악세서리 디스플레이 스마트홈 제휴문의

kakaobank >>>>>>>> 지난번에 이어 카카오뱅크 메뉴 클론 코딩을 완성 해보았다. 일전에는 작업 도중 jQuery가 잘 생각나지 않아 다시 기본 개념부터 익히고 돌아왔다. (영상을 봤을 때 흐름이나 이해는 가지만 막상 쓰려고 하면 쓰지를 못하겠다 ㄷㄷ;;) 처음에 이 예제를 접했을 때는 생각보다 난이도가 좀 있다고 느껴졌다. jQuery를 포함하여 잘 안되고 막히는 부분이 몇가지 있었기 때문이었다. 하지만 부분 부분 완성적 개념으로 맞춰 본다면, 사실 난이도 상의 어려운 예제는 아니었다는 생각이 든다. (완성을 했기 때문에 그런 생각이 드는 것일까... 진짜 거짓말이 아니고 들어갈 때, 나올때 심정이 많이 다른 것 같다. 하기전에 다소 어렵게 느껴졌는데) 왜 팍팍 완성을 시키지 못하고 해맸을까..

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

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