Jeong note

자바스크립트로 간단한 계산기를 작성해 보았습니다. HTML data-type 에 연산자(operator), 전체식 삭제(ac), 입력 값 하나만 삭제 (back), 등호(equal) 로 작성하였습니다. 등호(=)는 연산자에 속하지만 계산기 에서는 식의 완료 지점이므로, data-type을 dqual 로 설정하였습니다. Calculator //계산 결과가 들어갈 식 + - × ÷ 7 8 9 . 4 5 6 AC 1 2 3 ← 0 = CSS CSS가 길어서 이번 코드에서 제일 중요하다고 생각되는 grid 속성 부분만 가지고왔습니다. 사실 자바스크립트를 제외하고 화면 구성만 본다면 아주 쉬웠습니다. .wrapper{ display: grid; grid-gap: 10px; grid-template-columns:..

사용자 페이지에서 자바스크립트를 약간 사용해보았다 사실 자바스크립트를 아직 배워가는 중이라서 html과 css로만 구현을 했었다. 자바 스크립트를 사용한 부분은 게시물, 저장됨, 태그됨 메뉴의 변경에 따라 하단의 페이지가 변경되는 것이다. 어려울 것 없이 함수만 만들어주면 되는 것이라 쉬웠다! 추가적으로 자바스크립트의 학습을 완료하고 나면 구현하지 못했던 부분들에 대해서도 다시 구현해 보아야겠다. [ 자바 스크립트를 사용한 부분] 게시물 저장됨 태그됨 이렇게 html 에서 메뉴를 만들어 주었다. 이전의 구성과 동일하게 아이콘은 인스타그램에서 복사하여 . 태그를 사용하였다. onclick = " " 으로 구분하여 해당 함수들을 각각 실행하게 하였다. 기존 user_page. css 파일에 같은 내용으로 세..

html 파일보다 css 파일의 중요도가 더 높게 느껴졌다 . css 파일을 헷갈리지 않기 위하여left_side , main, right_side, content, story 로 구분하였다. 각 파일명을 해당 html 에서 class의 명칭과 동일하게 부여하였다. [ html ] 1. 아이콘 로그인 페이지와 동일하게 아이콘은 실제 인스타그램의 html 을 참고하여 태그를 사용하였다. 2. 상단의 사용자 자신의 프로필을 누르면 user_page 로 넘어갈 수 있도록 태그하였다. + 코드가 워낙 길고 화면만 구성하여 어려울 부분이 없었다. 깃허브 주소를 참고하여 main.html을 참고,, [ css ] css에서 가장 중요했던 부분은 반응형 화면 이었다고 생각한다. 실제 인스타그램을 살펴 보면 화면의 크..

먼저 , 이번 인스타그램 클론 코딩은 html과 CSS, 그리고 자바스크립트(약간) 를 활용하여 구성하였다. 자바스크립트 수업을 아직 완료하지 못하였기에 자바스크립트 부분은 부족함이 있다. 그래도 최선을 다해 지금의 실력으로 작성해 보았다. login 페이지에서는 html과 CSS만을 활용했다. 코드가 길어서 각각 중요한 부분들만 작성하였다. [ html ] jeongaaaaaa님으로 로그인 Instagram 로그인 또는 Facebook으로 로그인 비밀번호를 잊으셨나요? 계정이 없으신가요? 가입하기 앱을 다운로드 하세요 1. 아이콘 모든 아이콘은 실제 인스타그램 html을 참고하여 태그를 사용하였다. svg를 복사하여 가져올때 기존에 클래스는 삭제하고 내가 사용할 클래스로 변경하였다. 2. 태그를 활용하..