WEB/HTML+CSS+JS20

• 

  [JavaScript] 함수 정리 2 - 타이머함수, 콜백(Callback) 함수,비동기 처리방식 타이머 함수 setTimeout(함수,시간) : 일정 시간 후 함수 실행 setInterval(함수,시간) : 시간 간격마다 함수 실행 clearTimeout() : 설정된 Timeout 함수를 종료 clearInterval() : 설정된 Interval함수를 종료 //setTimeout, clearTimeout 사용 예제 const timer = setTimeout(() => {console.log("HI!")},3000) const h1El=document.querySelector('h1') h1El.addEventListener('click', () => { clearTimeout(timer) }) //setInterval, clearInterval 사용 예제 const interval=setInt.. WEB/HTML+CSS+JS 2021. 7. 8.

• 

  [JavaScript] 함수 정리 1-화살표함수, 즉시 실행함수(IIFE), 호이스팅(Hoisting) 기본적인 함수 작성법 //함수 정의 const double=function(x,y){ return x*2 } //함수 호출 console.log('double :',double(7)) 화살표 함수 //함수의 축약형 //화살표 함수를 이용해 간단하게 함수를 작성할 수 있다. //const [함수이름] = [(함수 인자- 하나이면 괄호 생략가능)] => [함수가 반환할 내용] const doublearrow = x => x*2 console.log('doublearrow :',doublearrow(7)) //const [함수이름] = [(함수 인자- 없으면 괄호)] => [함수가 반환할 내용] const sh = x => ({name:'kite'}) console.log('sh :',sh(7)) 즉시 실행함.. WEB/HTML+CSS+JS 2021. 7. 8.

• 

  [JavaScript] document.write()함수 위치 JS로 이것저것 해보다가 document.write()함수를 사용시 언제는 새로운 페이지에 출력되고, 언제는 현재 페이지에 작성되길래 궁금해서 알아봤다. document.write()와 document.writeln() 우선 document.write()함수에 대해 알아보자. 말 그대로 괄호 안에 들어가있는 것을 페이지에 "쓰는(출력하는)" 함수이다. 아래 예제를 보면 이해할 수 있다. 아래와 같이 글자를 써주는 함수이다. document.write()하면 document.writeln()함수도 있다. writeln()함수는 입력한 값에 "\n"을 추가하여 입력해준다. 그러나 실제로 사용해보면 줄바꿈이 아니라 한칸씩 띄어쓰기되어 출력되는 것을 볼 수 있다. 위 코드를 보면 를 사용해야만 줄바꿈이 된다는 .. WEB/HTML+CSS+JS 2021. 4. 9.

• 

  [CSS] 자식, 후손 선택자 차이점 CSS 선택자에 대해 공부하다 s1 s2 : s1요소에 포함된 s2요소를 선택한다. (후손 관계) s1>s2 : s1요소의 직계 자식 요소인 s2를 선택한다.(자식관계) 라고 나와있는 부분을 봤는데 문득 궁금해져서 찾아봤다. 결론부터 말하자면 자식(자손)이 더 작은 범위이다. 자손이라고 설명되어 있는 글도 있던데 자식이 더 직관적으로 받아들이기 쉬운 것 같다. 즉 자식은 바로 선택 태그 바로 아래 계층에 있는 것들, 후손은 선택 태그 안에 들어가 있는 모든 것 이라고 생각하면 될 것 같다. 바로 예제를 보도록 하자. hi hd sg 리스트 안 리스트1 리스트 안 리스트2 리스트 안 리스트3 he hello 위 코드를 실행시키면 아래와 같다. 이건 뭐 쉬운 내용이라 별로 어려울 것이 없을 것이다. CSS .. WEB/HTML+CSS+JS 2021. 3. 24.

• 

  [HTML+CSS+JavaScript]타이핑 효과 랜딩 페이지 만들기 https://www.youtube.com/watch?v=e56H5n1SvEs&t=2s 위 강의를 보고 비주얼 스튜디오 코드를 통해 실습을 진행하였다. HTML 1. 파일 생성하기 index.html, main.js, style.css파일을 각각 생성한다. VScode에서는 !+키를 누르면 html의 기본 구조가 자동완성된다. 이와 같이 div.wrap을 body태그에 입력한 뒤 키를 누르면 로 자동 완성이 된다. 2. 아이콘 폰트 사용하기 구글에 material icon이라고 검색하면 맨 위에 아래와 같은 링크가 뜬다. https://material.io/resources/icons/?style=baseline Material Icons Get Material Icons material.io 들어가서 .. WEB/HTML+CSS+JS 2021. 1. 13.

• 

  바닐라 스크립트 - part 3정리 첫번째 영상을 보고 아래와 같이 현재 시간을 보여주는 코드를 작성했다. 00:00 //clock.js const clockContainer = document.querySelector(".js-clock"); clockTitle=clockContainer.querySelector("h1"); function getTime(){ const date=new Date(); const minutes=date.getMinutes(); const hours=date.getHours(); const seconds=date.getSeconds(); clockTitle.innerText=`${hours}:${minutes}:${seconds}`; } function init(){ getTime(); } init() 여태.. WEB/HTML+CSS+JS 2021. 1. 4.

• 

  바닐라 스크립트 - part 2 정리 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 - 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 이번에는 바닐라 스크립트를 공부할 것이다. 학습 도구는 Repl을 사용했다. 다운받을 필요가 없고 사용법도 간단하다. https://repl.it/~ Log In Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin, QBasic, F.. WEB/HTML+CSS+JS 2021. 1. 4.

• 

  JavaScript 내용정리 - 4 함수 다른 언어와 활용이 유사해서 실습만 해보고 넘어가도록 하겠다. Function Basic Parameter & Argument Return 함수 정의 방법 function(매개변수1, 매개변수2 ......){ 함수 내용; } 함수의 리턴형에 대해 살펴보자. Function Basic Parameter & Argument Return 이 코드에서는 주석처리한 부분만 눈여겨 보면 될 듯 하다. 자바 스크립트는 문자와 숫자를 더하면 숫자를 숫자를 문자로 간주하기 때문에 +를 덧셈이 아닌 문자결합연산자로 사용한다. 객체 이번에는 객체를 생성하고, 데이터를 저장하고, 또 그 데이터에 접근해 볼 것이다. 객체를 생성하는 방법 + 데이터를 저장하는 방법 var coworkers={ "programmer":"e.. WEB/HTML+CSS+JS 2021. 1. 4.

• 

  JavaScript 내용정리 - 3 https://opentutorials.org/course/3085/18879 조건문 예고 - 생활코딩 조건문 예고 2017-12-02 00:14:09 opentutorials.org 여기서 부터 공부 시작이다. 조건문 기초 조건문은 다른 프로그래밍을 해봤다면 내용이 같아서 실습만 해보고 넘어갔다. Conditional statements Program If-true If-false 조건문 활용 WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and inte.. WEB/HTML+CSS+JS 2021. 1. 3.

• 

  JavaScript 내용정리 - 2 데이터 타입 - 문자열과 숫자 숫자(Number) -연산 가능 + : 더하기 - : 빼기 * : 곱하기 / : 나누기 문자열(String) -따옴표로 묶어줘야함 -str.length -> 글자수 리턴 -str.toUpperCase() -> 모두 대문자로 바꿔줌 -str.indexOf('찾을 문자') -> 찾고자 하는 문자가 몇번째 자리에 있는지 알려줌 예시 'Hello world'.indexOf('O') //대문자 O // -1리턴 (값을 찾을 수 없기 때문) 'Hello world'.indexOf('o') //소문자 o // 4리턴 (첫번째 자리를 0으로 해서 소문자o가 4번째 자리에 있기 때문) 아래 링크에서 더 많은 자료를 볼 수 있다. https://developer.mozilla.org/ko/d.. WEB/HTML+CSS+JS 2021. 1. 2.

• 

  JavaScript 내용정리 - 1 https://opentutorials.org/course/3085 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상 opentutorials.org 자바 스크립트 강의는 위 링크에서 볼 수 있다. 자바스크립트를 사용하려면 내용을 태그로 감싸주어야 한다. 글을 쓰려면 아래와 같이 한다. HTML hello world 1+1 HTML은 1+1을 입력하면 그대로 출력하지만 자바스크립트는 자동으로 2라고 계산하여 출력한다. 이벤트 이렇게 위와 같이 웹 브라우저에서 특정한 일이 발생했을 때 그것을 .. WEB/HTML+CSS+JS 2021. 1. 1.

• 

  CSS 내용정리 - 선택자 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 이곳에서 선택자 게임을 진행 할 수 있다. A B : A안에 있는 모든 B를 선택한다. B는 다른 요소의 내부에 있기 때문에 자손이라고 부른다. -> #A B :와 같이 선택자끼리 자손 선택자로 묶을 수 있다. A.B : 모든 A중에서 클래스값이 B인 태그 선택 * : 전체 선택 A* : A안에 있는 모든 요소 선택 A+B : A에 인접한 B선택(하나만) A~B : A에 인접한 B선택(여러개 선택 가능) A>B : A하위의 모든 B선택 A:first-child : 이 웹페이지에서 첫번째로 등장하는 A선택.. WEB/HTML+CSS+JS 2020. 12. 31.

• 

  CSS 내용정리 - 4 오늘은 미디어 쿼리부분부터 공부 시작이다. https://opentutorials.org/course/3086/18323 반응형 디자인 - 생활코딩 반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항 opentutorials.org 미디어 쿼리 기본개념 반응형 웹에서 미디어 쿼리는 주로 기기의 화면 크기에 따른 배치를 할 때 사용한다고 한다. Responsive 처음에 이런 코드가 있다고 하자. 이 코드의 실행 결과는 다음과 같다. 이때 창의 크기가 작아지면 Responsive을 감싸고 있는 테두리를 없애보도록 하자. 중간에 아래 코드를 추가해준다. @media(max-width:880px){ div{ display:none; }.. WEB/HTML+CSS+JS 2020. 12. 31.

• 

  CSS 내용정리 - 3 div 와 span 태그 div태그는 block level element이고 span태그는 inline element이다. 아래 코드와 실행 결과를 보자. NAVIGATION ARTICLE 저기서 div를 span으로 바꿔주면? 아래와 같이 된다. grid 기본개념 정리 CSS의 grid기능을 이용하면 다양한 레이아웃들을 만들 수 있다. 저번시간에 우리가 만들고자 했던 사이트에서 CSS관련 글을 칸 옆에 나란히 배치하기 위해 이 기능을 사용할 것이다. grid기능을 사용하기 위해서는 먼저 배치할 아이템들(구성요소, 즉 배치하고 싶은 것들)을 그리드 컨테이너로 감싸줘야 한다. 직접 코드를 보도록 하자. 그리고 7번째 줄부터 {}로 묶여있는 부분들이 배치를 하는 부분이다. 먼저 그리드를 작성하기 위해 컨테이.. WEB/HTML+CSS+JS 2020. 12. 30.

• 

  CSS 내용정리 - 2 오늘은 WEB2 CSS - 8. 박스모델 부분부터 이어서 공부를 할거다. 링크는 아래에 있다! https://opentutorials.org/course/3086/18319 박스모델 - 생활코딩 CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항 opentutorials.org 코드는 이상태에서 시작한다! CSSCascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. 시작하기전 padding, border, margin이 각각 어느 부분을 가리키는지 보고.. WEB/HTML+CSS+JS 2020. 12. 29.

• 

  CSS 내용정리 - 1 http://opentutorials.org/course/3086 CSS 사용해보기 첫 실습은 anchor 태그로 묶인 부분들의 글씨를 모두 빨간색으로 바꾸는 것이다. 예전에는 태그를 이용했었다고 한다. 아래 코드와 같이 말이다. WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and .. WEB/HTML+CSS+JS 2020. 12. 22.

• 

  HTML 기초 내용 정리 - 4 마지막! 이제 HTML의 표, form 부분을 정리할 것이다. HTML - 표 https://opentutorials.org/course/2039/10949 표 - table - 생활코딩 표 - table 2015-12-06 10:34:20 예제 이름 성별 주소 최진혁 남 청주 최유빈 여 청주 예제 이름 성별 주소 회비 최진혁 남 청주 1000 최유빈 여 청주 500 합계 1500 예제 이름 성별 주소 회비 최진혁 남 청주 opentutorials.org 우선 예제 1을 분석해보자. 이름 성별 주소 최진혁 남 청주 최유빈 여 청주 표를 만드려면 우선 전체를 태그로 감싸 주어야 한다. 그리고 같은 행의 데이터들은 태그로 감싸주어야 한다.(여기서 r은 row를 의미한다.) 그리고 각 데이터들은 로 감싸준다... WEB/HTML+CSS+JS 2020. 12. 6.

• 

  HTML 기초 내용 정리 - 3 오늘은 https://opentutorials.org/course/3084/18891 웹호스팅 (github pages) - 생활코딩 --- 직접 웹서버를 운영하는 일은 쉽지 않은 일입니다. 우선 컴퓨터가 있어야 하고요, 컴퓨터가 냉장고처럼 항상 켜져 있어야 합니다. 웹서버라는 프로그램을 배워서 설치해야 합니다. 또 인터넷 opentutorials.org 여기부터 공부를 시작 할 것이다. 차근차근 따라해보자. 우선 할 일은 1. 깃허브 가입 2. 저장소(repository)생성 3. 파일 업로드 4. 링크 생성 이다. 깃허브 가입은 이미 되어있어서 생략하겠다. 위 사진에서 초록색 New버튼을 누른다. 이제 1번에는 저장소 이름, 2번에는 저장소의 공개 여부를 기입한 뒤 3번에는 빨간 박스부분을 체크하고 .. WEB/HTML+CSS+JS 2020. 12. 6.

• 

  HTML 기초 내용 정리 -2 저번에 하던 내용에 이어서 HTML공부를 이어서 하도록 하자! 이건 지난내용 복습..... 문자가 깨지는 경우가 있다는데 그 이유는 웹페이지가 저장한 문자 표현방식과 웹 브라우저가 웹페이지를 해석하는 방식이 일치하지 않기 때문이다. 위 사진에서 오른쪽 아래를 보면 UTF-8이라고 쓰여있는데 이는 이 웹페이지가 UTF-8로 저장되었다는 뜻이다. 즉 웹브라우저에 UTF-8로 열라는 지시를 내려 주어야 한다. 이것이 두번째 줄에 있는 가 의미하는 것이다. 또 공부했던대로 를 첫줄에 써주고 로 head와 body태그를 감싸주도록 하자. 이번에는 링크를 한번 넣어보자! 링크를 넣을 때는 로 감싸준다. a는 anchor의 약자이다. anchor은 닻을 의미하는데 정보의 바다에 정박한다는 의미라고 한다. 아래 그림을.. WEB/HTML+CSS+JS 2020. 12. 4.

• 

  HTML 기초 내용 정리 - 1 동아리에서 진행하는 프로젝트를 시작하게 되었다. 나는 웹이 처음이라서 이렇게 공부할 거리를 주셨는데 일요일까지라 슬슬 시작해보려 한다! 강의는 아래 링크에서 볼 수 있다. https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org 실습환경을 준비하는 과정은 우선 atom을 까는 것으로 시작한다. 구글에 검색하면 쉽게 다운받을 수 있다. 강의에서는 file - open folder을 하니 옆에 폴더 창이 생기던데 나는 안생겨서.. WEB/HTML+CSS+JS 2020. 12. 2.