본문 바로가기

분류 전체보기

 (244)
[VSCode] ctrl + click 시 나오는 링크 해제 컨트롤을 누르고 클릭을 할시 그에 해당하는 링크로 넘어갈 것인지에 대해 "Follow link" 토스트 코멘트가 나온다. 거슬릴경우 settings에서 체크를 해제해주면된다. settings는 좌측 상단에 톱니바퀴 아이콘을 눌렀을 시 나온다. 눌렀을 때 Settings에서 follow link라고 검색한 후, Editor: Links의 체크를 해제한다.
[Javascript] 오늘 하루 팝업 닫기 쿠키를 구워서 오늘 하루 팝업 창을 닫을 수 있다. setCookie 와 getCookie 함수를 사용하여 오늘하루닫기 클릭시 하루동안 창이 안열리게 할 것 이다. 먼저 팝업 창 HTML 마크업 작업을 한다. 오늘하루닫기 닫기 동의하고 신규 서비스 사용하기 우린 a태그의 오늘하루닫기를 클릭 시, 클릭 한 기준으로 부터 24시간 동안 해당 팝업 창을 보이지 않게 할 것이다.
[css] 모바일 가로, 세로 모드 미디어 쿼리로 해결 데스크탑 보다는 모바일 기기로 인터넷을 접하는 요즘, 모바일 전용의 퍼블리싱 요청이나 반응형(하나의 소스로 PC와 Mobile 디바이스 별로 보이게) 요청이 들어온다. 그 중에 모바일 가로, 세로 모드 조건에서만 보일 수 있도록 하는 요청이 들어오는데, 그럴 땐 미디어쿼리를 사용하여 해당 상황에 맞춰서 스타일을 추가하면 된다. @media (orientation: portrait) { /* 세로 모드 일 경우 */ } @media (orientaion: landscape) { /* 가로 모드일 경우 */ } portrait는 디바이스가 세로 모드일 경우를 뜻하며, landscape는 디바이스가 가로 모드일 경우를 뜻한다.
[github] push 전 commit 내용 수정하기 급하게 작업물을 깃허브에 올리다가 커밋 내용이 빠질 수 있다. 그럴땐 git commit --amend 명령을 실행하면 아래와 같이 편집할 수 있게 나온다. 여기서 i(끼워넣기) 키를 눌러 수정한다. 그후 esc키를 누르고 :wq(쓴것을 저장후 quit.)를 누른다. pull과 push 까지 하면 해당 레파지토리 commit 상태 메세지가 수정한데로 반영되어 있음을 알 수 있다. 😮⁉ 만약 push까지 한 상태에서 해당 커밋 내용을 수정하고 싶으면, git push --force 으로 덮어쓰기를 한다. 만약, 아래와 같은 오류가 난다면, 추천해준 명령어대로 입력해본다. fatal: The current branch branchName has no upstream branch. To push the cur..
[css] display: table;로 정중앙 스타일 구현 display: flex;로 정중앙 스타일을 구현할 수 있지만 크로스 브라우징을 생각하면 여간 까다로운 스타일이 아닐 수 없다. display: table;는 말그대로 테이블 태그는 아니지만 이것을 테이블처럼 여기겠다 라는 의미를 지닌다. 정중앙 정렬을 display: flex; 뿐만 아니라 또다른 방법이 있다는 걸 공유하고 싶어 display: table;를 포스팅 한 것이다. display table 스타일을 사용하여 정중앙 정렬을 원할 경우 해당 대상을 감싸고 있는 부모가 필요하다. 정중앙정렬을 위한 텍스트입니다. html태그를 위와 같이 먼저 설계 후, 아래 처럼 스타일을 주면 미리보기 처럼 정중앙으로 스타일이 구현될 것이다. .show-table { display: table; backgroun..
[css] 변수로 색상 지정하기 sass를 이용하면 변수에 색상값을 지정하여 호출할 수 있다. 하지만 개인적으로 sass는 유지보수 부분에서 조금 까다롭게 느껴진다. 예를 들어 하나의 스타일을 바꾸기 위해선 그의 부모나 관계를 역으로 따라 올라가서 파악하는데의 시간도 소요되며 인수인계시 소스를 파악하는데 어려움이 따른다. sass도 css를 기반으로 하는 것이기에 순수 css 선호한다. 작업 포지션이 독립적으로 퍼블리싱을 하고 있기 때문인지도 모른다. 만약 협업해야하는 상대가 2명 이상이 있을 상황이였을땐 생각이 달라질 수도. 서론이 길었다. css 자체에서 root에 변수로 색상을 지정하여 var 형태로 호출하여 사용할 수 있다. :root { --point-color-orange: #ff543a; --point-color-pink:..
[ajax] 서버 응답 중 알게 된 속성 포트폴리오를 재정비 하던 중 기존엔 php include를 사용하여 간단하게 헤더와 푸터를 연결했었다. 하지만 퍼블리셔로서 html과 javascript를 사용하여 include하고 싶었다. 따라서 html include로 구글링을 하던 중에 아주 유용한 글을 발견하였다. kyung-a.tistory.com/18 일반 HTML 파일에 HTML include/imports 하는 방법 프론트엔드 개발자가 아닌 마크업을 위주로 하는 웹퍼블리셔들은 대부분 일반 html, css 파일로 작업을하게 됩니다 페이지가 많아지다보면 중복되는 내용이 많아지죠? 특히 header와 footer는 거의 kyung-a.tistory.com 이 분도 나와 같은 고민을 한것 같아서 공감이 갔고 시원한 결론까지 주셔서 너무 감사했다..
[jQuery] .offset(); 이용하기 작업을 하다가 특정 element의 y스크롤 위치를 알아야 할 경우가 있다. 그럴때 유용하게 쓰이는 소스이다. 직접 코딩한 스크립트로 도움이 되면 좋겠습니다. function offsetShow(){ var eleOffset = $(element).offset(); console.log(eleOffset); console.log('top', eleOffset.top); } 콘솔 출력 결과 - 첫번째 콘솔 : {top: 293, left: 161} - 두번째 콘솔 : top 293 여기서 숫자는 임의 숫자로 예시용으로 참고하면 될것 같습니다. :)

티스토리툴바