정구리의 우주정복

HTML 아이디 비밀번호 비밀번호 재확인 이름 생년월일 월 1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월 성별 남자 여자 선택안함 본인 확인 이메일(선택) 휴대전화 대한민국 +82 이용약관 개인정보처리방침 책임의 한계와 법적고지 회원정보 고객센터 NAVER Corp. 전체는 크게 로고, 아이디 비밀번호 입력 , 생년월일 , 성별 , 이메일 전화번호 , 가입하기 버튼 , footer 이렇게 구성되어있다 생년월일에는 select box 가 들어가고 성별에는 radio box가 들어간다 크게 특별한 구조는 없다 ! /* Google web font CDN*/ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@..

mouse hover 시 상품에 대한 설명이 아래에서 위로 올라오는 사이트를 만들어 볼 거시다 ! 신상품 목록 상품 1 상품 1 설명 상품 2 상품 1 설명 상품 3 상품 1 설명 HTML 은 이런 모양새이다 전체 container 안에 이것저것 넣어서 담았다 ul 과 li 로 표의 형태로 담았음 ! 우선 container 에 width 와 margin 을 줘서 전체 너비를 잡아주고 auto 를 통해 중앙정렬을 해준다 h1 태그 중앙정렬을 해서 글이 화면 가운데에 오게 해준다 .prod-list(ul 태그) 에 list-style:none 을 통해 리스트 만들면 나오는 점을 없애주고 padding 0 을 해서 여백을 없애준다 overflow:hidden 을 통해 부모요소를 넘어가는 자식 요소는 보이지 않..

registeration Login in with Facebook Login in with Twitter Login in with google user name email Password Log in html 모습이다 !! 전체 div 안에 요소들을 넣는다 button 에는 fonrawesome 을 사용해서 아이콘들을 넣어준다 특징은 label 을 사용해서 요소들을 묶어줬다는것 @import 를 통해 fontawesome 이랑 font들을 추가해준다 그리고 css 들 reset 해주는데 이거는 별로 중요한거 아니니까 생략스 body 태그에 font 지정 해주고 display: flex; justify-content: center; align-items: center; height: 100vh; 중앙정렬 ..

여기서 포인트는 1) 가로정렬 2) 3개 사이의 간격의 일정함 3) 카드 안에 요소들의 정렬 이다 ! Card #01 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, temporibus. Card #02 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint perferendis maiores rem facilis quisquam, necessitatibus in aliquid non perspiciatis cupiditate. Card #03 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit expedita eaque ..

또 정복당하는건 나였고 What are you looking for html 은 정말 별거 없다 그냥 fom 태그 안에 h1 이랑 Input 2개 넣어주면 끝 ! @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); body{ font-family: 'Montserrat', sans-serif; margin : 0; line-height: 1.5em; /* background-image: url("./images/snow-photo.jpg"); background-repeat: no-repe..

layout 과 배치를 정복할거시다 ! 할수있을지는 모름 Header a1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum nostrum soluta expedita dolore tempora ratione quos deleniti, sint cumque, quo aliquam illum possimus iure accusantium numquam fugit id alias vel. a2 footer html 소스코드 별거 없음 그냥 div 안에 header section footer 로 나눠줬다 .container{ border: 1px solid #000; width:1200px; margin: auto; } header{ b..

HTML 사이트 제목 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere, eius! 왼쪽 사이드 바 메뉴 01 메뉴 02 메뉴 03 메뉴 04 메뉴 05 본문 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam deserunt earum omnis quaerat quas pariatur, eos quibusdam blanditiis. Culpa et rem, ad ipsum aliquam nobis earum perspiciatis pariatur vel, assumenda itaque maiores reprehenderit quod accusantium. Architecto ..

position 에는 relative , absolute, static, fixed 등등이있다 오늘은 저 4개에 대해서 정복을 할거임 ! relative 는 자기 자신 기준으로 이동을 한다 + relative 를 부여한 애는 부모역할을 하게 된다 absolute 는 부모 기준으로 이동을 한다 만약 relative 를 사용해 부모를 지정하지 않으면 최상위 뷰포트가 부모가 된다 static 을 주면 부모의 역할을 하지 않게 된다 fixed는 그냥 뷰포트 기준으로 이동하게 된다. 전체 소스 보면서 얘기 해봅세다 상대 배치 , relative A B C D E F HTML 상대 배치 , relative A B C D E F div 안에 div 7개 만들어줬다 CSS 짤라서 보자 div{ border : 1px ..