whatisthis?

🔻 j-Query 없이 만든 아코디언 메뉴 practice - css / js ) j쿼리 없이 아코디언메뉴 만들기 Accordion Menu (without jQuery) - 보통 아코디언 메뉴는 j쿼리를 이용하는데, j쿼리에는 slideToogle 등의 편리한 애니메이션 관련 메소드가 있기 때문! BUT! 나는 제이쿼리는 되도록 쓰지 않고 싶은 1人 으로 mywebproject.tistory.com Accordion Menu with jQuery .slideUp() 선택한 요소의 CSS height 속성값을 높여가며 사라지게 한다. (올라가면서 사라짐) .slideDown() 선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 한다. (내려가면서 사라짐) .slideToggle() 선택한 요소..

🔻 j-Query 없이 만든 아코디언 메뉴 practice - css / js ) j쿼리 없이 아코디언메뉴 만들기 Accordion Menu (without jQuery) - 보통 아코디언 메뉴는 j쿼리를 이용하는데, j쿼리에는 slideToogle 등의 편리한 애니메이션 관련 메소드가 있기 때문! BUT! 나는 제이쿼리는 되도록 쓰지 않고 싶은 1人 으로 mywebproject.tistory.com Accordion Menu with jQuery - 나는 제이쿼리의 무거움을 기피 + 기본 자바스크립트에 충실하자! 는 마인드로 여태 jQuery를 굳이 안썼었다. - But. 언젠간 제이쿼리를 써야할 때가 있고, 현재 많은 페이지들이 제이쿼리로 구성되어있으므로 알고는 있어야 한다 (...) 따라서, 간단한..

Accordion Menu (without jQuery) - 보통 아코디언 메뉴는 j쿼리를 이용하는데, j쿼리에는 slideToogle 등의 편리한 애니메이션 관련 메소드가 있기 때문! BUT! 나는 제이쿼리는 되도록 쓰지 않고 싶은 1人 으로 .. (물론 지금 많은 페이지들이 제이쿼리를 사용하므로 배우는것은 필수라 생각) 바닐라 자바스크립트만을 사용해서 한번 구현해봐야겠다고 생각했다. - css 를 기반으로 클릭이벤트마다 class 추가 / 삭제 >> 이또한 j쿼리는 toogleClass 메소드로 if-else문 없이 깔끔하게 가능하지만 .. - 펼치고 접는 +, - 아이콘을 flex만으로 구현 + 애니메이션(트렌지션) 🔻 📃 실습하면서 알게된 점 기록 📌 css :hover시 선택자 예> div:ho..

폴더 Add - Commit - Push 하기 명령어 순서: $ git status $ git add 폴더 이름 $ git commit -m "커밋 로그" $ git remote -v $ git push origin main 1. git status 명령어로 working directory 상태 확인 2. git add 명령어로 staging area로 폴더 이동 3. git commit과 git push 명령어로 commit한 사항을 repository로 최종 업로드 파일과 달리 추가되는 점이 있다면 4번째 라인의 "git remote -v" 라는 명령어임. 업로드 하려는 폴더의 상위폴더에 git이 연결(.git 폴더가 있음)돼있기 때문에 해당 명령어를 이용해 내 github repository(원격 ..

Landscape = 모바일 화면회전 (가로 ver) @media (orientation: landscape) { /* 속성 */ }

For You 인테리어 사무 정보 관리 사이트 project ▪ 풀스택 프로젝트 (Server-side, DB, Front-end) ▪ 기획안 ✅ 프로젝트를 시작하며 기획 + 대략의 구성 + 개발스택 고민을 하다보니 벌써 2-3주가 지나갔다. 처음엔 프론트엔드만 담당하는 줄 알았던 프로젝트가 디자인툴도 부족한 실력이지만 다루게 되고, 프론트 말고 서버사이드나 DB쪽 지식도 알게 되었다. 특히 node.js는 백엔드쪽이라고 단정짓고 쳐다도 안보던 아이였는데, 리액트를 접하면서 참 npm과 친해진 것 같다 :) 아직은 배우던 걸로 구현을 하겠지만, 점점 찾아보다보니 next.js와 typescript 같은 신기술(?)이 탐나기 시작했다. 또, css도 지금은 그냥 module.css를 목표로 하지만, 나중에..

en) MDN 문서 영어로 공부하기 - 영어 공부도 하고, (문장구조+코딩용어+작문) - 코딩 지식도 얻을 수 있음 - 하루 30분씩만 매일매일 💯💯 📃 이번에 볼 문서는? - React 시작하기 React 시작하기 - Web 개발 학습하기 | MDN 이 문서에서는 React를 소개합니다. 우리는 React에 대한 약간의 배경지식과 사용 예시, 로컬 컴퓨터에 React 툴체인을 설정하는 방법을 배우고 프로세스에서의 React 동작 원리를 배우기 위해서 간단 developer.mozilla.org

GitHub - thisisyjin/Bootstrap-prac: Practice BootStrap Grid System+ Page Layout (HTML/CSS) Practice BootStrap Grid System+ Page Layout (HTML/CSS) - GitHub - thisisyjin/Bootstrap-prac: Practice BootStrap Grid System+ Page Layout (HTML/CSS) github.com Project. 반응형 페이지 제작기간 : 1일 Design, Assetst REF : 포스팅 하단 참조 - Bootstrap Grid System + CSS MediaQuery 연습용 - Page-Layout 연습용 🔻 gh-pages로 구현해봄. Final Pr..

(7) Footer Section 📌 HTML + CSS 작성 - html 마크업 구성 매우 간단! col-12 짜리 세개만들기. index.html Terms Privacy License style.css /* Footer Page */ .footer { padding: 24px 0; } .footer-link { margin-bottom: 8px; } .footer-link:last-child { margin-bottom: 0; } .footer-link a { font-size: 14px; line-height: 1.71428571; letter-spacing: -0.01em; color: #807f81; } +) media query (Desktop) /* footer */ .footer-link..

(6) Subscription Section 📌 HTML + CSS 작성 - html 마크업 구성 이번에는 section 말고 aside로 감싸주자. 디자인시안을 보면, image부분과 나머지 title+p+form 부분으로 나눠지고, col-12(col-md-5)와 col-12(col-md-7)로 나눈다. row를 나누는 기준은 ??? - 줄바꿈 하면 row 따로 적기. 이번엔 같은줄에 있으므로 row>col+col index.html Stay with us Subscribe to our email newsletter to stay up to date on the latest updates Get started Cancel any time. Check out Terms of Use. 나중에 input을..