letsgojieun

프로젝트 중 아래의 기본 프로필 이미지 위로 업로드할 이미지를 드래그하면프로필 사진이 대체되는 드래그 앤 드롭 기능을 추가하였다사실 아래의 기본 이미지도 많이 뒤틀렸는데 position 속성을 이용하여 딱 맞게 수정했다 (div 위에 이미지를 올릴 수 있는 코드는 밑에서 참고)  원래 아이콘만 배치해놔서 큰 문제가 없었다그러다 새로운 프로필 사진으로 등록할 이미지를 프로필 위에 드래그하니까이미지가 프로필 경계선 위로 올라가지 않아서 옆에 배치되거나,올라가더라도 프로필 경계선과 맞지 않는 문제점이 생겼다  그렇다면 div 위에 svg 아이콘 및 img 이미지 요소를 어떻게 원하는 위치에 올릴 수 있나?  기본 프로필 아이콘 이미지  1. 가장 밑으로 내려 줄 배경으로 (여기선 profile_wrapper ..

css에서 selector에 스크롤바를 설정할 수 있다 . box { overflow : visible } visible은 아무것도 설정하지 않았을 때의 기본 옵션이다 . box { overflow : auto } 평소엔 안 보이다가 내용이 박스의 높이 또는 너비 이상으로 길어질 경우 스크롤바가 생성된다 . box { overflow-x : scroll } 가로축 스크롤바만 만들고 싶을 때 사용한다 . box { overflow-y : scroll } 세로축 스크롤바만 만들고 싶을 때 사용한다 . box { overflow : hidden } 내용이 박스의 공간을 넘아갈 시 넘어간 내용을 보이지 않게 한다 css 작업을 하면서 특정 영역에 스크롤바의 기능은 하지만 스크롤바는 보여주기 싫을 때 스크롤바를 ..

웹페이지의 디자인을 하면서 폰트는 절대 절대 빠질 수 없는 중요한 요소 중 하나이다 웹상에서 폰트를 가져올 때 가장 유명한 곳이 google fonts 가 아닐까 싶다 (무료인데 폰트도 정말 많고 다양하다) 인스타그램 폰트와 대략 비슷한 느낌이 있는 폰트를 찾고 싶었고 계속되는 스크롤 끝에 내가 원하는 느낌의 폰트를 하나 찾아냈다 우선 google fonts를 어떻게 나의 웹페이지 상에서 적용되게 할 것인지 알아보자 우선 구글폰트 사이트로 들어간다 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 그러면 정말 다양한 폰트들이 나오..

프로젝트를 하면서 a태그로 다른 페이지로 이동하는 링크를 걸어주었고, 이를 버튼처럼 꾸미고 싶었다 하지만! a 태그는 inline 요소라.. 생각보다 css를 활용하는 게 쉽지 않다 (물론 bootstrap 사용 또는 a 태그의 display를 block으로 설정하면 쉽게 해결이 가능하겠지만 ) 나는 다른 방법으로 a 태그 없이도 div 자체에 직접 링크를 걸 수 있는지 알고 싶었고 방법은 정말 간단했다 로 작성하여 간편하게 div에 원하는 주소로 가는 링크를 걸어줄 수 있다 참고로 a가 속한 inline 요소는 원래 지정돼있는 크기가 따로 있어서 width, height의 값이 적용되지 않고, margin, padding 값 설정이 좌우만 적용이 된다 (상하는 적용 X)

인스타그램을 보면 네비바 바로 밑에 그라데이션 효과의 테두리로 감싸진 유저 스토리를 볼 수 있다 처음에 봤을 땐 단순히 이미지에 보더를 주고 색을 그라디언트로 지정해주면 되는 줄 알고 시작했다가.. 보더에 그라디언트가 아예 적용되지 않길래 곧바로 구글링을 시작했다 검색 결과로 얻어 낸 것은 border-radius가 없다면 보더 색상으로 그라디언트 적용이 가능하다 하지만.. 내가 찾았던 수많은 예시를 보고 느낀 건 border-radius를 주면 보더에 그라디언트 적용이 안 되는 것 같다는 점.. 그래서 뒤에 요소를 하나 추가하고 이 요소의 배경색을 그라디언트로 지정해볼까 생각했는데 마침 나와 똑같은 과정을 겪다가 그렇게 해결하신 분이 계셨다! border-radius 속성이 있는 요소의 border를 ..

기본 중에 기본 미니 프로젝트인 바닐라 자바스크립트로 만든 todo list 같은 shopping list! 상단에 프로젝트명을 작성하고 사용한 기술 스택과 어떻게 작동하는지 스크린샷을 첨부하였다 근데 README에 이미지 첨부는 딱히 문제가 없는데 짤막한 영상 촬영한 걸 다른 사이트에서 gif형식으로 바꾸고 등록하니까 속도 저하가 너무 심하다.. 보고 있는데 답답할 지경이라 다른 방법을 찾아보고 재업로드할 예정이다 디자인은 이곳저곳 사이트를 보면서 todo list design by Goutham 을 참고하였다 엄청 심플하면서 포인트 컬러가 살짝 들어가 있어서 더 맘에 든다 여기에 작성했던 건 내가 리드미에 수정 및 보완해야 할 리스트로 올렸었다 하루에 하나씩 해결했었는데 작동이 될 때마다 그 뿌듯함은..

1. 항상 '페이지 소스보기'를 습관화하자 -> list.jsp에서 navbar를 include 하여 참조하고 있었음 그런데 navbar에도 로 형식이 들어가 있었고 이로 인해 list.jsp에는 총 2개의 html, body가 생김 마크업이 엉망이 됨 navbar같이 html 마크업에 include 해야 하는 jsp페이지의 경우 절대 html 마크업 넣지 않기!! 2. 원래 inline요소 안에 block요소 넣지 않음 하지만 태그는 inline요소지만 안에 블록 요소(ex.div) 가능 단, 앵커 태그에 한해서만 가능 3. 2주간의 첫 프로젝트라 마음이 급해서 지금 작성했던 부분을 되돌아보니 div 남발과 함께 class명도 통일성이 별로 없다 프로젝트하면서 html sementic tag에 대해 더..

Git에 올렸다면 클론 하여 가져올 수 있지만 클론을 안 했다는 가정하에 다른 방법으로 프로젝트를 가져오는 방법을 알아보자 우선 스위치 워크스페이스로 다른 프로젝트로 이동한다 바탕화면에는 MyUSB라는 새로운 폴더를 생성한다 (usb라고 생각하기로..!)  마우스 우클릭하여 Export 클릭  General -> file system  빼내고 싶은 파일을 클릭한다(Servers는 빼면 안됌. 이건 설정하는 것) 그리고 디렉토리에서 MyUSB로 경로설정 후 Finish 클릭  이렇게 하면 프로젝트가 폴더로 빠져나와있다 이제 스위치 워크스페이스로 다시 AnotherComputer로 이동하여 USB 폴더의 프로젝트 폴더를 모두 가져 올 차례이다  이번엔 file->import  이미 존재하고 있는 파일을 워크..

저번에 커밋 메시지 작성과 커밋까지 단계를 끝냈다여기서 나의 프로젝트를 깃헙에 올리고 싶다면?깃헙 로그인하고 깃헙 리포지토리 생성 후 푸시하면 된다 참고로 깃헙에서 리포지토리 생성할 때 밑에 Add a README file X리드미 파일 생성을 이유는 저장소 생성할 때 이미 존재하는 내용을 올려야 해서완전히 빈 저장소로 생성해야 한다(만약 리드미 만들면 리드미 추가된 커밋이 생김)  프로젝트 마우스 우클릭 -> Team -> push branch master  저장소 주소를 복사했었다면 자동으로 저장소 주소가 입력되어있다리모트 이름은 오리진 이라는 저장소가 디폴트 이름이며 변경이 가능하다 그리고 Preview 누르고 마지막에 Push 누르면 완료! 다시 깃 환경으로 변경하고. gitignore 파일에서 ..

저번 포스팅에 이어 이번에는 이클립스에서 git으로 관리하는 작업에 대해서 어떻게 처리가 가능한지 알아보자  우선 Sampleproject 마우스 우클릭 -> Team -> Share project 클릭을 한다  저번에 만들었던 MyGit에서 git 저장소로 사용될 새로운 폴더를 생성한다새로운 폴더명의 이름은 sample로 만들었다 (위의 acorn2020_java는 이미 다른 프로젝트에서 사용하고 있는 git 저장소라 여기서 만들면 안 된다.)  상단의 체크박스 '~in parent folder of project'는 워크스페이스에 생성하는 거라 클릭하면 안 된다Repository는 옆에 Create 버튼 클릭하여 저장소로 생성할 폴더를 직접 클릭해준다 (sample 폴더 경로로 설정하기)그리고 Fin..