본문 바로가기
728x90
반응형

Web Programming93

인스타그램 폰트 CSS / 구글 폰트 설정하기 / google font 적용하기 / 폰트 변경하기 인스타그램을 따라 만들면서 기본 폰트를 인스타그램사이트의 폰트를 따라하는 과정입니다. 똑같은 폰트를 찾아서 변경 할 수는 없었지만 google font에서 비슷한 폰트를 찾아서 적용하는 방법으로 진행했습니다. google font는 구글에서 제공하는 무료 웹폰트 서비스입니다. google font 외에도 웹폰트 서비스를 제공하는 곳이 있으니, 다음번에는 다른 서비스를 이용해서 제작해 볼 생각입니다. 인스타그램 폰트 따라하기 좌측의 사진은 실제 인스타그램의 로그인 페이지이고, 우측은 인스타그램을 따라서 만들고 있는 페이지 입니다. 실제 인스타그램 페이지처럼 로고를 사진이 아닌 폰트로 나타내고 싶어서 방법을 찾아보니 웹프로그래밍에서 사용이 가능한 폰트를 제공하는 곳이 여러 곳이 있지만 똑같은 폰트스타일은 찾.. 2021. 11. 11.
CSS / Z-index 틀 안에 사진 넣기 (휴대폰 화면 만들기) /부트스트랩 bootstrap carousel z-index / position 속성들 인스타그램 홈페이지를 따라서 만들면서 휴대폰 안에 이미지가 바뀌는 효과를 만들고 있었다. 부트스트랩을 사용하지 않고 z-index를 사용할때는 잘 됬었는데 부트스트랩을 사용한 상태에서는 z-index뿐만 아니라 다른 여백이나 패딩같은 간단한 수정도 잘되지 않을때가 많았다.. 여기서는 둥근 테두리에 화면을 넣으려고 할때 화면이 휴대폰 틀에 딱 맞게 조절하기 위해서 z-idex를 사용하려고 했는데. 마음처럼 움직이지 않는다.. bootstrap carousel z-index 부트스트랩의 carousel에 z-index 사용하기 부트스트랩의 carousel에 z-index 사용하기 일단 휴대폰 안의 사진이 변경되길 바라면서 휴대폰의 이미지 png파일과 휴대폰화면에 들어갈 사진 3장을 준비하고 예전에 프로젝트를.. 2021. 11. 11.
이클립스 깃허브 로그인 Can't connect to any URI: //GitHub 토큰 인증 로그인 이클립스와 깃허브를 예전에 잘 사용하고 있다가 오랜만에 공부를 하면서 다시 사용하게 되었다. 저장소도 만들고 이클립스랑 연결도 하고 진행중인 프로젝트를 커밋하려고 하는데 Can't Connect Can't connect to any URI: 대체 왜란 말인가... 문제의 화면 User와 Password를 작성한다음에 login을 누르면 다음에 등장하는 에러 Can't Connect Can't connect to any URI: 내가 비밀번호를 틀리는 줄 알고 몇번이나 아주 정교하게 로그인을 시도하고, 깃 홈페이지에서 로그인을 했는데도 정상적으로 로그인이 되었다. 왜 너는 인증되지 않는다는 말입니까.. 대채 왜!!! 라고 폭풍 검색을 하던중... 원인과 해결방법을 찾아 냈습니다. 깃의 정책이 바뀌었다고 한.. 2021. 11. 8.
인스타그램 로그인 페이지 반응형 레이아웃 만들기 / 부트스트랩(bootstrap) 사용하기 Dynamic Web project를 프로젝트 생성해서 JSP로 페이지 제작을 진행했습니다. 브라우저에서 인스타그램의 홈페이지를 방문하면 브라우저의 크기에 따라서 페이지의 레이아웃이 변경되는 것을 볼 수 있는데 오늘은 세부적인 디자인 보다는 레이아웃을 따라서 제작해 볼 생각이다. 1. 인스타그램 로그인페이지 만들기 아래의 인스타그램 홈페이지의 로그인 페이지를 부트스트랩을 사용해서 반응형웹으로 제작 할 것 입니다. 부트스트랩 사용방법 부트스트랩을 사용하기 위해서는 일단 부트스트랩 홈페이지를 방문해야 합니다. 부트스트랩은 한글번역이 잘되는 것 같다. 번역으로 페이지를 둘러보면 사용 방법을 금방 알 수 있었다. Introduction Get started with Bootstrap, the world’s mo.. 2021. 11. 8.
728x90
반응형