728x90 전체 글73 [HTML] DOM 으로 HTML 조작하기(2) - querySelector, querySelectorAll 🌈 DOM으로 HTML 조작하기 - querySelector, querySelectorAll DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector를 이용할 수 있다. querySelector('셀렉터') 를 이용할 수 있는데, 셀렉터로는 HTML tag, id, class를 가장 많이 이용한다. 1. ID로 엘리먼트 정보 조회하기 document.querySelector('#test') 2. Class로 엘리먼트 정보 조회하기 document.querySelector('.test') 3. div로 엘리먼트 정보 조회하기 document.querySelector('div') 💡 실행결과 2022. 5. 2. [HTML] DOM 으로 HTML 조작하기(1) - createElement, append, appendChild 🌈 DOM으로 HTML 조작하기 - createElement, append, appendChild DOM 으로 HTML 을 조작하는 방법중 가장 기초적인 것은 element를 만드는 것이다. document.createElement('div') 작업의 결과를 담기 위해선 변수를 선언하고 작업의 결과를 변수에 할당할 수도 있다. const test = document.createElement('div') 변수를 선언하고 append 해주지 않으면 적용이 안되는데, 만들어진 변수를 사용하고 싶다면 아래와 같이 append 하면 된다. document.body.append(test) 해당 변수에 textContent 라는 메소드를 활용하면 문자열도 입력할 수 있다. test.textContent = "Hell.. 2022. 5. 2. [HTML] DOM, Document Object Model 🌈 DOM, Document Object Model DOM 이란 HTML 문서의 구조와 관계를 Object 로 표현한 모델이다. 즉 자바스크립트를 이용하여 엘리먼트의 속성값을 얻어내거나 변경하는 등, HTML을 자유자재로 조작할 수 있는 것이다. DOM이 자바스크립트는 아니고, 그저 접근을 JavaScript로 한다고 생각하면 된다. - 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다. - 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다. - 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다. - 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다. - 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다. - 자바스크립트는 HT.. 2022. 4. 29. [Git] Git 기본 명령어 모음 🌈 Git 명령어 - git clone: 원격 repository를 내 로컬에서 이용할 수 있도록 복사. git clone - git init: 기존 디렉토리를 git repository 로 변환하거나 새로운 repository를 초기화 하는데 사용. git init - git status: 내 로컬로 복사해 온 디렉토리가 commit이 되기 전까지의 상태를 표시. 이 명령어를 통해 staging area와 untrakced files 목록에 어떤 것들이 있는지 확인할 수 있음. git status - git restore: commit 혹은 staged 되지 않은 local repository의 변경사항을 취소할 수 있음. git restore - git add: untracked files를 s.. 2022. 4. 29. [JavaScript] npm 모듈이란? 🌈 package.json & npm 이란? npm 모듈을 활용하기 위해 해당 모듈에 대한 정보를 담은 파일로 프로젝트 전반에 관한 정보가 들어있는 곳이 package.json 이다. 즉, 프로젝트 (패키지) 전반에 관한 정가 들어있는 곳이다. package.json에는 이 프로그램을 실행시키기 위해 필요한 모듈이 무엇인지, 어떻게 실행하는지 어떻게 테스트 하는지에 대한 방법이 명시되어 있다. 그렇기 때문에 프로젝트 코드를 전달할 때 포함되어 있는 모듈을 전부 전달할 필요가 없다. package.json에 필요한 모듈이 적혀있으니 직접 다운받아 사용하면 되기 때문이다. npm은 node package manager 로 일종의 앱스토어라고 볼 수 있다. node.js 환경에서 외부 라이브러리를 다운로드.. 2022. 4. 29. [JavaScript] js 파일을 작성하고 node로 실행해보자! 🌈 간단한 함수를 작성해보고 node 로 js 파일을 실행해보자. npm, node.js 설치하기 1. helloWorld.js 라는 이름의 파일을 nano로 열어서 아래 코드를 입력해준다. 2. 생성한 피일을 실행한다. 아래와 같이 실행이 잘 된다면 Good😃 2022. 4. 29. [JavaScript] Javascript runtime이란?nvm & node.js 설치하기 🌈 Javascript Runtime 이란? 그리고 node.js 란? 런타임이란 프로그래밍 언어가 구동되는 환경이다. 즉, 어떤 프로그램이 동작할 때 프로그램이 동작하는 곳이다. 우리가 흔히 사용하는 런타임으로는 웹브라우저가 있는데, 크롬, 사파리, 파이어팍스와 같은 웹 브라우저가 모두 JavaScript 런타임이이다. 웹 브라우저 외에도 node.js 라는 JavaSciprt 런타임이 있는데, 이 node.js의 등장으로 브라우저가 아닌 곳에서도 JavaScript를 실행하할 수 있게 되었고 이를 이용해 웹페이지 뿐만 아니라 서버와 같은 다른 프로그램도 만들 수 있게 되었다. 즉, 런타임이란, 프로그래밍이 언어가 실행되는 환경이고, node.js와 웹브라우저는 JavaScript 의 런타임이다. .. 2022. 4. 29. [M1 Mac] Cannot install in Homebrew on ARM processor in Intel default prefix 💡 Tip! ARM 아키텍쳐를 사용한 M1 칩을 이용하는 맥을 사용하는 경우 다음과 같은 에러를 발생할 수 있다. Error: Cannot install in Homebrew on ARM processor in Intel default prefix (/usr/local)! Please create a new installation in /opt/homebrew using of the ..... 이를 해결하기 위해선 에뮬레이션 환경 Rosseta 를 설치해야 한다. softwareupdate --install-rosetta 그리고 brew 명령어를 실행하기 전에는 다음과 같이 실행시킨다. arch -x86_64 brew install (설치할 프로그램) 2022. 4. 29. [CSS] ID와 Class의 차이 🌈 ID 와 Class 의 차이? - Class는 중복 사용이 가능하다. 동일한 클래스명을 여러 곳에 사용해도 무방하다. 하지만 ID 는 그렇지 않다. 한 개의 ID는 딱 한 번만 사용이 가능하다. - Class는 한 요소에 여러 개의 클래스명을 적용해서 사용할 수 있다. 하지만 ID는 그렇지 않다. 한 요소에 하나의 ID 만 적용이 가능하다. ID Class 중복사용 가능 불가능 한 요소 갯수 제한 한 요소에 한 아이디만 사용 가능 한 요소에 여러개 클래스 사용 가능 💡 선택자 우선 순위 : !important>인라인 > ID > Class > Element 1. 속성값 뒤에 !important 를 붙인 속성이 가장 우선수위가 높다. Ex. p {color: blue ! important;} 2. H.. 2022. 4. 28. 이전 1 ··· 4 5 6 7 8 9 다음 728x90
