바닐라코딩 사전학습45 npm으로 JavaScript 모듈 설치하기 바닐라코딩 사전 가이드 진행중에 JavaScript Konas의 과제를 풀게되었다. Konas의 Readme에서 Konas는 테스트러너로 Jasmine을 사용했다고 나와있다. 여기서는 테스트를 수행하는 자세한 방법은 쓰지 않고 우선 기본적인 npm 사용방법을 알고 Jasmine을 설치해보자. NPM이란? Node Packaged Manager의 약자로 node.js로 만들어진 package를 관리해주는 도구이다. 개발자는 npm을 통해 node.js로 만들어진 module을 웹에서 받아서 설치하고 관리할 수 있다. NPM을 사용하기 위해선 node.js를 설치해야한다. node.js 설치파일 안에 npm이 내장되어 있다. npm으로 package(module) install/uninstall하기 현재 d.. 2021. 12. 15. Node vs Element Node: DOM API에 존재하는 모든 것. 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. 예를 들어, 똑같은 메소드를 상속하거나 똑같은 방식으로 테스트를 할 수 있다. Element: Node에 속해있고 one specific type of node이다. div, body, head등과 같은 특정 타입. 부모 인터페이스인 Node와 그 부모인 EventTarget의 속성을 상속한다. 참고자료) Node - Web API | MDN (mozilla.org) Node - Web API | MDN Node는 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. 예를들어, 똑같은 메소드를 상속하거나 똑같은.. 2021. 12. 8. CSS 레이아웃 Hello Vanilla Coding aaa bb Block vs Inline block block요소 : 화면상에서 항상 새로운 줄에서 시작, 위 아래에 서로 쌓이는 형식. 기본적으로 사용 가능한 최대치의 폭을 차지함 block요소들은 또 다른 block 요소를 자식으로 가질 수도 있고 Inline 요소를 자식으로 가질 수도 있다. 제약x ex)p, div 태그 inline 요소 : 하나에 이어 또 다른 하나가 줄줄이 이러 붙어서 나타남. 요소 내부 컨텐츠의 양만큼만 폭을 차지함. Inline요소는 또 다른 Inline요소들을 자식으로 포함가능. 그러나!! Block요소를 자식으로 품을 수는 없다. ex)span태그 Positioning flex display: flex; 를 사용하면 다양한 화면에 대.. 2021. 11. 24. CSS 선택자 바닐라코딩 HTML CSS Javascript 함께 열심히 공부해보시죠! 같이 해요 굵은 글씨체 박스박스 이것도 적용 child 이것은 적용 안됨? border CSS는 네모 칸을 만들어줌 child CSS의 > 연산자는 직속 자식 요소들만 적용. 손자는 적용 X li태그는 앞에 점 표시 보통 ul 태그 안에 li 태그를 넣어서 순서없는 리스트를 만든다 서브 헤드라인 h1, h2, #box { font family: Arial, Helevetica, sans-serif; color : red; } li{ color: blue; font-size: 20px; } #first{ color: green; font-size: 50px; } .thick{ font-weight: bold; } #nav li{ ba.. 2021. 11. 24. CSS 기본 문법, 링크 h1{ color: blue; } h1 : '무엇을' 바꾸고싶은지 명령하는 부분 color: -> 지정한 부분을 '어떻게' 바꿀 것인지 명령하는 부분 **HTML에서 h1은 '태그', CSS에서 h1은 '요소'라고 불린다. 용어가 헷갈릴 수 있으니 주의! h1{ color: red; } p, li{ color: blue; font-size: 20px; } h1 요소는 빨간색, p와li 요소는 파란색 20픽셀 크기로. 이렇게 각각 지정이 가능하다. 원하는 요소만 바꾸기 -> id속성 사용 CSS기초 HTML CSS Javascript 열심히 같이 해요 id속성을 이용하면 부분적으로 바꾸기가 가능하다. HTML로 작성하면 HTML은 first id값에 지정되었다. 이를 CSS에서 #first{ color: .. 2021. 11. 19. HTML 링크 태그에는 href속성을 줄 수 있고 어떤 웹페이지를 링크로 걸고싶은지에 대한 정보를 추가. a 태그는 글씨나 이미지를 감쌀 수 있음 1번 파일로 이동 상대경로 : 같은 파일 시스템 구조 상의 위치를 표현 1번 파일로 이동 2021. 11. 19. 이전 1 ··· 4 5 6 7 8 다음
