분류 전체보기126 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 📌 원시 타입? 객체 타입? 자바스크립트가 제공하는 7가지 데이터 타입들을 크게 원시 타입primitive type과 객체 타입object/reference type으로 구분할 수 있다. 📌 원시 타입과 객체 타입 특징 💡 원시 타입 primitive type 특징 01 원시 값은 "변경 불가능"한 값이다. --> immutable value --> 데이터의 신뢰성을 보장한다. 02 원시 값을 변수에 할당하면, 변수 (확보된 메모리 공간) 에는 실제 값이 저장된다. 원시 값이 변하지 않는 건 사실이지만, 변수에 저장된 원시 값은 재할당을 통해 새로운 값을 줄 수 있다. 그러나 이 경우도 원래 변수에 할당된 원시 값을 새로운 값으로 교체하는 것이 아니라, 변수가 참조하던 메모리 공간의 주소를 변경해 새롭게.. 2021. 8. 12. HTML 태그별 display 속성 📌 Inline ◾ : inline ◾ : inline ◾ : inline ◾ : inline 📌 Block ◾ : block ◾ : block ◾ : block ◾ ~ : block ◾ : block ◾ : block ◾ : block ◾ : block 2021. 8. 11. HTML <input> type 속성 ◾ text : 일반 텍스트를 입력받을 수 있습니다. ◾ password : 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다. ◾ submit : 태그 내에 입력된 데이터를 서버로 전달해 줍니다. ◾ button : 버튼을 생성해 줍니다. ◾ checkbox : 체크박스 형태의 입력을 받을 수 있습니다. ◾ radio : 라디오 버튼 형태의 입력을 받을 수 있습니다. ◾ reset : 태그 안의 사용자 입력을 초기화 합니다. 2021. 8. 10. CSS font-size 속성 ◾ medium : 웹브라우저에서 정한 기본 글자크기입니다. ◾ xx-small, x-small, small, large, x-large, xx-large : medium에 대한 상대적인 크기입니다. ◾ smaller, larger : 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다. ◾ length : px, %, em, rem 등으로 크기를 정합니다. ◾ initial : 기본값으로 설정합니다. ◾ inherit : 부모 요소의 속성값을 상속받습니다. 2021. 8. 9. CSS flex-box 의 부모 속성 align-items 📌 Flex-Box : Flex Container 나는 부모 속성 🏁 align-items: stretch / flex-start / flex-end / center / baseline ❗ item들이 한 줄일 경우 ! align-items 속성을 사용한다. 왜냐 ?? flex-wrap을 통해 2줄 이상일 경우에는 align-content속성이 우선시된다. --> align-items를 사용하려면 align-content속성을 기본값(stretch)로 설정하거나 아예 사용하지 않아야한다. --> 그래서, justify-content와 align-items의 조합을 많이 사용하는 게 아닌가 싶다 --> justify-content로 flex-line 정리하고, align-items로 item들 라인 정리하.. 2021. 8. 8. CSS flex-box 의 부모 속성 justify-content & align-content 📌 Flex-Box? 말 그대로 어어엄청 힙한 아이 부모요소에 꼭 flex-box를 넣어줘야 자식요소들이 flex속성을 활용할 수 있다 helloflex abc helloflex 📌 Flex-Box : Flex Container 나는 부모 속성 🏁 display: flex .container { display: flex; } item들이 가진 내용물의 width만큼 너비를 차지한 채, inline요소들처럼 다닥다닥붙는다. 여기서 container에 height을 설정해주면 item들도 부모 높이 따라서 좌라락 예쁘게 놓여진다. 🏁 display: inline-flex .container { display: inline-flex; } flex가 div처럼 화면 한 줄을 잡고 촤라락이라면 inline-fle.. 2021. 8. 7. 첫 설계 twittler 📌 기본 화면 📌 css 변화들 2021. 8. 6. Node.js npm과 package.json 📌 npm이란?? Node Package Manager 약자 node.js 환경에서 필요한 모듈을 다운받기 위한 "모듈 스토어" 이다. ( ex. 리눅스의 PM은 apt, MacOS의 PM은 brew, Node.js의 PM은 npm ) 다른분들이 만들어놓은 좋은 모듈들을 node.js에서는 "nmp모듈" 이라고 부른다. 우리는 이러한 모듈들을 어떻게 효율적이고 생산적으로 조립할건지 지속적으로 고민해야한다. 🏁 npm 설치했을 때 장점 프로젝트 코드를 다른 사람에게 전달할 때, 프로젝트가 포함하고 있는 모든 모듈을 다 전달하지 않아도 된다 ! --> "우리 코드는 여기있고, 필요한 모듈들은 package.json에 있는 리스트 보고 네가 직접 다운받아서 써 ~" ◾ npm 설치하기 npm install ◾.. 2021. 8. 5. Node.js 는 뭐야? 일단 설치해봐 Ubuntu 20.04.2 LTS 환경에서 실행되었습니다. Achivement Goals ✅ nvm, Nodejs, npm을 설치하고, 버전을 확인할 수 있다. ✅ 명령어 node를 이용해 JavaScript 파일을 실행할 수 있다.\ ✅ 스프린트 시작 전 package.json 파일을 확인하고, npm install을 사용할 수 있다. 📌 Node.js는 또 뭐야? JavaScript의 런타임. 🏁 런타임이란? 어떤 프로그램이 동작할 때, 프로그램이 동작하는 곳 ( ex. 웹 브라우저 ) 자바스크립트의 런타임은 웹 브라우저 밖에 없었는데, node.js의 등장으로 그 역할이 확장되었다. 웹 페이지 뿐만 아니라 서버와 같은 다른 프로그램도 만들 수 있다 ! ! // runnode.js const test.. 2021. 8. 4. 이전 1 ··· 9 10 11 12 13 14 다음