웹개발5 javascript querySelector, querySelectorAll이용하기 이번 포스팅에서는 javascript의 querySelector를 이용하는 방법에 대해 다뤄보겠습니다. 크롬 브라우저의 개발자 도구에서 console창으로 테스트해보시는 것을 추천드립니다. 📌 querySelector querySelector는 dom 요소를 하나만 선택할 때 사용합니다. 해당 요소의 속성을 변경하거나, 자식 / 부모 관계로 Element를 만들 때 주로 사용됩니다. 사용 방법은 이렇습니다. document.querySelector('요소'); 📌 querySelectorAll querySelectorAll은 해당되는 모든 요소를 nodeList(배열)로 반환합니다. document.querySelectorAll('요소'); 이때, 선택할 요소는 css 선택자를 사용하는데요, 대표적인 경.. 2021. 5. 31. 약간의 프로그래밍으로 웹 사이트를 만드는 가장 빠른 방법 기획, 디자인, 개발 등 고려해야 할 사항들을 최대한 없애고 웹 사이트를 만들 수 있는 방법은 무엇일까요? 이 글에서는 웹 빌더가 아닌, 약간의 프로그래밍으로 웹 사이트를 만드는 방법에 대해 소개합니다. 누구나 일주일 만에 자신만의 홈페이지를 만들 수 있습니다. 아래는 제가 일주일만에 제작한 웹 사이트입니다. https://oncreate.netlify.app/ 온크리에이트 - 수백시간을 아끼는 안드로이드 앱 개발 가이드북 - 당신은 "클라이언트"다. - 서버 라는것이 존재하는 이유 - 만국 공통어 JSON이라는 녀석 - 커피 주문을 통해 알아보는 동기와 비동기 - 카카오 기술 갖다 쓰기! Retrofit - 맥락기억에 바로 꽂히는 Par oncreate.netlify.app 시간이 들어가는 일은 주로 .. 2021. 5. 28. 리액트 프로젝트에 구글 로그인 연동하기 리액트를 이용하여 개발할 때, 구글 로그인을 연동하는 방법에 대해 알아보겠습니다. 1. Google Cloud Platform에 프로젝트 만들기 구글 인증을 사용하기 위해는 Google Cloud Platform에 접속하여, 프로젝트를 생성해야 합니다. Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 구글 로그인을 연동하고자 하는 서비스 이름으로 만들어주세요. 2. 사용자 인증 정보 만들기 프로젝트 생성 이후 대시보드에서 다음과 같이 이동해주세요. 좌측 메뉴의 사용자 인증 정보 - OAuth 클라이언트 ID 만들기에 오셔서 해당하는 정보들을 적어주고, URI에는 http.. 2021. 4. 18. 리액트 프로젝트 만들기 create-react-app 0. 준비물 Nodejs - 리액트 관련 라이브러리들하을 손쉽게 설치할 수 있도록 해주는 npm, yarn을 위해 필요하다. VSCode (코드 편집기중 하나인데, 다른 편집기를 사용해도 괜찮다) 1. yarn 설치하기 yarn은 페이스북에서 만든 녀석인데, 프로젝트 의존성 관리를 담당하는 Javascript 기반의 패키지 매니저다. npm이 존재하긴 하나, 이보다 훨씬 빠르고 안전하다. npm의 속도, 성능, 보안 문제들을 해결하기 위해 개발되었다. 설치는 Yarn의 홈페이지에서 할 수 있다. https://yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarn.. 2021. 4. 18. 웹사이트만들기 시리즈 - HTML로 골격 만들기 안녕하세요. 테크티키타카압니다. 저번 시간에는 VSCODE를 설치하고, 유용한 플러그인들을 설치하는 시간을 가져보았습니다. 이번 시간에는 웹사이트의 골격을 만들어보겠습니다. 건물을 지을 때, 가장 먼저 기반을 다지고, 골격을 구축해두어야 외벽과 바닥, 천장을 지을 수 있습니다. 웹 개발에서 HTML은 '웹사이트'라는 건물의 기반과 골격에 해당하는 부분이라고 생각하시면 됩니다. VSCODE에서 같이 작성하면서 하나씩 알아보도록 하겠습니다. 기본적인 html의 뼈대는 VSCODE에서 지원해줍니다. html파일에서 !를 적으면 다음과 같은 상태가 됩니다. 여기서 탭(Tab)이나 엔터(Enter)를 눌러주시면 이렇게 html 기본 구조가 자동으로 나옵니다. 1. head 태그 첫 번째로 head부분입니다. ti.. 2020. 12. 2. 이전 1 다음 반응형
