전체 글40 JavaScript를 이용한 로그인 버튼 활성화 들어가기 전에 드디어 위코드에서 JacaScript를 활용한 제일 기초적인 활용을 하게 되었다. 아직까지 JS에 대해 설명하라면 하지도 못하겠지만 부딪혀가며 직접 기억에 우겨넣도록 하자! 우선, 키보드 입력과 연관 된 이벤트들을 알아보자 onekeyup : 사용자가 키보드에서 키를 놓을 때 생기는 이벤트 onekeydown : 사용자가 키보드에서 키를 누를 때 생기는 이벤트 onekeypress : 글씨가 써질 때 생기는 이벤트(shift, ctrl, backspace, tab 한글 등을 인식 못 함) 이런 식으로 input 혹은 button 태그에 관련 함수를 생성하여 넣는 식으로 사용할 수 있다. ➕ button 태그의 disabled 속성 활용 태그의 disabled 속성은 해당 버튼이 비활성화됨을.. 2022. 5. 5. About Class class 객체를 생성하기 위한 템플릿. 함수의 종류라고 볼 수 있으며, class 문법에도 표현식과 선언 방법이 있다. Class 선언 class를 정의하기 위한 방법 중 하나로, class와 함께 class의 이름을 지정해야한다. class WeCode { constructor(height, width) { this.height = height; this.width = width; } } Hoisting function과 class 선언의 중요한 차이점은 function의 경우, 정의를 하기 전에 호출이 가능하지만 class는 반드시 정의를 해야 사용할 수 있다. const student = new WeCode(); class WeCode {} // ReferenceError! 꼭 선언 후 호출하도록.. 2022. 5. 2. About Object Object와 Array의 차이 object와 array의 가장 큰 차이점은 우리가 원하는 것을 찾고자 할 때, object에서의 value 순서는 문제가 되지 않지만 array에서는 순서가 매우 중요하다는 점이다. 접근 방법이 다르기 때문인데, array에서는 number를 이용해서 접근하기 때문이다. 그렇기에 순차적인 데이터는 array를 쓰고, 그렇지 않은 데이터는 object를 쓰는 것이 좋다. 또한, 데이터를 접근할 때 보통 이름을 통해 찾는데 object는 기본적으로 name 기반이라는 장점이 있다. Object 사용 방법 console.log(seulgi.lastName); 괄호 안에는 (object. property) 순으로 쓰여진다. . 은 연산자Operator의 역할을 한다. [ ] B.. 2022. 4. 29. Display Property : inline, block, inline-block Display Display 속성은 각 요소들이 렌더링 되어지는 화면 표기 방법을 결정할 수 있다. 속성들 중 none, inline, inline-block, block 4가지가 주로 쓰인다. HTML에서 기본 표시 값은 HTML 사양이나 브라우저나 유저의 기본 스타일 시트에서 가져오는데, XML의 기본값은 SVG 요소를 포함한 inline이다. 💡 XML ? : eXtensible Markup Language로 W3C에서 개발된 다목적 마크업 언어이다. 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 HTML의 한계를 극복할 목적으로 만들어 졌다. 💡 SVG ? : Scalable Vector Graphics. XML에 기반하여 벡터 그래픽을 표현하기 위해 개발된 그래픽 파일 형식이다. .. 2022. 4. 26. CSS Layout - Position Position Position 속성은 요소의 위치 지정 방법(static, relative, fixed, absolute, sticky)을 지정한다. 지정 후에는 top, bottom, left, right 속성을 통해 배치할 수 있으며, 지정 된 속성에 따라 해당 값들은 다르게 작동한다. (1) static HTML의 요소들은 static이 기본으로 배치되어 있다. position: static; 으로 지정 된 값들은 딱히 특별한 기능을 하지 않으며, 페이지에 의한 기본적인 흐름에 따라 배치된다. div.static { position: static; border: 3px solid #73AD21; } (2) relative position: relative;로 지정 된 요소는 기존의 위치를 기준으로.. 2022. 4. 26. About Semantic Semantic Semantic 자체의 영어 뜻은 다음과 같다. 프로그래밍에서는 코드 조각의 의미를 나타낸다고 한다. "이게 어떻게 시각적으로 보여질까?" 가 아닌 "이 JS 코드 라인을 실행하는 것은 어떤 효과가 있는가?" 혹은 "이 HTML 요소가 가진 목적/역할은 무엇인가?" 에 대한 것이다. Semantic Web ? 그럼 Semantic Web이 뜻하는 바는 무엇일까? 해당 사이트에 따르면 현재 인터넷 사용자 수는 52억이고, 웹사이트는 19억개가 넘는다. www.internetlivestats.com 에 들어가면 실시간으로 움직이는 숫자들을 볼 수 있다. 그럼 이 수많은 사용자와 사이트들 사이에서 살아남기 위해선 어떻게 해야할까? 바로 검색이다. SEO Search Engine Optimiza.. 2022. 4. 26. CS50 Sandbox를 이용한 hello.c (C기초) CS50 Sandbox https://sandbox.cs50.io/ CS50 Sandbox Temporary programming environments for students and teachers. sandbox.cs50.io 폴더 아이콘 옆의 +버튼을 눌러서 파일을 생성해주자 int main(void) { } 의 뜻은 시작한다의 의미를 가지고 있다. 앞으로 작성할 코드는 모두 이 코드 안에 쓰게 될 것이다. printf("hello,world"); C언어에서 printf는 say와 동일하다. 출력하고 싶은 것이 있을 때 사용한다. 코드의 끝에는 항상 ; 을 적어줘야 하며, 글자나 단어, 문장을 적을 때는 항상 ""으로 감싸줘야 한다. 컴파일러 Compiler 이렇게 작성한 코드는 소스코드라 불리며,.. 2022. 2. 4. display:none 과 visibility:hidden 의 차이 display:none과 visibility:hidden는 둘 다 요소를 안 보이게 하는 한다. 그럼 어떤 점이 다를까? 아래 박스를 가지고 테스트를 해보자 .box { border: 10px solid #3498db; padding: 20px; width: 100px; margin: 20px; display: inline-block; } .green { border-color: green; } .red { border-color: red; } Box2에 display:none 적용 .green { border-color: green; display: none; Box2에 visibility:hidden 적용 .green { border-color: green; visibility: hidden; } 적.. 2022. 1. 28. 생활코딩 WEB2 - JavaScript (2) body 태그에 속한 부분을 JavaScript를 통해 변경을 하려고 한다. 그러면 어떻게 body태그를 선택할 수 있을까? 다시 한번 정확히 정리를 해보자면, 우리가 하고 싶은 것은 CSS의 선택자를 이용해서 JavaScript에서 태그를 선택하고 싶은 것이다. 구글에다가 javascript select tag by css selector를 검색하여 어떻게하면 CSS를 선택할 수 있는지 찾아보자 https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector Document.querySelector() - Web API | MDN Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Elem.. 2022. 1. 21. 📖 Study list (update.2022-02-03) 🚀 진행 중 Udemy | The Complete JavaScript Course 2022: From Zero to Expert! 2022-01-28 ~ https://www.udemy.com/course/the-complete-javascript-course 부스트코스 | 모두를 위한 컴퓨터 과학 2022-02-03 ~ https://www.boostcourse.org/cs112/joinLectures/41307 모두를 위한 컴퓨터 과학 (CS50 2019) 부스트코스 무료 강의 www.boostcourse.org 코딩알려주는 누나 | 1.HTML/CSS : 웹개발의 첫단계 복습(1) 2022-01-28 ~ https://codingnoona.thinkific.com/courses/f3851d 1. H.. 2022. 1. 20. JavaScript - function function makeBurger(){ console.log("빵두기") console.log("상추두기") console.log("고기패티두기") console.log("뚜겅덮기") } makeBurger() function makeBurger(type,size,num){ if(num false if(date){ return `${year}/${month}/${date}` } else if(month){ return `${year}년 ${month}월` } else if(year){ return `${year}년` } } console.log(meetAt(2021,1)) 2022. 1. 16. JavaScript - for // for문 for(let i=1; i 2022. 1. 15. JavaScript - if let patient = { name :"hyein", age : 30, disease : "love" } //객체 {} 어레이 [] console.log(patient) console.log(patient.name) //원하는 값만 출력하고 싶을 때 console.log(patient.age) console.log(patient["age"]) //출력되는 값은 같다. patient.name = "HI" patient.age = 25 //원하는 값을 선택적으로 바꿀 수 있다. console.log(patient) let patientList = [{name:"Kumho", age:4},{name:"Eunha", age:2},{name:"Donghae", age:1}] console.log(patientL.. 2022. 1. 14. WEB2 - JavaScript (1) 2022-01-13 HTML과 JavaScript의 만남 1 (script 태그) / HTML과 JavaScript의 만남 2 (이벤트) / HTML과 JavaScript의 만남 3 (콘솔) / 데이터타입 - 문자열과 숫자 JavaScript JavaScript는 사용자와 상호작용하며, HTML을 제어할 수 있는 언어이다. JavaScript html 1+1 JavaScript의 text 출력 코드는 ↓ HTML의 onclick의 속성의 속성 값으로는 반드시 JavaScript가 오고, 웹브라우저는 이것을 기억하고 있다가 onclick 속성이 위치하고 있는 태그를 실행했을 때 동작되도록 한다. 이처럼 웹브라우저 위에서 일어나는 일들을 이벤트Event 라고 한다. 구글 개발자 도구 > 검사 > Consol.. 2022. 1. 13. CodeAcademy - HTML Table Table (1) Rows 을 사용하는 많은 프로그램에서는 에 대한 정의가 이미 되어 있으므로, 그 뜻은 데이터가 있는 행(row)과 열(column) 그리고 셀(cell)을 가지고 있어야 한다는 말입니다. 에 데이터를 넣기 위한 첫번째 단계는 행 요소인 을 이용해 행을 입력하는 것입니다. (2) Data 행만으로는 충분한 데이터를 에 넣지 못합니다. 각 셀의 요소도 정의해줘야 합니다. 이는 를 이용해 추가할 수 있습니다. 73 81 위 예제에는 73과 81이 한 행 안에 입력되었습니다. 두 데이터를 추가함으로써 우리는 두 cell 값을 입력하게 된 것입니다. 브라우저의 표에는 행이 하나고 열이 둘인 표가 됩니다. (3)Headings 은 데이터가 뭘 나타내고 있는지에 대한 제목이 없으면 의미가 없습니다.. 2022. 1. 12. 이전 1 2 3 다음
