Study/frontEnd (4) 썸네일형 리스트형 css 배경 이미지 넣기+블러 처리, div에 그림자 효과 넣기 오늘의 완성작~!! 끼햐~ 고작 가입화면 한장이지만 하루종일 고생해서 만들었다 ㅠㅠ 이미지도 나름 포토샵으로 보정해보고! 화면이 작아지면 옆에 있던 사진이 사라지고, 배경화면이 사진으로 뿅 바뀌는게 포인트! ㅎㅎ 모바일 화면이 바뀌는건 생각보다 만들기 엄청 쉬웠는데, 의외로 웹 화면에서 입력 폼이랑 사진이랑 나란히 뒀을 때 반응형으로 깔끔하게 구현이 안되서 넘 힘들었다... 계속 사진만 찌그러지고 ㅠㅠ input이랑 button에 width: 100%로 줘서 반응형 만들고, 사진은 찌그러지기 전에 적당한 크기에서 모바일 버전 화면으로 바뀌도록 @media screen and (max-width: 44em)을 써줌. 모바일 화면에서 옆에 있던 사진이 사라지는 건 간단하게 display: none; 으로! .. 유튜브 클론코딩 + 나이트모드 버튼.js https://github.com/HeesunParknl/YouTube-cloneCoding HeesunParknl/YouTube-cloneCoding Contribute to HeesunParknl/YouTube-cloneCoding development by creating an account on GitHub. github.com 유튜브 클론 코딩을 했다. 처음에 한 3~4시간 정도 혼자 고통받다가 유튜브 채널 드림코딩 한번 보고 다시 와이어 프레임부터 짜고.. HTML, CSS 끝낸 뒤에는 JS 응용해보겠다고 나이트모드 버튼을.. 생활코딩에서 배운거 + 구글 검색 총집합해서 만들어 냈다. 코드도 지저분하고 짜잘한 오류들도 보이긴 하지만 내 힘으로 자바스크립트를 써서 버튼을 만들어 냈다는데 감동 ㅠ.. css hr 경계선 꾸미기 내가 오늘 찾아 쓴 코드는 /* Inset, by Dan Eden */ hr.style-six { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } 출처는 https://css-tricks.com/examples/hrs/ 다양한 hr 경계선의 예시를 볼 수 있다. VS code에서 터미널 열기 & Git 업로드 VS code에서 터미널을 열어 깃에 업로드(push)를 할 수 있다. 우선 VS code에서 터미널 열기 메뉴 - View - Terminal 메뉴 - Terminal - New Terminal 또는 쓰기 편한 숏컷키를 설정에서 지정해주자. 터미널을 쓰기 전에 우선 github 웹페이지에 가서 New Repositories를 생성해준다. 새로운 레포지토리를 생성하면 이런 화면이 뜨는데, 여기서 git remote add origin https://... 부분을 복사해둔다. 이제 다시 VS code의 터미널로 돌아가서 명령어를 입력한다. 업로드할 파일이 열려있는 상태로 터미널을 열면 현재의 폴더 경로가 뜨기 때문에 따로 업로드할 폴더로 이동은 하지 않아도 된다. git init 로컬 레포지토리를 생성하는.. 이전 1 다음
