Web Study

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

가상 클래스 :root에 대해 간략하게 공부하는 시간을 가져 봤습니다. 이것도 좀 생소한 개념이라고 할 수 있었네요.(요런게 있었다니!) 일단 사용 방법은 가상클래스 :root 써준뒤 css 변수를 선언하여 입력 해주는 방식 입니다. 그러면 다른 클래스에서 쓸 때, 변수를 그대로 가져와서 써주면 됩니다. 일단 위의 사용 예시는 일괄 처리 방식에 도입 했습니다. 저런 방식으로 :root를 써주면 이 클래스에서 값만 바꾸면 되는 편리한 방식으로 쓰일 수 있네요. 일일이 수정을 거치치 않아도 되니 활용도가 꽤 괜찮은 것 같습니다. 그리고 자료를 찾아 봤을 때 가상 클래스 :root는 문서 구조 단계에서 가장 상위의 부모요소라고 하네요. 즉, html에서 :root는 html요소이고 중요한 점은 css로 간주되..

얼마 전 수업시간에 선생님을 통해 BEM의 개념을 대락적으로 듣게 되었고 또 개발자 유튜브 영상(프론트 / 엔드 로드맵 관련)을 보던 중 또 다시 언급된 용어...BEM...이것은 어떤 용도로 쓰이고 또 어떤 개념을 가졌는지 한 번 짧은 시간이나마 공부를 해보기로 했습니다. 라고 다른 전문가께서 말씀 하셨습니다. 저는 무슨 말인지는 잘 모르겠는데, 자료를 대략 살펴보니 보기도 편하고 작업도 편한 효율적인 클래스명 짓기!라는 의미로 받아 들였네요. 각 개념을 살펴보면 일단 BEM의 기본 구조는 Block, Element, Modifier를 뜻하며 이 3가지로 구성된 이름을 짓는 방법입니다. 그리고 각각 _ _와 - -로 구분 합니다. 위의 코드에서 header는 Block, naviagtion은 Eleme..

피그마(Figma)에서 로컬 폰트 적용하기(내가 다운받은 폰트 적용하기) 지난 시간에 이어 피그마(Figma)를 사용 해보면서 "아 그럼 내가 사용하는 나만의 폰트는 어떻게 적용 될 수 있는 거지?!"라는 의문이 생겼습니다. 그래서 이것 저것 자료를 찾아보고 참고하면서 방법을 알게 되었네요. 일단 방법은 총 2가지로 나뉠 수 있습니다. 첫번째, figma.com 접속하여 웹상에서 작업시 나의 사용자 아이디 클릭을 하시면 위 화면과 같이 settings 항목이 나옵니다. 요걸 선택 하시면 Fonts > Local fonts are currently not enabled~~ 이런 설명이 있네요. 바로 밑에 파란색 바탕 버튼으로 활성화 되어 있는 Download Intaller to enable local f..

www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com 오늘은 최근 UI 디자인 툴로 각광받고 있는 피그마(Figma)를 사용 방법에 대해 공부 해봤습니다. 저는 Adobe사의 프로그램인 XD를 사용해오고 있었는데요. 나름 만족스럽게 사용하고 있었지만, 또 다른 툴은 어떤지 궁금하기도 한겸 테스트를 해봤습니다. 일단 유튜브 현업 디자이너들의 포스팅 영상을 참고 하였고 또 어떤 기능들을 가졌는지 등을 간략하게 공부한 뒤 툴을 만져봤네요. 사용 해본..