본문 바로가기

👨‍🚀 | OTHERS/개발일지9

24년 상반기 회고 1. 고민이 많았던 상반기오랜만의 블로그 포스팅을 24년 상반기 회고와 함께 해보려고 한다!우선 올해 지금까지 한 일을 조금 목록화 해보면- GoogleDeveloperStudentClubs 활동- Googld Solution Challenge 참가- 캡스톤 디자인 12인 프로젝트 진행 중- Spirokit 외주 작업 1년 계약 완료- VisionUp 프로젝트와 함께 2024 서울 열린데이터광장 공공데이터 활용 창업경진대회 참가- Monit 프론트엔드 인턴 시작 (2일 전) 이정도인 것 같다. 올 한해를 시작하면서 사실 커리어에 대한 고민을 정말 많이 했었다.백엔드, 프론트엔드, Flutter로 모바일 개발, AI, ...하고 싶은 것도 많고 뭔가 해야할 것만 같은 것도 많아서 머리가 아팠었다. 하지만.. 2024. 6. 16.

나의 첫 웹사이트 만들기_(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.

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.

웹 개발 공부 devlog 스파르타 코딩클럽 서포터즈 활동을 하면서 들었던 강의의 주차별 회고록이다! 전문적으로 들어가기 보다는 실습 위주의 강의여서 개념적으론 아쉬웠지만 '선 실습 후 이론'의 의도는 확실하게 느낄 수 있었다. 다시 말해서 일단 만들고 보니깐 왜 그런지 궁금해서 찾아보게되는! 그래서 수업을 듣고난 뒤 구글링하면서 궁금한 것들을 해결하는 방식으로 공부했는데 효율적이기도 하고 재밌었다! ▼ 나의 회고록! https://velog.io/@dev_kassid/web1 https://velog.io/@dev_kassid/web2 https://velog.io/@dev_kassid/web3 https://velog.io/@dev_kassid/web4 https://velog.io/@dev_kassid/web5 2021. 12. 27.

가상환경 설정(venv) (w.VSCODE & bash) 가상환경(virtual environment) 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경입니다. 예시로 설명을 하자면 파이썬으로 어떤 프로그램을 제작을 할 때 pygame이나 numpy등 다른 사람이 개발한 라이브러리를 설치해서 만드는 경우가 있습니다. 이는 아주 편리하지만 의존성이 생기게 됩니다! 이로 인해서 배포를 했을 때 호환성의 문제가 생기게 될 수 있습니다. 모듈에도 여러가지 버전이 있고, 파이썬 인터프리터의 버전에 따라서도 차이가 있기 때문이죠, 우리는 이 문제를 해결하기 위해서 가상환경 이라는 방법을 사용하게 됩니다. 특정한 프로그램 실행을 위해서 환경을 따로 생.. 2021. 12. 3.

이전 1 다음

티스토리툴바