본문 바로가기

분류 전체보기20

14. [JavaScript] Module 🏃🏻‍♀️ Module [ 모듈, Module ] 자바스크립트데이터들을 집합해놓은 문서(파일, .js) 기능이나 데이터들을 파일로 구분하는것을 모듈화라고함 모듈 가져오기 import, 모듈 내보내기 export 둘 중 하나의 키워드가 있어야 자바스크립트의 모듈에 해당됨 자바스크립트모듈은 자바스크립트 파일을 호출하는 html의 script 태그에 type="module"속성이 있어야 활용가능함 /* index.html */ - 내보내기, export default 기본 내보내기 하나의 모듈(파일)에서 하나의 default와 하나의 데이터만 내보내기 가능함 export default 333 이름 내보내기 변수에 데이터를 할당해 여러개를 내보낼수 있음 export const welcome = 'Welc.. 2023. 8. 27.
13. [JavaScript] 표준 내장 객체 - JSON 🏃🏻‍♀️ 표준 내장 객체 [ JSON, .json ] 🗄💾 JSON (JavaScript Object Notation) 문자, 숫자, 논리(불린), 객체, 배열, Null의 데이터만 사용가능하고 이 데이터들을 전달하기 위한 표준포멧(undefinde등 사용불가) 문자데이터는 "" 만 사용가능 객체의 마지막 속성과 값뒤에 ,(후행쉼표) 사용 불가능 - JSON.stringify(javascriptDate); 자바스트립트 데이터를 JSON포멧형식의 문자로 변환 console.log(JSON.stringify('Welcome to the world of Poppy!')); // "Welcome to the world of Poppy!" console.log(JSON.stringify(123)); // Jso.. 2023. 8. 27.
12. [JavaScript] 표준 내장 객체 - Object 🏃🏻‍♀️ 표준 내장 객체 [ Object, 객체 ] 🏰 const object; const alien = { name: 'Poppy', age: 300, nationality: 'Space', } - Object.entries(Object); 배열안에 대상객체의 속성과 값을 자식 배열로 만들어 배열안에 배열이 아이템으로 있는 이중배열을 반환함 console.log(Object.entries(alien)); // (3)[Array(2), Array(2), Array(2)] // 0: (2) ['name', 'Poppy'] // 1: (2) ['age', 300] // 2: (2) ['nationality', 'Space'] // length: 3 // [[Prototype]]: Array(0) // fo.. 2023. 8. 27.
11. [JavaScript] 표준 내장 객체 - Array 🏃🏻‍♀️ 표준 내장 객체 [ Array, 객체 ] 🏰 const array; const numName0 = ['One', 'Two', 'Three']; const numName1 = ['Four', 'Five', 'Six']; const users = [ {name: 'Poppy', age: 35}, {neme: 'GguGGu', age: 3}, {name: 'An84', age: 40} ]- .length(); 배열의 아이템 갯수를 반환 console.log(numName0.length); // 3 - .at(num); 배열의 인덱싱기능과 같으나 추가 기능으로 음수를 사용해.. 2023. 8. 13.
Visual Studio Code 주석색 변경 1. Visual studio Code 실행. 2. setting 으로 들어감 (ctrl+,) 3. search settings 에 .json 입력 .json 입력하면 json으로 설정가능한 목록이 뜸 4. 목록 중 Launch (Also modified in Workspace) 의 Edit in settings.json 을 클릭 5. 원하는 색상값을 넣은 코드 추가 (앞뒤에 다른 설정값이 있다면 꼭 ,를 넣어줘야한다 안그럼 지렁이파티 ) }, "editor.tokenColorCustomizations": { "comments": "#f15ab280" }, 6. 짜잔!😆 2023. 8. 8.
git & GitHub 🗄️git git을 사용하면 파일이름을 그대로 유지하며 파일에서 무엇을 변경했는지 변경시점마다 버전으로 저장 가능하고 버전마다 작업했던 내용 확인하고 되돌아갈수있음 버전관리: 문서를 수정할때마다 언제, 어떤 것을 수정했는지 편하고 구체적으로 기록(변경사항 추적) 백업: 내 컴퓨터가 고장날때를 대비해 외장하드, 온라인서비스(백업공간)를 사용해 자료를 저장 깃파일 원격저장소(온라인저장소) 서비스중 가장 많이 사용하는 것이 GitHub 협업: 온라인저장소(GitHub같은)를 사용해 여러사람이 함께 업무시 누가 어떤 부분을 어떻게 수정했는지 기록에 남음 커멘드 라인 인터페이스(CLI): 터미널에서 직접 명령을 입력해 git사용 git, 리눅스 명령 둘다 알아야해 어렵지만 익숙해지면 훨씬 빠르게 git 사용가능(.. 2023. 8. 8.
4. CCS 스타일(속성) 🎨 스타일속성 [ 단위 ] px 기기해상도에 따른 1px의 개수 만큼의 크기 % 백분율, 부모요소의 크기에 딸른 상대적 백분율 em 요소의 자신의 글꼴 크기 기준, 요소가 가지고 있는 글꼴크기가 16px -> 1em = 16px rem 루트(최상위 요소, html)의 글꼴크기를 기준으로 하는 단위 (기본값 16px) html { font-size: 10px;} -> 1rem = 10px vw 뷰포트(브라우저에 보여지는 화면 전체) 기준으로 가로 너비의 백분율 vh 뷰포트 기준으로 세로 너비의 백분율 [ 단축속성, 개별속성 ] 단축속성: 위치별속성지정, top부터 시계방향 띄어쓰기로 구분해 단축시킬수 있음 개별속성: 속성의 값을 개별로도 지정 할수있음 margin, padding, border, borde.. 2023. 8. 8.
3. CCS 문법, 선언방식, 선택자 🎨 CSS 문법 - 선택자 {속성: 값;} 선택자의 속성은(:) 값이다(;) 선택자 (Selector): 스타일을 적용할 대상 속성 (Property): 스타일의 종류 값 (Value): 스타일의 값 {}: 한 선택자에 부여할 여러가지 속성을 세트로 묶어줌 [ 선언방식 ] - 인라인 방식 요소의 style 속성에 직접 작성 (선택자 없음) 우선순위가 너무높아 다른것으로 덮어씌우기 힘들어 유지보수가 어려움 - 링크 방식 htmk>head>link 태그의 속성으로 경로를 지정해 외부 CSS 파일을 가져와 연결 병렬방식: 여러개의 CSS가 link로 연결되어 있으면 한번에 모두 읽어서 해석이 완료되는 CSS문서 부터 적용 - @import 방식 현재문서를 기준으로 @import에 경로를 지정해 다른 CSS문서.. 2023. 8. 8.
2. HTML 기본문법과 핵심 요소 🦴 HTML 기본문법 - 태그(Tag) - 요소(Elements) 요소의 내용(Contents) ㄴ 태그까지 포함한 내용 전체 - 빈(Empty)태그 닫힌태그가 없어 내용을 입력할수 없어 내용이 비어있는 태그 , , 등등... 기본역할이 있지만 속성과 값이 없으면 활용 할수 없음 (br, hr등 제외 태그 있음) : 편리함, HTML 1/2/3/4/5 : 안전함, XHTML(닫는곳 지정 엄격한 문법) / HTML5 - 속성과 값 태그 속성(Attribute)="값(Value)">내용li, ol>li 한 세트 [ Inline(글자) 요소 ] - img (image) 이미지를 삽입하는 요소, src alt 필수속성 -img도 inline요소라 이미지가 화면에 노출되면 글자처럼 취급하기빼문에 baseline .. 2023. 8. 6.
10. [JavaScript] 표준 내장 객체 - Date 🏃🏻‍♀️ 표준 내장 객체 [ Date, 날짜 ] MDN - Date 🏰 const date; // const 인스턴스 = 생성자함수(new) 객체, 함수명, 클래스; const today = new Date(); // 인수로 숫자데이터를 넣어서 원하는 날짜 설정 가능 // 월에 해당하는 인수만 제로베이스트넘버링사용 // 5는 6월에 해당(1월=0, 2월=1...12월=11) const birthDay = new Date(1988, 5, 11, 9, 27, 33); // 원하는 날짜 설정순서: 년, 월, 일, 시, 분, 초 // 인수로 타임스템프 형식의 문자데이터를 넣어도 해석해서 날짜형식의 인스턴스로 반환 const stBirth = new Date('수 Jun 6 1988 9:27:33 GMT+090.. 2023. 8. 6.

티스토리툴바