프로그래밍에 해당하는 글 17

  1. HTML, JS 이미지 클릭하면 새 탭으로 열기(feat. 티스토리)2022.12.24
    수성비전자방입니다. 카카오 데이터센터 화재 이후 티스토리에 jQuery 3.5.1이 적용되면서 라이트박스(Lightbox. 이미지를 클릭하면 크게 볼 수 있는 기능.)에 오류가 발생했습니다. 라이트박스는 jQuery 1.12.4에 의존적이라는군요. 'jQuery 3.5.1에 호환되는 라이트박스가 있지 않을까?'라고 생각했는데 라이트박스 자체가 오래 전 업데이트가 끊겼네요. 그래서 저는 이미지를 클릭하면 새 탭으로 크게 볼 수 있도록 소스코드를 만들어 보았습니다. HTML, CSS, Javascript를 모두 사용하며, 단 jQuery는 사용하지 않습니다.(제가 jQuery를 잘 모르므로...) 티스토리를 기준으로 설명하지만 티스토리를 운영하지 않으시더라도 기능 구현하실 때 참고하실 수 있을..
  2. Visual Studio Code 터미널 설정 방법(프로필, 실행 파일 등)(2)2022.11.07
    수성비전자방입니다. Visual Studio Code에서는 컴파일(compiling) 또는 번역(interpreting)을 위해 터미널을 사용할 수 있는데요, 이 터미널에 프로필을 추가하거나 글씨 크기를 바꾸는 등 활용 방법에 대해 공부한 것을 기록하겠습니다. 목차 1. 터미널을 편집기 영역으로 이동 2. 터미널 프로필 설정 2.1. 기본 프로필 설정(terminal.integrated.defaultProfile.windows) 2.2. 새 프로필 추가, 실행 exe 파일 지정(path) 2.3. 터미널 시작 경로 및 args 지정(args) 2.4. args 대신 powershell scirpt 사용(-file) 2.5. 터미널 탭 이름 지정(overrideName) 2.6. 자동으로 추가된 프로필 숨..
  3. Visual Studio Code 확대/축소 하기(Mouse Wheel Zoom 설정)2022.11.04
    수성비전자방입니다. Visual Studio Code를 사용하다 보면 글씨가 작아서 확대를 하고 싶을 때가 있습니다. Visual Studio 같은 경우에는 Ctrl++, Ctrl+-를 이용해서 확대/축소가 가능한데요, Visual Studio Code에서 그렇게 했다가는 상단의 메뉴 모음까지 다 커져 버립니다. 결과적으로 소스코드를 보는 화면이 작아진다는 것이죠. 그래서 따로 설정을 해 주고, 마우스 휠로 확대/축소를 해야 합니다. 오늘은 그 방법을 알아보겠습니다. 지금부터 시작! 1. 왼쪽 아래의 설정 아이콘을 눌러 주세요. 2. 설정으로 들어갑니다. 3. Mouse Wheel Zoom을 검색합니다. 4. 해당 기능을 켭니다. 마우스 휠을 사용할 때 'Ctrl' 키를 누르고 있으면 편집..
  4. [Git 설치 및 사용법]4. 원격 저장소(GitHub) 사용하기2022.09.21
    수성비전자방입니다. 지난 글에 이어서 Git에서 원격 저장소를 사용하는 방법을 알아보겠습니다. 원격 저장소는 여러 가지가 있는데, 이 글에서는 GitHub를 사용해 보겠습니다. 목차 1. 설치 2. Git 기본적인 사용법(init, status, add, commit) 3. branch 4. 원격 저장소(GitHub) 사용하기(현재 글) 4.1. git remote add 4.2. git push 4.3. git remote remove 4.4. git clone 4.5. git pull 4.6. 타인의 오픈소스에 기여하기(fork와 pull request) 4.7. 협업 방법(fork 없이 pull request) 4.8. GitHub repository 공개/비공개 설정, 삭제 4.9. 글 마무리 4..
  5. Git 설치 및 사용법 1~32022.09.19
    수성비전자방입니다. 오늘은 Git을 설치하고 사용해 보겠습니다. Git을 사용하면 버전 관리, 분산 개발 등이 편리해집니다. 특히 요즘은 개발자들이 GitHub를 많이 사용하므로 Git에 대해 알아보려고 합니다. 목차 1. 설치 2. Git 기본적인 사용법 2.1. git init 2.2. git status 2.3. git add 2.4. git commit 2.5. 파일 수정하기 3. branch 3.1. branch 생성과 전환(checkout) 3.2. git merge 3.3. merge 중 충돌 발생 시 3.4. branch 삭제 *. 글 마무리 **. 참고 자료 4. 원격 저장소(GitHub) 사용하기(2022. 09. 21. 업로드 예정) 1. 설치 1.1. https://git-scm.c..
  6. 티스토리 스킨에 로그인 버튼 추가하기(비로그인 시에만 보임)(2)2022.07.16
    수성비전자방입니다. 오늘은 HTML DOM을 이용하여 티스토리 스킨에 로그인 버튼을 추가해 보겠습니다. 로그아웃 버튼은 추가하지 않았으며, 로그인 하지 않은 경우에만 보입니다. 여러분이 원하시는 형태와 이 글에서 설명하는 것이 다를 가능성이 커서 적용 결과부터 보여드리겠습니다. 목차 1. 적용 결과 및 구현 계획 2. 티스토리 스킨에 로그인 버튼을 추가하는 방법 1. 적용 결과 1.1. 티스토리에 로그인 하지 않은 채로 댓글 입력하는 곳에 가면 '티스토리 계정으로 댓글을 다시려면 여기를 클릭하세요.'라는 문구가 나옵니다. 이것을 클릭하면 1.2. 티스토리 로그인 창이 나옵니다. 1.3. 로그인을 완료하면 로그인 전에 보던 페이지로 돌아옵니다. 사실 스크롤은 맨 위로 이동하게 되므로 다시 스..
  7. G++로 C++ 컴파일(feat. GCC)2022.07.02
    수성비전자방입니다. 오늘은 C++ 컴파일 하는 방법을 알려드리겠습니다. 목차 1. 서론 1.1. 사전 준비 및 예제 코드 1.2. C++ 빌드 과정 1.3. GCC로 C++ 컴파일 하는 법 2. 본론 2.1. G++로 C++ 컴파일 하는 기본적인 방법 2.2. -o: 실행파일명 지정 2.3. -c: Linking 전까지만 진행, 목적 파일(*.o) 얻는 법 2.4. -g: 디버깅을 위한 옵션 1. 서론 1.1. 사전 준비 G++를 설치해야 합니다.(제목의 'feat. GCC'만 보고 들어오신 분이 있을지 모르겠지만, 보통 C++은 GCC가 아니라 G++로 컴파일 하죠.^^) Windows를 사용하신다면 MinGW-w64를 설치하시면 됩니다. https://sourceforge.net/pro..
  8. [highlight.js]티스토리 코드블럭 스타일 변경, 줄번호 넣는 법2022.06.20
    수성비전자방입니다. 저는 과거에 블로그 글에 코드블럭을 쓸 때 Color Scripter(관련 글)을 썼었지만, 얼마 전부터 티스토리의 코드블럭 기능을 이용하고 있습니다. 티스토리의 코드블럭은 highlight.js와 함께 사용할 수 있도록 되어 있습니다. 티스토리에서 코드블럭을 쓰면 , 태그로 감싸지며, highlight.js가 이 부분을 예쁜 코드블럭으로 만들어 주는 것입니다. 예를 들어 HTML에 대한 코드블럭은 아래와 같이 되는 거죠. ... (출처: https://highlightjs.org/usage/) 그러므로 이 코드블럭을 제대로 쓰려면 자바스크립트, CSS를 함께 적용하는 것이 좋은데요, 오늘은 highlight.js와 줄번호를 적용해 보겠습니다. 목차 1. 티스토리의 코드 문법 강조 플..
  9. [Visual Studio Code]5. C언어 파일 분할 컴파일(GCC)(6)2022.05.13
    수성비전자방입니다. 오늘은 Visual Studio Code 시리즈 중 하나로, C언어 파일 분할 컴파일을 하는 방법을 알아보겠습니다. 목차 1. 설치 2. C언어 컴파일 3. C언어 디버깅(gcc, gdb 디버거) 4. C언어 빌드 및 디버깅 5. C언어 파일 분할 컴파일(현재 글) 5.1. 사용자 정의 헤더 파일 5.2. 예제 소스코드 5.3. GCC 파일 분할 컴파일 5.4. VS Code 파일 분할 컴파일 5.5. 글 마무리 5.6. 참고 문헌 이 글은 VS Code 카테고리에 올라와 있지만, 1~4편은 Windows 카테고리에 올라가 있는 점 참고하시기 바랍니다. 5.1. 사용자 정의 헤더 파일 C언어 파일 분할 컴파일이 무조건 사용자 정의 헤더 파일을 이용하는 것은 아니지만, 이 글에서는 사용..
  10. 엠원리액트 댓글에 프로필사진 보이게 하기2022.05.02
    수성비전자방입니다. 티스토리 스킨 중 '엠원리액트'라는 스킨이 있습니다. 지금 수성비전자방 스킨도 엠원리액트 기반입니다. 엠원리액트 스킨에는 단점이 있는데, 그것은 바로 댓글을 단 사람의 프로필사진이 보이지 않는다는 것입니다. 제가 단 댓글인데 제 프로필사진이 보이지 않습니다. 오늘은 엠원리액트 스킨에서 댓글 프로필사진이 보이게 수정해 보겠습니다. 1. index.html에서 주석 코멘트 리스트 s를 찾습니다.(Ctrl+F를 이용하면 편하겠죠?) 2. 이 있을텐데 과 사이에 아래 소스코드를 추가해 줍니다. (alt 태그 내용은 임의로 작성하셔도 됩니다.) 3. style.css에서 주석 댓글 보기를 찾습니다. 4. 아래 소스코드를 추가합니다. .comment_in img {width: 64..