본문 바로가기

IT 개발85

[CSS] div 위에 이미지 및 아이콘 올리기와 사진 영역에 꽉 채우기 프로젝트 중 아래의 기본 프로필 이미지 위로 업로드할 이미지를 드래그하면프로필 사진이 대체되는 드래그 앤 드롭 기능을 추가하였다사실 아래의 기본 이미지도 많이 뒤틀렸는데 position 속성을 이용하여 딱 맞게 수정했다 (div 위에 이미지를 올릴 수 있는 코드는 밑에서 참고)  원래 아이콘만 배치해놔서 큰 문제가 없었다그러다 새로운 프로필 사진으로 등록할 이미지를 프로필 위에 드래그하니까이미지가 프로필 경계선 위로 올라가지 않아서 옆에 배치되거나,올라가더라도 프로필 경계선과 맞지 않는 문제점이 생겼다  그렇다면 div 위에 svg 아이콘 및 img 이미지 요소를 어떻게 원하는 위치에 올릴 수 있나?  기본 프로필 아이콘 이미지  1. 가장 밑으로 내려 줄 배경으로 (여기선 profile_wrapper .. 2021. 7. 12.
[js 초미니프로젝트] Shopping-list 완성 기본 중에 기본 미니 프로젝트인 바닐라 자바스크립트로 만든 todo list 같은 shopping list! 상단에 프로젝트명을 작성하고 사용한 기술 스택과 어떻게 작동하는지 스크린샷을 첨부하였다 근데 README에 이미지 첨부는 딱히 문제가 없는데 짤막한 영상 촬영한 걸 다른 사이트에서 gif형식으로 바꾸고 등록하니까 속도 저하가 너무 심하다.. 보고 있는데 답답할 지경이라 다른 방법을 찾아보고 재업로드할 예정이다 디자인은 이곳저곳 사이트를 보면서 todo list design by Goutham 을 참고하였다 엄청 심플하면서 포인트 컬러가 살짝 들어가 있어서 더 맘에 든다 여기에 작성했던 건 내가 리드미에 수정 및 보완해야 할 리스트로 올렸었다 하루에 하나씩 해결했었는데 작동이 될 때마다 그 뿌듯함은.. 2021. 7. 7.
④ 이전에 사용하던 프로젝트 폴더 가져오기 import & export Git에 올렸다면 클론 하여 가져올 수 있지만 클론을 안 했다는 가정하에 다른 방법으로 프로젝트를 가져오는 방법을 알아보자 우선 스위치 워크스페이스로 다른 프로젝트로 이동한다 바탕화면에는 MyUSB라는 새로운 폴더를 생성한다 (usb라고 생각하기로..!)  마우스 우클릭하여 Export 클릭  General -> file system  빼내고 싶은 파일을 클릭한다(Servers는 빼면 안됌. 이건 설정하는 것) 그리고 디렉토리에서 MyUSB로 경로설정 후 Finish 클릭  이렇게 하면 프로젝트가 폴더로 빠져나와있다 이제 스위치 워크스페이스로 다시 AnotherComputer로 이동하여 USB 폴더의 프로젝트 폴더를 모두 가져 올 차례이다  이번엔 file->import  이미 존재하고 있는 파일을 워크.. 2021. 7. 5.
③ 이클립스 워크스페이스 변경과 초기 설정 (인코딩, 포트번호 등) 저번에 커밋 메시지 작성과 커밋까지 단계를 끝냈다여기서 나의 프로젝트를 깃헙에 올리고 싶다면?깃헙 로그인하고 깃헙 리포지토리 생성 후 푸시하면 된다 참고로 깃헙에서 리포지토리 생성할 때 밑에 Add a README file X리드미 파일 생성을 이유는 저장소 생성할 때 이미 존재하는 내용을 올려야 해서완전히 빈 저장소로 생성해야 한다(만약 리드미 만들면 리드미 추가된 커밋이 생김)  프로젝트 마우스 우클릭 -> Team -> push branch master  저장소 주소를 복사했었다면 자동으로 저장소 주소가 입력되어있다리모트 이름은 오리진 이라는 저장소가 디폴트 이름이며 변경이 가능하다 그리고 Preview 누르고 마지막에 Push 누르면 완료! 다시 깃 환경으로 변경하고. gitignore 파일에서 .. 2021. 7. 4.
② 이클립스 git 관리의 시작과 .gitignore 파일 설정하기 저번 포스팅에 이어 이번에는 이클립스에서 git으로 관리하는 작업에 대해서 어떻게 처리가 가능한지 알아보자  우선 Sampleproject 마우스 우클릭 -> Team -> Share project 클릭을 한다  저번에 만들었던 MyGit에서 git 저장소로 사용될 새로운 폴더를 생성한다새로운 폴더명의 이름은 sample로 만들었다 (위의 acorn2020_java는 이미 다른 프로젝트에서 사용하고 있는 git 저장소라 여기서 만들면 안 된다.)  상단의 체크박스 '~in parent folder of project'는 워크스페이스에 생성하는 거라 클릭하면 안 된다Repository는 옆에 Create 버튼 클릭하여 저장소로 생성할 폴더를 직접 클릭해준다 (sample 폴더 경로로 설정하기)그리고 Fin.. 2021. 7. 3.
① 로컬저장소 생성 후 이클립스 초기 세팅 이번 포스팅 주제는 git 로컬저장소 생성 후 이클립스 초기 세팅부터외부 프로젝트를 clone 하는 다양한 방법 (import export)에 대한 내용을 다룰 예정이다우선 가장 처음으로 내 컴퓨터에 로컬저장소를 생성하는 방법과 이후에 이클립스의 초기 세팅방법에 대해 작성하겠다  1. 나의 컴퓨터에 로컬저장소 생성  바탕화면에 git저장소 생성하려면 우선 폴더를 만들어준다.여기선 MyGit이란 폴더를 만들었는데, 이 폴더에 바로 git을 생성하는 것이 아닌폴더 안에 새로운 폴더(여기선 acorn2020_java)를 하나 더 생성하여 여기를 git 저장소로 만들어 준다  그 후에 이클립스에서 File -> new -> Dynamic web project 클릭한다  프로젝트의 이름은 SampleProject.. 2021. 7. 3.
반응형

티스토리툴바