정구리의 우주정복

Todo List + 전체 진행중 완료 CSS 에서 간단하게 적어보자면 bootstrap 을 적용하면 float 가 적용이 안된다고 한다 ㅜㅜ 이것도 모르고 계속 float:right로 버튼 오른쪽으로 옮기려 하다가 주먹으로 부숴버릴뻔 ㅜㅜ 그래서 display:flex 해서 justify-content:space-between 해가지고 오른쪽에 붙여줬다 (양쪽 끝에 붙는 성질임) let taskInput = document.getElementById('task-input'); let addButton = document.getElementById('add-button'); let taskList = []; addButton.addEventListener('click',addTask); function ..

Hello World Great Javascript Try it ! style 태그 안에 미리 글자색을 바꿔주는 태그를 하나 만들어놓는다 여기서는 class 명이 done 일때 실행되도록 만들어줬다 그리고 버튼을 클릭했는데 태그에 class 명을 추가해주면 된덩 ! 그럼 글자 색이 바뀐다

Study Schedule 공부할 주제를 기록해 보세요 추가 html은 그냥 대강 만들었고 script 부분을 살펴보자 button 과 ul 부분을 가져와준다 이후 button.onclick = function(){} 형태를 사용하면 버튼 클릭시 실행될 함수 지정이 가능하다 !!! input 안에있는 value 값을 가져온 뒤 새로운 li 태그를 생성해서 text 값을 넣어주고 append 해주자 !!

오늘 할 일 html 에는 크게 뭔가 없다 왜냐면 js 에서 추가해 줄것이기 때문이다 const ul = document.querySelector('#to-do-list'); function insert(ul,value){ const input_value = document.createElement('li'); input_value.setAttribute('class','li-tag'); input_value.textContent = value; ul.append(input_value); } insert(ul,'고양이 밥주기'); insert(ul,'정구리 밥주기'); insert(ul,'치킨 포장해오기'); insert(ul,'밥 야무지게 먹기'); to-do-list (ul 태그) 를 ul 에 불러온..

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 ..