본문 바로가기

분류 전체보기

 (143)
[JavaScript] Todo-List 만들기(1) 자바스크립트 코드는 다음과 같다. index.js // 여기에서 코드를 작성하세요! let todoList = []; let num =1; let controlNum; let controlTodo; const todoListElement = document.querySelector(".todo-list"); const initTodoFormElement = document.querySelector(".todo-item"); const initTodoInputElement = document.querySelector("input"); const proposeNewTodoElement = document.querySelector(".todo-item-add"); // console.log(proposeNew..
[JavaScript] 230327 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. html의 도움을 받으려면 태그를 써주는 것이 좋다. form이 submit될 때마다 페이지는 새로고침된다. 2. const loginInput = document.querySelector("#login-form input:first-child"); const loginButton = document.querySelector("#login-form input:last-child"); function onLoginSubmit(tomat..
[JavaScript] 230326 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. document를 이용하면 JavaScript에서 html에 접근할 수 있다. 2. html 속에 있는 내용을 id로 가져오기. 실행할 html 파일이다. Grab me! 그리고 html을 실행하고 나서 콘솔에서 document.getElementById("title"); 을 입력해주면 3. 하 망했다. html 파일을 liveserver 이라는 VScode 확장 프로그램을 사용해서 실행했었는데 const title = documen..
[JavaScript] 230324 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. array 배열 파이썬의 list 같은 개념이다. 숫자, string, bool 등 여러 자료형이 하나의 array에 함께 들어갈 수 있다. 시작과 끝에 대괄호를 붙인다. [와 ] const mon = "mon"; const tue = "tue"; const wed = "wed"; const thu = "thu"; const fri = "fri"; const sat = "sat"; const sun = "sun"; const days..
[JavaScript] 230323 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. 자바스크립트에서는 string을 써줄 때 큰 따옴표, 작은 따옴표 모두 가능하다. "hi" 'hi' 2. app.js에 이렇게 써줬다. console.log("이건 콘솔에 나타날 거야."); 그리고 나서 아래의 app.js를 연결시킨 index.html를 실행하면 이렇게 콘솔에 뜬다. console.log(출력할 내용); 를 하면 괄호 안에 있는 것들이 콘솔창에 출력된다. 3. 변수 만들기 (1) const const는 constan..
[JavaScript] 230322 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 자바스크립트를 배우는 건 오늘이 처음이다. 열심히 해보쟈. 1. 자바스크립트를 다루는 방법 중 하나는 브라우저의 console을 이용하는 것. 자바스크립트는 브라우저에 이미 설치되어있음. 오른쪽 마우스 > 검사 눌러서 이렇게 콘솔을 눌러주면 된다. 맥 기준 fn + F12 를 눌러도 바로 콘솔창으로 갈 수 있다. 2. console에 alert("HI") 를 쳤더니 이렇게 뭐가 떴다 자바스크립트를 이용해서 내가 브라우저에 영향을 미친 것이..
[HTML/CSS] 220318 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 가상클래스(Pseudo Class),가상 요소(Pseudo Element)에 대해 알아보자. 1. 슈도 코드(pseudocode) 프로그램을 작성할 때 각 모듈이 작동하는 논리를 표현하기 위해 사용하는 언어. 다른 프로그램 개발자나 이용자에게 모듈이 하는 일과 작동원리를 설명하는 데에 쓴다. 2. :hover 가상 클래스 가상 클래스(pseudo class)를 이용하면 요소의 상태에 따른 스타일 지정이 가능. :hover : 마우스가 위에 있을 때 적용. Click Here This is a normal div. This is a normal div에 마우스를 올려놓으면 요로케 바뀜..
[HTML/CSS] 220317 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 이제 CSS에 대해서 알아보자. 1. CSS: 웹의 전반적인 스타일을 미리 저장해 둔 스타일시트 2. 인라인 스타일(In-line Style) 속성 Heading 1 Heading 2 -거의 대부분의 HTML 태그에 사용할 수 있는 속성 -화면에 보여지는 visual한 상세 설정이 가능함. 웹페이지에는 다음과 같이 표시됨. 더보기 Heading 1 Heading 2 3. CSS -Cascading Style Sheet의 약자 -cascade: 폭포 - 즉 계단식 폭포와 같이 상위요소-> 하위요소로 차례로 스타일 적용 4. 페이지 스타일 Page style Heading 1 Headi..
[HTML/CSS] 230316 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. Form에 대해서 더 알아보자. 1. 자유 텍스트 입력 Textarea Please introduce yourself here - 사용자의 자유로운 텍스트 입력 - rows, cols 속성으로 크기 조절 가능 - 와 사이의 글자가 textarea 안에 표시된다. 웹페이지에는 다음과 같이 표시된다. 더보기 Please introduce yourself here Please introduce yourself here이 textarea 안에 들어있고 이 글자들은 커서를 textarea 안에 갖다 대도 사라지지 않는다. 자기소개를 하려면 저 글자들을 지우고 써주면 된다. 2. 파일 선택 F..
[HTML/CSS]220314 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 이미지를 다뤄보자. 1. 이미지 주소를 복사해 HTML에 가지고 오면 내 서버가 아니라 다른 서버에서 이미지를 가져올 수 있다. 2. 이미지 Image 원본 width만 지정 height만 지정 -태그는 -src 속성에 이미지 파일의 URL을 지정, 종료태그 없음. 여기서 src는 source의 약자 -width = "xx", height="xx"로 크기를 픽셀(pixel) 단위로 지정 가능 -width, height를 지정해주지 않으면 원본 크기로 -width 속성이나 height 속성 둘 중 하나만 지정하게 되면, 나머지는 원본 크기 비율에 따라 자동 조절됨. -웹 페이지에는 다..

티스토리툴바