홈페이지따라만들기4 [HTML/CSS] 트위터 로그인 화면 따라 만들기 이번에 따라 만들어본 사이트는 트위터 로그인 사이트이다. 실제로 다양한 기법들이 쓰인 사이트이지만 최대한 모양과 느낌만 따라한다는 느낌으로 만들어 보았다. 아래는 트위터 로그인페이지 디자인이다. 내가 따라 만든 페이지는 다음과 같다. 왼쪽에 큰 트위터 이미지는 실제로 path 태그로 그려져 있었다. (생략) 가운데 영역이 브라우저 높이를 따르려면 100vh로 높이를 주면된다. vh는 Viewport Height를 나타내며 100vh로 지정하게되면 100% 높이를 따르게 된다. 10vh는 10%의 높이를 따르게 된다. 다음은 HTML, CSS 코드이다. Follow your interests. Hear what people are talking about. Join the conversation. Phon.. 2020. 8. 31. [HTML/CSS] 네이버 로그인 화면 따라 만들기 오늘 따라 만들어본 웹페이지는 네이버로그인 화면이다. 원본 디자인은 다음과 같다. 내가 구현한 모습은 다음과 같다. 일부 폰트나 이미지가 차이가 있지만 최대한 비슷하게 하려 하였다. 전체 소스(HTML) 한국어 English Sign in Stay Signed in Easier sign in Sign in with QR code Facebook line Forgot your Username or Password? | Sign up Copyright © NAVER Corp. All Rights Reserved. "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 전체소스(CSS) :root{ --body-background-color: #f5f6f7; --font-c.. 2020. 8. 27. [HTML/CSS] google 따라 만들기 오늘 따라들어본 웹페이지는 google.com이다. 원래 페이지 디자인은 다음과 같다. 따라서 코딩해본 페이지. footer영역을 맨 아래로 붙이는 방법은 다음과 같다. footer{ position: fixed; bottom: 0; width: 100%; } 전체 코드 - html Gmail 이미지 Google 검색 I'm Feeling Lucky Google 제공 서비스: English 대한민국 광고 비즈니스 Google 정보 검색의 원리 개인정보처리방침 약관 설정 전체 코드 - css :root{ --gray-color :#717271; --light-gray-color: #dee0e5; --midium-gray-color: #999fa6; --button-gray-color: #f0f1f0; --.. 2020. 8. 27. [HTML/CSS] 스타벅스 홈페이지 메뉴 따라 만들기 이번에 따라 만들어본 홈페이지는 스타벅스 홈페이지이다. 그중에서 상단 메뉴 영역을 만들어 보았다. 실제로 스타벅스 홈페이지는 flex를 사용하지 않고 float와 position으로 거의 하드코딩 되어있다 시피 되어있다. 나는 flex를 이용하여 만들어보았다. 실제 스타벅스홈페이지 메뉴 (www.starbucks.co.kr/index.do) 따라 만든 스타벅스 홈페이지 메뉴 HTML Sign In My Starbucks Customer Service & Ideas Find a Store Coffee Menu Store Responsibility My Starbucks Rewards What's New CSS :root { --color-beige:#f6f5ee; --color-font-black: #33.. 2020. 8. 25. 이전 1 다음
