꿈꾸는 새벽하늘

[노마드코더] 바닐라 JS로 크롬 앱 만들기 1. 로그인 기능 HTML CSS .hidden { display: none; } JavaScript const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); //반복되는 string들을 대문자 변수로 저장해서 오타로 인한 에러 방지 const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit(event) {..

1. JavaScript는 HTML과 연결되어 있다. console에 document를 입력하면 작성한 HTML을 가져올 수 있다. JavaScript에서 HTML을 읽어올 수도 있고, JavaScript에서 HTML을 수정할 수도 있다. 2. document는 object이다. 브라우저에서 제공하는 객체중 document 는 JS 에서 HTML 파일을 불러올 수 있도록 도와준다. 3. JavaScript에서 HTML 변경하기 => title element가 "My Day Plan"으로 변경된다. 4. JavaScript에서 HTML element를 가져오기 (1) getElementById Grab me!//HTML const title = document.getElementById("title");/..

1. 함수를 활용해서 calculator 객체 만들기 const calculator = { plus: function(num1, num2) { console.log(num1 + " + " + num2 + " : " + (num1 + num2)); }, minus: function(num1, num2) { console.log(num1 + " - " + num2 + " : " + (num1 - num2)); }, times: function(num1, num2) { console.log(num1 + " * " + num2 + " : " + (num1 * num2)); }, divide: function(num1, num2) { console.log(num1 + " / " + num2 + " : " + (n..

1. HTML, CSS, JavaScript 연결 2. 변수명 표기법 JS에서는 변수명을 표기할 때 주로 camelCase 표기법을 사용한다. camelCase 표기법 : 첫 번재 단어 이후로 이어지는 각 단어들의 첫 글자를 대문자로 쓰는 것 const myName = "user"; const veryLongVariableName = "long"; 3. 변수 선언 방식 변수를 선언할 때는 기본적으로 const를 사용하고, 재할당이 필요한 경우에만 let을 사용한다. const : 변수 재할당 불가능 let : 변수 재할당 가능 const a = 5; const b = 2; let myName = "user1"; console.log(a + b); //7 console.log(myName); //user1..

1. 그리드 (1) 와 TITLE ARTICLE TITLE ARTICLE 아무 의미 없는 디자인 목적의 태그 block level element 자동 줄바꿈 O 아무 의미 없는 디자인 목적의 태그 inline level element 자동 줄바꿈 X (2) grid-template-columns grid-template-columns: 150px 1fr; 첫 번째 태그는 150px로 지정, 두 번째 태그는 남은 공간 사용 grid-template-columns: 1fr 1fr; 화면을 1:1로 나누어서 사용 grid-template-columns: 2fr 1fr; 화면을 2:1로 나누어서 사용 2. 그리드 적용 My Web About Notice Contact NOTICE This is 'Notice' ..

1. CSS 등장 배경 (1) HTML이 정보에 전념하게 하기 위해서 HTML로부터 디자인에 대한 기능을 분리한 것. (2) CSS를 통해 웹페이지를 디자인하는 것이 HTML을 통해 웹페이지를 디자인하는 것보다 훨씬 효율적. 2. style 태그 My Web About Notice Contact => 모든 태그에 디자인 적용 3. style 속성 My Web About Notice Contact => style 속성이 위치하고 있는 태그에 디자인 적용 (1) style 속성 2개 사용하는 법 Contact 4. CSS 속성 5. 선택자(Selector) My Web About Notice Contact This is 'Notice' page. => 기본적으로 모든 링크는 검은색, 사용자가 방문했던 링크는..

1. HTML 기본 구조 What is Web? This is Web. : 현재 문서가 HTML5 문서 타입임을 명시한다. : HTML 문서의 루트(root) 요소를 정의한다. HTML로 작성된 모든 내용은 과 사이에 있어야 한다. : HTML 문서의 메타데이터(metadata)를 정의한다. 메타데이터란 HTML 문서에 대한 정보로, 웹에는 직접적으로 표현되지 않는 정보이다. 안에는 , , 등이 있다. 은 웹의 제목을 나타낸다. : 웹을 통해 사용자에게 보여지는 내용(content) 부분이다. 2. 목록 태그 1. HTML 2. CSS 3. JavaScript 1. HTML 2. CSS 3. JavaScript HTML CSS JavaScript ul 태그 : 순서가 없는 목록 - 글머리 기호를 붙여서 ..

HTML(HyperText Markup Language) : Basic Tag 1. Bold Tag & Underline Tag This is my web page : Bold web : underline This is my web => This is my web 2. Heading Tag This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 3. New Line Tag I am a student. What is your name? Nice to meet you. 4. Paragraph Tag I am a student. What is your name? Nice t..