'coding' 카테고리의 글 목록 (5 Page)

[CSS] flex를 이용한 가운데 정렬

flex를 이용해 가운데 정렬을 해보겠습니다. 1. flex display:flex div{ display:flex; } ① display:flex; 먼저 flex를 이용한다는 의미는 display에 flex를 적용한다는 의미입니다. 아마 여러분이 중앙 정렬을 하고 싶은 곳에 위와 같이 display:flex;를 적어도 아무 일도 일어나지 않을 겁니다. 위의 이미지처럼요. flex는 옵션 값을 설정해주어야 가로, 세로 모두 중앙 정렬을 해줄 수 있습니다. 아래에서 같이 옵션 값을 정해봅시다. 2. 옵션 flex 옵션 div{ flex-direction: column; } ① flex-direction direction은 방향이라는 뜻으로 flex-direction옵션은 가로 방향으로 정렬할지 세로 방향으..

coding/html + css · 2022. 8. 1. 07:30

[Github] 소스트리(sourcetree) 깃허브 토큰 연동 방법

소스트리 깃허브 토큰 연동 방법을 알아보겠습니다. 1. 소스트리 오류 소스트리 Push시 발생 오류 ① 오류 메시지 git -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks push -v --tags origin main:main remote: Permission to [깃허브 주소] denied to [유저] fatal: unable to access 'https://github.com[깃허브 주소]': The requested URL returned error: 403 Pushing to https://github.com[깃허브 주소] 위와 같은 오류 메시지가 발생하셨다면 소스트리에서 깃허브의 토큰을 요구하는 것입니다. ..

coding/개발 팁 · 2022. 7. 28. 07:30

[Github] 깃허브 클론 하는 법 - 연동하기

깃허브 클론 하는 법을 알아보겠습니다. 쉽게 말해 내 컴퓨터와 깃허브를 연동해보겠습니다. 1. 소스트리 소스트리를 이용한 깃허브 클론 하는 법 https://www.sourcetreeapp.com/ Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac. www.sourcetreeapp.com ① 소스트리 다운로드 소스트리를 이용해 깃허브 클론을 진행할 것이기 때문에 위의 주소에 접속해 소스트리를 다운로드하여주세요. ② 깃허브 주소 복사 깃허브에서 자신의 저장소로 들..

coding/개발 팁 · 2022. 7. 27. 07:30

css flex 가로 정렬

분명히 flex에 row를 적용했는데 가로로 정렬되지 않고 세로로만 정렬된다면 이 포스팅을 자세히 봐주세요. 1. 문제점 발견 ① 가로로 정렬되지 않은 문제점 flex-direction: row;를 적용하면 요소가 가로로 나란히 정렬되어야 하는데 위의 이미지처럼 여전히 세로로 정렬되어있는 문제를 발견했습니다. *보시기 편하시라고 색과 위치를 조정했습니다. 실제 적용 색과 다를 수 있습니다. header{ display: flex; flex-direction: row; justify-content: center; align-items: center; } ② css 코드 살펴보기 적용했던 css 코드입니다. flex 관련 코드들이 잘 들어간 모습입니다. 값도 row로 잘 들어가 있고 어디가 문제인지 잘 모르..

coding/html + css · 2022. 7. 21. 07:30

vscode 유용한 단축키 빠른 행 이동

vscode 유용한 단축키 중 하나 빠른 행 이동을 단축키를 사용해서 해보겠습니다. 1. 빠른 행 이동 빠른 행 이동이란? vs code 유용한 단축키 중 하나인 행 이동 단축키 그렇다면 빠른 행 이동이란 무엇을 말하는 것일까요? 위의 이미지를 보면 대략적으로 짐작이 가능하시겠지만 원하는 행의 번호를 입력해 바로 이동하는 기능입니다. 예시로 사용한 파일은 길지 않아서 122줄 정도이지만 코드를 짜다보면 200줄은 훌쩍 넘어버리고 그러잖아요. 그럴 때는 이런 행 이동 단축키가 유용합니다. - - 이 단축키는 행 자체를 이동시키는 것이 아니고 행이 있는 곳으로 화면을 이동하는 단축키입니다. 혹시 행 자체를 이동하는 단축키가 알고 싶으시다면 아래 버튼을 클릭해주세요. 행 이동 단축키 2. vs code 유용한..

coding/editor · 2022. 7. 13. 07:30

coding 265