개발/HTML_CSS6 [HTML/CSS] 로그인 페이지 만들기 / css 그림자, 그라데이션 오늘은 pinterest에서 로그인 페이지 웹디자인을 보고 로그인페이지를 만들어 보았다. https://www.pinterest.co.kr/pin/844284261369161352/ Pinterest에서 발견 회원님을 위한 아이디어를 더 많이 발견하세요. www.pinterest.co.kr 참고한 로그인페이지 디자인이다. 이 디자인에서는 그라데이션과, 그림자등의 표현이 핵심이다. 요새 유행하고 있는 플랫 디자인의 특성을 잘 살릴 수 있는 요소 이기도 하다. 최종적으로 구현한 모습은 다음과 같다. 1. CSS그라데이션 생성 사이트 CSS그라데이션을 직접 만들기는 어려우므로 이를 쉽게 해주는 사이트가 있다. https://cssgradient.io/ CSS Gradient — Generator, Maker,.. 2020. 9. 1. [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. CSS flex, justify-content 옵션 비교 CSS의 flex속성은 레이아웃 배치를 위해 만들어진 속성으로 기존의 float나 inline-block등을 대체할 수 있습니다. flex는 flexible이라는 뜻으로 유연한? 이라는 뜻을 가지고 있습니다. 실제 유튜브의 메인상단이 flex 속성으로 구현되어 있습니다. 우선 flex의 속성값에 따른 비교에 앞서 아래와 같이 html코드를 작성해봅니다. flex의 기본구조는 큰 컨테이너 안에 작은 아이템들이 모여있는 구조를 띕니다. 우선 Flex를 적용하지 않은 모습을 보겠습니다. CSS코드는 다음과 같습니다. .container{ width: 500px; height: 100px; background: yellow; } .item{ width: 50px; height: 50px; border: soli.. 2020. 4. 28. 이전 1 다음
