728x90 프로그래밍70 [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. [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. [Linux] 리눅스 기본 명령어 (1) 🌈 리눅스 기본 명령어 알아보기 1. pwd : 현재 위치 확인하기 2. mkdir : 새로운 폴더 생성하기 3. ls : 특정 폴더에 포함된 파일이나 폴더 확인하기 💡 Option ls -a: a는 all 의 의미를 가지고 있어, 숨어있는 폴더나 파일을 포함한 모든 항목을 터미널에 출력 ls -l: l을 사용하면 가장 왼쪽에 d와 -를 확인할 수 있는데, d는 폴더 -는 파일을 나타냄 ls -al: 폴더나 파일의 포맷을 전부 터미널에 출력 4. cd : 폴더에 진입하기 5. touch : 파일 생성하기 6. rm : 폴더나 파일 삭제하기 💡 Option rm -rf: rm만 단독으로 사용하면 폴더는 지울 수 없기에 폴더를 지우기 위해서 rm -rf를 입력해줘야한다. 7. mv : 폴더나 파일의 이름을.. 2022. 4. 28. [CSS] 다시 정리해보는 박스 구성 요소 (Margin, Border, Padding, Content) 🌈 박스를 구성하는 요소 - Content, Padding, Border, Margin 1. Border (테두리) h1 tag 에 border의 빨간 선을을 추가하여 확인해보면 아래와 같이 h1 tag의 테두리를 확인할 수 있다. 💡 테두리를 점선으로 만들어보기 border의 속성값 중 테두리 스타일에 dotted라는 속성을 넣어주면 된다. 💡 테두리를 둥글게 만들어보기 border-radius 를 이용해 테두리를 둥게 만들어볼수도 있다. 💡 테두리에 그림자 넣기 box-shadow 를 이용해 테두리에 그림자도 넣을 수 있다. 2. Margin (바깥여백) tag에 margin을 주어 border와의 차이점을 먼저 확인해보자. 살구색으로 표시되어 있는 border의 바깥 부분이 margin 인 것을 .. 2022. 4. 28. [CSS] 줄 바꿈이 되는 박스와 옆으로 붙는 박스 ( block, inline, inline-block) 🌈 줄 바꿈이 되는 박스 block VS 옆으로 붙는 박스 inline, inline-block HTML 태그 중에 어떤 태그는 줄바꿈이 되고 어떤 태그는 줄바꿈이 되지 않는다. 우리는 줄바꿈이 되는 박스를 block 박스, 줄바꿈이 일어나지도 않고 맘대로 크기지정을 할 수 없는 박스를 inline 박스라고 부른다. 그리고 이 두가지 속성이 섞인 박스도 존재하는대 이는 inline-block 박스라고 부른다. 줄 바꿈이 되는 대표적인 태그 -> , , 줄 바꿈이 되지 않는 대표적인 태그 -> 💡 아래 표를 기억해두면 코드를 작성하는데 훨씬 유용할 것! block inline-block inline 줄바꿈 여부 줄바꿈이 일어남 줄바꿈이 일어나지 않음 줄바꿈이 일어나지 않음 기본적으로 갖는 너비 100% 글.. 2022. 4. 28. 이전 1 ··· 4 5 6 7 8 다음 728x90
