본문 바로가기

분류 전체보기

 (254)
[publishing] 단위 em, rem에 대하여 2탄 간단히 말하자면, rem은 html 폰트사이즈에 영향을 받는다. em은 해당 폰트사이즈에 영향을 받는다. 💡 만약 em에 font-size가 없다면? 🤔 상위 부모나 body의 font-size를 1em으로 설정한다. 상위 부모나 body font-size가 없으면? 🤔 브라우저마다 기본으로 정해둔 font-size가 있는데, 그걸 기준으로 따른다. 🧐 혹여나, 브라우저마다 기본 CSS를 * {} 에서 font-size를 정했다면, 그 기준을 1em으로 따르게 된다. 예를 들어, html 폰트사이즈를 14픽셀로 정의 하였다. html { font-size: 14px; } global-nav와 local-nav라는 클래스명의 요소 스타일에 패딩 좌우 값을 1rem을 주었다 하자, .global-nav, ...
[Trend] 특이한 형태의 반응형 홈페이지 PC 사용 보다 Mobile 사용 시간이 커지고 그만큼 앱에 대한 비중이 높아진 요즘, 특이한 반응형 홈페이지가 눈에 띈다. https://www.pet-friends.co.kr/main/tab/2 펫프렌즈 : 반려동물 쇼핑몰 1위 사료, 용품, 간식 24시간 전문가 추천! 실시간 최저가 쇼핑과 23,000원 상당의 할인 쿠폰까지! m.pet-friends.co.kr https://tmdtkd9211.cafe24.com/ 시센스, 신선의 기본 점심 주문, 저녁 도착! 미식가의 시선으로 엄선한 수산물을 경험하세요. seesense.co.kr https://www.shaggynbushy.com/index.html 쉑앤부쉬-프리미엄 펫 라이프스타일 스토어 본 결제 창은 결제완료 후 자동으로 닫히며,결제 진행 ..
[javascript] url 정규식으로 파악하기 HTML을 공통 적으로 사용하지만 특정 페이지에서만 커스텀하고 싶을 때, 정규식을 사용하여 해당 url을 파악후 작업한다. 특정 url : /article/best-review/12/166 (function(){ m = location.href.match(/article[\/][^\/]*[\/](\d+)[\/](\d+)[\/]/),brand_no=m?decodeURIComponent(m[1].replace(/\+/g, " ")):''; if(brand_no == '12') { n = location.href.match(/article[\/][^\/]*[\/](\d+)[\/](\d+)[\/]/),no=n?decodeURIComponent(n[2].replace(/\+/g, " ")):''; if(no ==..
[Excel] 조건부 서식 이용하기 1. 우선 적용 전에 대상을 셀렉(드래그) 해야한다. 2. 그후 오른쪽 마우스 > 조건부 서식 > 오른쪽 사이드바에 "조건부 서식 규칙" 창이 뜬다. 1) 시트 행에 번갈아 가면서 색을 표현하고 싶을 때 범위_ A2:H998 형식규칙_ 맞춤수식으로_ =MOD(ROW(),2)=1 색상지정_ 회색 이렇게 적용할 경우 제목 Tip이란 예시처럼 짝수 행만 회색으로 표시된다. + 홀수 행만 회색으로 하고 싶을 경우, =MOD(ROW(),2)=0 으로 수정하면 된다. 1은 true고, 0은 false를 뜻한다. 컴퓨터는 0101010....... 0과 1로 이루어져있..... 2) 셀이 비어있지 않으면 해당 셀을 서식하고 싶을 때 범위_ C2:C998 형식규칙_비어 있지 않음 색상지정_검은색에 노란색 텍스트
[VSCode] 맥북에서 한줄 선택(드래그) 단축키 윈도우에서는 ctrl + shift + l 로 코드 한줄 드래그가 되었다. 하지만 맥북으로 넘어오면서 먹히질 않아서 한참 찾다가 발견하였다. VScode의 왼쪽하단 톱니바퀴를 클릭 > Keyborad Shortcuts > "cursorEndSelect" 검색 아래와 같이 default 단축키 값이 나온다. shift + command + right(화살표 오른쪽) 커서가 만약에 코드 라인 제일 끝에 있다면, "cursorHomeSelect"의 기본 단축키 값인 shift + command + left(화살표 왼쪽) 으로 해당 한 줄을 드래그할 수 있다. 참고 링크 : VSCode 단축키 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.p..
[Mac] 화면 캡처 및 기록 단축키 화면 캡처 및 기록 단축키는 모여있다. 전체 화면 캡처 : command + shift + 3 부분 화면 캡처 : command + shift + 4 화면 영상 기록 : command + shift + 5 화면 영상 기록은 어떻게 사용하는 것일까 🤔 command + shidft + 5를 누른과 동시에 마우스 화살표 모양 대신 카메라 모양이 나온다. 기록할 모니터에서 한번 클릭하면 다시 마우스 화살표 모양이 나오는데, 그 때부터 해당 화면의 사용자 동작을 녹음한다. 녹음을 끝내고 싶을 때 command + ctrl + esc 를 누르게 되면 전체 또는 부분 화면 캡처를 마치면 화면 오른쪽 하단에 나오는 축소판 화면이 나오면서 영상 녹음이 끝난것을 알 수있다. 다운로드나 데스크탑 영역에서 작업물을 확인 가..
[git] Command Line에 작업 반영 명령 줄곧 VSCode 터미널(커멘트 라인)에 명령어를 입력하여 작업물을 커밋하곤 했었는데 소스트리라는 GUI를 사용하게 되면서 명령어 입력하여 커밋하는 순서를 잊진 않을까 하여 기록으로 남기고자 한다. 😀 git status git add . git commit -m "커밋 내용" origin main git pull origin main git push origin main 여기서 main은 디폴트 브랜치를 뜻한다. 최근에 master에서 main으로 변경되었다. master는 종속의 관계 의미가 있기 때문에 평등?한 의미를 위해서 main으로 변경하였다고 하지만 실무에서는 master로 쓰이는 곳이 많다. 네이밍 변경에 관련해선 아래 링크를 참고해도 좋다. https://github.com/github/..
[plugin] swiper 중복 사용 tablet과 mobile 환경에서 슬라이더 플러그인 클래스는 동일한데 분리되어 보여야할 경우가 있다. 그럴 때 유용하게 쓰일수 있는 스크립트를 공유한다. 해당 슬라이더 개수를 파악하여 인덱스를 이용해 각각의 슬라이더에 자바스크립트로 아이디 값을 할당 후 스와이퍼를 동작 시킨다. html javascript $('.category-add-slider').each(function (i, v) { let sliderName = 'slider' + i; $('.category-add-slider')[i].id = sliderName; let sliderId = '#' + sliderName; let categoryAddSlider = new Swiper(sliderId, { loop: true, autopla..

티스토리툴바