[Css] Grid

Flex 와 Grid 의 차이 Flex는 한 방향 레이아웃 시스템(1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원) TIP 전체적인 레이아웃은 Grid로 잡고 부분부분에 Flex와 Grid를 적절히 사용해주기 소스코드 보면서 레이아웃 예상해보기 A B C D E F G H I 더보기 더보기 더보기 중앙 500 px은 고정이고 나머지는 줄어든다. TIP 1fr 는 빈 공간을 모두 채운다. 더보기 위 style 처럼 1fr 이 5번 반복되는 경우는 다음과 같이 코드를 짤 수 있다. repeat 을 사용한다. repeat 의 두번째 파라미터에는 여러개의 값을 넣을 수 있다. 더보기 Grid 는 2차원 레이아웃이다. 따라서 위에서 grid-template-columns에 대해 값을 주었다면 gr..

UI에서 이후 이벤트 발생 제한하기.

문제상황 현재 테스트 하고 있는 UI 에서 채팅방 목록을 클릭하면 채팅방으로 들어갈 수 있는 모달이 하나 뜬다. 그런데 채팅방의 태그를 누르면 해당 태그를 포함한 채팅방을 보여주어야하는 상황이였다. 따라서 태그를 클릭했을 때 이벤트를 발생하게 했어야했다. 그런데 지금의 문제점은 내가 가장 상위 div에 onClick 이벤트를 넣어준 상태여서, 이벤트 2 -> 이벤트 1가 발생했다. 따라서 나는 이벤트 1이 발생하지 않기를 원했다. onClickChatBeforeModal(channela, index)}> // 이벤트 1 { console.log('hello'); // 이벤트 2 }} className="tag"> {chatType} {h} ... 해결방법 event.stopPropagation() 위 이..

hello skin 에서 마우스 오버 UI 구현하기

최근에 블로그의 UI를 조금 개선하는 작업을 했습니다. 많은 시간을 투자할 수 없어서 조금씩 고치고 있는데 마우스 오버기능을 넣고 싶었습니다. 제가 난독증이 있는 편이라 글을 드래그 하면서 읽거나 볼펜같은 사물로 글자를 집어가면서 읽는게 도움이 되더라구요. 그래서 제 블로그에는 마우스 오버기능을 넣어서 좀 더 글을 읽기 쉽게 만들고 싶었습니다. 뭐 대단한건 아니지만요. 이 기능이 필요하실분을 위해 코드를 공유합니다. HTML CSS .cursorItem { position: absolute; top: 0; left: 0; z-index: 10000; pointer-events: none; mix-blend-mode: multiply; opacity: 0.6; } .cursorItem .circle { p..

Docker 맛보기

Docker DeskTop 설치하고 실행을 해준다. Visual Studio Code 를 사용한다면 Docker Extension을 설치하면 문법에 대한 도움을 받을 수 있다. Index.js 다음과 같이 정말 간단한 node.js 파일이 구현되어있다. const express = require("express"); const app = express(); app.get("/", (req, res) => { res.send("Dream Coding in Docker!"); }); app.listen(8080, () => console.log("Server is running")); 컨테이너 만들기 이제 위 파일을 컨테이너로 만들어보자! 첫번째로 해야할 것은 바로 docker file을 만드는 것이다. d..

zsh: command not found: code

code . 위 명령어를 사용해서 visual studio code를 주로연다. 문제점 아래 처럼 vsc 에서 코드를 설정을 하면 맥북을 껏다 킬때 초기화가 되어 다시 설정을 해주어야한다. 그냥 사용하다가 계속 반복이 되어서 이건 아니다 싶어 환경변수를 설정해주었다. 해결법 vi ~/.zshrc 이제 vi 편집창에 아래 코드를 넣어주고 저장한다. alias code="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code" 저장을 완료했다면 아래 코드를 실행 시켜줘야 설정한 alias가 적용이 된다. source ~/.zshrc 참고자료 https://velog.io/@nmy0502/Mac-OS-%ED%84%B0%EB%AF%B8%EB..

PWA란?

PWA Progressive Web Application 의 약자로 HTML, CSS, JavaScript를 사용해서 사용한 웹앱을 데스크탑과 모바일에서 동작하는 어플리케이션을 만드는 것이다. 설피할 필요가 없지만 홈 화면에 아이콘 추가 및 푸쉬 알림도 가능하여 사용자와 접촉 기회를 늘릴 수 있습니다. 그것 뿐만 아니라 읽기 속도와 표시의 고속화, 오프라인 열람 등 다양한 이점을 얻을 수 있습니다. PWA 에서 구현할 수 있는 기능 푸시 알림 아이콘을 홈 화면에 추가 설치가 불필요, 네이티브 앱 만큼의 UX 표시속도의 고속화 오프라인에서 열람 가능 읽어보면 좋은글 PWA가 필요한 이유 https://altenull.github.io/2018/02/25/%ED%94%84%EB%A1%9C%EA%B7%B8%E..

폴리필(Polyfill)이란?

https://db2dev.tistory.com/m/entry/%ED%8F%B4%EB%A6%AC%ED%95%84Polyfill%EC%9D%B4%EB%9E%80 폴리필(Polyfill)이란 폴리필 폴리필(Polyfill)이란 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최 db2dev.tistory.com 다음글은 위 자료를 공부하여 작성한 글입니다. 자세한 내용은 위 글을 참고해주세요. Polyfill 폴리필(Polyfill)이란 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구..

How Browser Works - 어떻게 브라우저는 동작하나.

#How Browser Works 유저가 URL을 입력 유저가 URL 을 입력했다. DNS Lookup domain을 입력 했을 경우 user의 hosts, 또는 DNS cache를 확인 하여 있을 경우 해당 address를 리턴, 아닐 경우 DNS Server로 요청을 전송한다. DNS Server의 Recursive Resolver가 TLD(Top-Level-Domain \[.com, .net\]) 등으로 도메인의 네임서버를 요청 해당 서버가 확인하여 해당 nameserver의 ip를 리턴한다. 그 후 브라우저가 웹에 다시 전달하여 해당 ip로 요청을 보낸다. TCP HandShake 그 후 브라우저는 서버간 통신을위해 개발된 매커니즘인 TCP 3Way HandShake 를 전송. SYN(시퀀스) -..

img 태그 vs background-image

https://inseq.co.kr/ko/bbs/i-24/show.do?seq=19&searchCl1=&searchMulti=&searchKeyword= 인시퀀스 웹 서비스 개발 전문가 그룹 inseq.co.kr https://mygumi.tistory.com/369 vs background-image :: 마이구미 이 글은 HTML 에서 제공해주는 img 태그와 CSS 속성 중 background-image 의 차이를 다룬다. 본인은 img 태그만을 사용해왔고, background-image 는 지양해야한다고 생각해왔다. 지금도 비슷한 생각이지만, 스 mygumi.tistory.com https://nystudio107.com/blog/the-css-background-image-property-as-..

Interative 한 버튼 만들기

저 버튼 소스코드를 까보기로했다. 소스 코드가 필요하신 분들을 위해. 더보기 출처 https://codepen.io/jasperlachance/pen/yOJdRr Colourful Flower Popup Menu This mobile inspired flower popup menu is a colourful fun project I'm experimenting with. Feel free to use it however you like.... codepen.io html css body { padding: 0; margin: 0; background: #596778; color: #EEEEEE; text-align: center; font-family: "Lato", sans-serif; } @media..