본문 바로가기

분류 전체보기

 (244)
[javascript ES6] 내가 이해한 화살표 함수 화살표 함수가 분명 간단하고 사용하기 편리한건 알겠는데 자꾸 헷갈려서 기록용으로 적어보려 한다. 우선 내가 이해하기로는 function sampleFun () {} const sampleFun = () => (); 이렇게 사용될 수 있다. 단 이럴경우는 함수 내에 return 값만 있을 경우 {} 중괄호와 return이라는 용어를 생략할 수있다. 만약 return외의 값들 (변수 등등)이 들어가야 하거나 딱히 return 값이 없을 경우 아래와 같이 화살표 함수를 쓰면 된다. let count = 0; const sampleFun = () => { count = count+1; span.innerText = `Total clicks : ${count}`; }
[VSCode] 자동 formatter 플러그인 소개 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Prettier - Code formatter - Visual Studio Marketplace Extension for Visual Studio Code - Code formatter using prettier marketplace.visualstudio.com React.js 공부를 하는 도중 VScod 플러그인 중 JSX (Javacript를 확장한 문법으로 HTML에서 사용한 문법과 흡사)를 입력하고 저장했을 시 자동 formatter 해주는 플러그인을 발견해서 소개하고자 한다. 1. VSCode 플러그인 : Prettier - Code formatter 검색 후 ..
[Swiper.js] 멀티 슬라이더 외부 pagination과 navigation 잡기 swiper 기본 특성 상 swiper-slider 안에 pagination 과 navigation이 존재하며 기본적으로 슬라이더 안의 있는 리모트(pagination 과 navigation)들을 인식하게 된다. 디자인에서 pagination 과 navigation이 대상 슬라이더 밖에 존재해야할 UI가 있을 때 독립적인 하나의 슬라이더만 존재하면 문제가 되지 않다. 하지만 이와 같은 두개이상의 슬라이더가 있을 때 리모트는 정상 작동이 되지 않는다. 따라서 약간의 스크립트 수정이 필요하다. HTML 상시제 이러닝 모집중 자격교육(직업능력개발훈련교사) 기업현장교사 심화과정 [1단계] 온라인교육 (21시간) [2022-1]차 접수기간 상시 신청인원 112 / 9,999 교육기간 2022.01.01 ~ 202..
[onmouseenter, onmouseleave] html img에 활용하기 주의할 점은 img태그안의 마우스 이벤트를 입력한 것이기 때문에 이 이미지 태그 외의 다른 태그에 마우스 호버를 해도 변함이 없다. 즉 아래와 같이 아이콘과 텍스트가 함께 있는 블록의 마우스 이벤트를 넣고 싶다면 javascript나 jQuery로 작업을 추천한다.
[VSCode] Sass Live Complie 설정하기 SASS를 VSCode에서 사용하기 전에 몇가지 셋팅이 필요하다. 1. 어떤 파일을 컴파일 할것인가? 2. 컴파일한 css는 어떤 형태로, 어디에 저장할 것인가? 3. 오토프리픽스 즉, 브라우저 마다 지원하는 스타일로 변환을 할 것인가? 4. 컴파일시 .map 파일도 추가할 것인가? 1. 답 : 여기서는 style.scss만 컴파일 할것이다. 2. 답 : 여기서는 compressed(압축으로 기본 min 확장자명을 가진 파일)로, scss파일이 위치한 동일 선상에 저장할 것이다. 3. 답 : O 4. 답 : X .map파일은 추후 이 클래스의 스타일이 어디에 위치해있는지 보여주는 파일로 유용하게 쓰이기도 한다. [설치할 플러그인] Sass Live Sass Compiler [셋팅 방법] 왼쪽 하단 톱니바..
[github] adding embedded git repository 가 뜨고 push 되지않을 경우 기존 내 개인 레파지토리에 추가할 폴더가 생겨서 회사 깃헙 계정이 아닌 개인 이메일과 이름으로 변경후 연결했었다. 폴더를 추가한 후에 push를 날리려니 아래와 같은 경고가 떴다. 원인은 추가할 폴더 안에 .git 설정의 user.name과 맞지않았기 때문... 추가하려는 폴더는 회사 깃헙 계정으로 작업해 둔 것이기 때문에 충돌이 일어난것 같았다. 따라서 간단히 추가할 폴더 안의 .git 파일을 없애고 다시 git add . 를 날리니 정상으로 스테이징 되었다.
[CSS] flex 자식 요소 분할 방법 display: flex; 스타일을 사용할 경우 해당 자식 요소들이 두개, 세개 네개 등등 ... 몇개로 분할하고, gap (자식요소 간 사이)를 어떻게 할 것이냐에 따라서 혼동이 오는 경우가 있다. 만약 gap을 32px와 24px로 하고, (gap: 32px 24px;는 row-gap:32px; column-gap:24px;의 줄임 표현입니다.) 자식 요소를 세개씩 나열 한다고 하면 자식요소에 flex를 다음과 같이 주면 된다. flex: 0 1 calc(100%/3 - 24px/3*2); width: 33.33%; 여기서 flex는 flex-grow와 flex-shrink, flex-basis의 줄임 표현으로, flex-grow를 0으로 한 이유는 만약 한줄에 세개 자식요소가 없고 하나 또는 두개가..
[Publishing] 반응형 배너 작업_v2 반응형 배너 작업을 할 때, 이미지를 감싸고있는 부모 요소의 padding-bottom이나 padding-top을 이용하여 비율을 맞췄었다. (이전 글 참고 : 이미지 비율 알아내는 사이트 링크도 여기에 있습니다.) https://jintrue.tistory.com/entry/Publishing-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B0%B0%EB%84%88-%EC%9E%91%EC%97%85 [Publishing] 반응형 배너 작업 사이트를 만들다 보면 banner list 이미지 사이즈 높이값을 지정하기가 애매하다. 높이값을 픽셀로 지정해버리면 해당 배너 등록 비율이 깨질수도 있기 때문이다. 따라서 등록한 배너 비율을 유지 jintrue.tistory.com 하지만 CSS3에는 ca..

티스토리툴바