공부하는 디자이너

최근에 에디터 유목민 생활을 하면서 느낀 점을 적어볼까 한다.이건 디자이너의 관점이라는 것을 전제로 한다. 그리고 요즘 좋은 에디터는 다 오픈소스고 확장기능도 비슷비슷해서 "OO 확장기능이 좋다" 는 뻔한 이야기도 제외하겠다. 1. VS CODE"코드 에디팅을 재정의하다"  - 제작 : Microsoft 현재 세계적으로 점유율이 가장 높은 대세 에디터.급하신 분들은 아래는 안 읽어도 됩니다. 묻지도 따지지도 말고 VS Code 쓰세요.  [장점]1. 대세 of 대세사람들이 많이 쓰는데는 이유가 있다. 생태계가 방대해서 다양한 추가확장 기능을 제공한다. 또한 MS 언어와 호환성이 좋아서 특정 기술을 사용하는 개발자들에게는 매우 편리하다고 한다. 2. 손 델 필요가 없는 스마트한 기본 기능이미 코딩에 편리하..

The Complete CSS Flex Box Tutorial Much like CSS Grid (my other Medium tutorial) Flex Box is quite complex because it consists of not one but two element types: The container… medium.com Flex Box에 대한 총정리 글을 발견했다. 글 하나에 한눈에 볼 수 있도록 깔끔하게 정리가 되어 있어서 시중에 나와있는 CSS 책보다 이 글이 훨씬 낫다. 예전에는 반응형페이지를 만들 때 float와 퍼센트 margin 값을 브레이크 포인트마다 조정해야 했는데, flex는 화면크기에 적응해서 스스로 크기와 위치를 조정할 수 있기 때문에 간단하고 유용하다. 아니 간단하다고는..

JSON(Javascript Object Notion)은 Javascript 객체 문법을 따르는 문자 기반 데이터 형식이다. 언어 종류에 상관없이 데이터를 제어하기 위해 만든 표준 규약 같은 것이다. 서버단과 클라이언트단에서 데이터 통신을 할 때 번거로움을 대폭 줄여주어 XML의 강력한 대체자로 급부상했다. 참고로 한국에서는 "제이슨"이라고 읽고 영어권에서는 "제이썬"이라고 읽는다. [관련문서] https://www.json.org/json-ko.html https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON 1. JSON의 자료형식 String Number Obejct Array Boolean - true, false Null ※ Jav..

1. 심플한 오버레이 슬라이더 ▶[강의영상] 바닐라 자바스크립트로 "캐러셀 슬라이더" 만들기 (Vanilla JS : making Carousel slider) 화면전환에 중점을 둔 기본 형태이다. 방향 화살표나 페이징 기능은 없지만 안에 이미지나 컨텐츠를 풍부하게 넣으면 꽤 쓸만한 캐러셀이 될 것 같다. 또는 원페이지 디자인에서 백그라운드 요소로 활용해도 좋을 것 같다. 1) HTML & CSS 1 2 3 4 5 2) Javascript const SHOWING_CLASS = "showing"; const firstSlide = document.querySelector(".slider__item:first-child"); function slide(){ const currentSlide = docume..

jQuery를 이용한 Modal 을 제작해보았다. "보여진다", "감춘다" 두 가지 직관적인 기능만 구현하면 되기 때문에 jQuery 문법만 구조만 이해하면 쉽게 작성할 수가 있다. Modal은 활용도가 높기 때문에 꼭 익혀두길 추천한다. 1) HTML 레이어팝업입니다. 레이어팝업입니다. 레이어팝업입니다. 레이어팝업입니다. Close Modal 예시입니다 팝업창 열기 는 Modal 창이 떴을 때 배경을 블라인드처럼 어둡게 처리하는 역할을 하는 블록이다. 2) jQuery : Modal 기능 $(document).ready(function(){ $modal = $(".modal"); $(".modal--open").click(function(){ $modal.show(); return false; }); ..