본문 바로가기

👨‍🚀 | OTHERS21

VSCODE 변수, 주석 등 코드 색상 설정하기 VSCODE의 변수, 주석 등의 코드 색상을 지정하는 방법을 알아보았다! 1. settings.json 파일 열기 ctrl + shift + p -> settings 검색 -> Preferences: Open Settings (JSON) 클릭 2. 프로퍼티 적용 "editor.tokenColorCustomizations": { "textMateRules": [ { "scope": "범위 지정", "settings": { "foreground": "#색상코드", "fontStyle" : "이텔릭, '굵게', '밑줄' 또는 '취소선 등" } } ], } 위의 내용을 적용해 주면 되는데 이때 scope를 쉽게 알아내는 방법이 있다. 3. 편집기 토큰 및 범위 검사 (꿀팁!) ctrl + shift + p ->.. 2022. 3. 1.

나의 첫 웹사이트 만들기_(3) 코드 🔽 https://github.com/Bluishhot-Star/WEB/tree/master/Firstpage 이번에는 JS를 처음으로 적용시켜보았다. 아직 react나 vue를 다뤄보지 않아서 vanilla JS로만 구현을 해볼 예정이다. 그 처음으로 스크롤을 한 번에 올려주는 버튼을 만들어보았다. Back-to-top 버튼 화살표 아이콘은 FontAwesome에서 가져왔다. https://fontawesome.com/icons 화살표 뒤의 둥근 원에는 position: fixed 를 적용해서 문서의 흐름을 벗어나게 하였고, z-index: 999로 최상단에 위치하도록 했다. 버튼::after에는 다음과 같이 적용을 해주어서 아이콘을 적용했다. #backtotop::after{ content : .. 2022. 2. 25.

나의 첫 웹사이트 만들기_(2) 코드 🔽 https://github.com/Bluishhot-Star/WEB/tree/master/Firstpage 저번에 이어서 웹사이트를 완성해 보았다. 아직 JS는 적용하지 않은 상태로, HTML과 CSS만으로 만들어졌다! 1. 나의 애정하는 리스트 오버시 효과 블록이 살짝 올라가서 오버를 했다고 인지하도록 효과를 주었다. 만약 내부 내용이 길어졌을 때에는 말줄임을 표시하도록 설정하였다. .card-title{ width: 220px; /*설정해주지 않으면 말줄임 속성 X*/ white-space: nowrap; /*공백에 대해서 감싸지 않기(공간을 넘어서도 줄바꿈 X)*/ overflow:hidden; /*넘치면 숨기기*/ text-overflow: ellipsis; /*말줄임 표시*/ } 위의 .. 2022. 2. 24.

나의 첫 웹사이트 만들기_(1) 현재 JS를 제대로 배우지 않은 상태에서 HTML과 CSS만으로 웹페이지를 구성해보기로 했다. 어떤 주제로 만들어볼지 고민을 했는데 마땅히 할 것이 없어서 나에 대한 소개페이지를 만들기로 했다. 코드 🔽 https://github.com/Bluishhot-Star/WEB/tree/master/Firstpage 계획 위의 청사진처럼 만들어볼 계획이다! 1일차 헤더 부분과 소개 섹션, 스킬 섹션을 만들어보았다! flexbox를 연습해보기에 아주 좋았다! 헤더의 position을 fixed로 설정하면 float되어 있어서 그 다음에 나오는 요소는 그 아래에 배치가 된다. 그 해결법으로 margin을 header의 높이만큼 적용을 시켜주었다. 마우스를 올렸을 때 다음과 같은 효과들을 넣어주었다. 1. 블로그 환.. 2022. 2. 4.

티스토리 스킨 커스텀! (w. HTML & CSS) html과 css를 어느 정도 배워서 드디어 이 블로그를 내 입맛대로 바꿔볼 수 있게 되었다! 그동안 염원해왔던 것들을 만들어보았고 점점 추가하거나 제거할 예정이다. 직접 바꿔보니 너무 재밌고 계속 더 공부하고 싶어졌다! 티스토리도 계속 좋은 방향으로 바꿔보면서 얻어낸 경험으로 나의 웹사이트도 제작해볼 예정이다. 1. 모바일 환경 카테고리 초상화 변경 초상화의 크기를 바꾸어 주었다. 바꾼 코드 @media screen and (max-width: 767px) #aside .sidebar-1 .profileBox ul li { width: 100%; height: 17em; } 미디어 조건을 통해서 모바일 환경의 해상도의 경우에 해당 선택자에 속성을 부여해주었다. 2. 글꼴 변경 바꾼 코드 @import .. 2022. 1. 31.

[Git] Git 명령어 모음 (for me) 내가 주로 사용하는 것들 git add . - 깃의 관리 하에 모든 파일을 두기 git status - 현재 git의 관리 하에 있는 파일들의 상태 보기 git commit -m "커밋메시지" - 수정 사항 커밋하기 git remote - 추가한 원격 레파지토리 이름 반환 git branch - 로컬 브랜치 반환 git checkout (브랜치명) - 해당 브랜치로 넘어가기 git push (원격명) (브랜치명) - 브랜치를 원격에 올리기 --> 깃허브 새로고침 후 브랜치 클릭 --> 추가됨 git pull (원격명) (브랜치명) - 깃허브에서 다운받아야 할 것 로컬로 다운받기 그 외 명령어들! (계속 추가 중) git remote add "원격명" "깃허브 주소" - 현재 github 레파지토리를 지정.. 2022. 1. 30.

윈도우에서 wget 사용하기! wget은 리눅스 계열의 명령어 이게 때문에 윈도우에서 사용을 하기 위해서는 따로 설치가 필요하다! 해결법 https://eternallybored.org/misc/wget/ 위의 링크에서 wget을 다운받는다! 그 후 exe파일을 C:\Windows\System32 에 넣어주면 끝!! 2022. 1. 18.

HTML & CSS 활용 프로젝트_ 고양이 댄스 애니메이션 만들기 코드 *,*::after,*::after{ box-sizing: border-box; } .container { width: 200px; height: 150px; border: 2px solid #000; animation: background 2s linear 0s infinite normal ; position: relative; } .ground { width: 196px; height: 45px; bottom: 0px; position: absolute; background: rgba(37, 37, 37, 0.884); } .wall { width: 190px; height: 130px; left: 5px; background-size: contain; background-repeat: no-r.. 2022. 1. 16.

HTML & CSS 활용 프로젝트_ 버튼 조작 게임 만들기 지금까지 배운 내용만을 활용하여 버튼 조작을 할 수 있는 간단한 게임을 만들었다! 코드 github(https://github.com/Bluishhot-Star/WEB/tree/master/HTML%26CSS/Btn_game) KASSID GAME VICTORY! *, *::after, *::before { box-sizing: border-box; } .title { width: 325px; text-align: center; font-weight: bold; font-size: 25px; } .game { width: 325px; height: 380px; padding: 10px; position: relative; border: 2px solid #000; background-color: gray.. 2022. 1. 14.

이전 1 2 3 다음

티스토리툴바