분류 전체보기159 5/9(2) 생활코딩 오늘의 진도: WEB2 - JavaScript 함수예고~함수의 활용 1. 함수(function) 예고 (1) 함수의 기본 함수는 수납상자처럼 코드들을 정리정돈하기 위한 도구이다. 야간모드 버튼을 함수로 만들어보자. 야간모드 코드를 잘라내서 head 안에 script 태그 안에 붙여넣었다. (꼭 head 안에 할 필요는 없다.) 그리고 이것을 nightDayHandler라는 이름의 함수로 만들었다. nightDayHandler 뒤의 괄호 안에 self를 쓰고, 기존의 this들을 모두 self로 바꾸었다. body에 input에 onclick에 nightDayHandler라고 쓰고 괄호 안은 this로 바꿨다. 이렇게 하면 nightDayHandler라는 함수를 실행시키라는 뜻이 된다. 2. 함수 (1) .. 2020. 5. 9. 5/9 생활코딩 오늘의 진도: WEB2 - JavaScript 반복문 예고~배열과 반복문의 활용 1. 반복문 예고 night 버튼의 불만족 하나 더 - night 모드에서 링크 글자 색깔이 너무 어두워서 잘 안 보인다. → 얘를 클릭했을 때, 이 웹페이지에 있는 모든 링크의 style 속성값을 밝게 바꿔주는 코딩을 할 것이다. 이 웹 페이지에 있는 모든 태그를 가져온 다음에 그 태그 하나하나에 대해서 반복적으로 powder blue 컬러를 지정한다는 내용의 코드이다. 다음 시간부터는 배열과, 배열을 이용해서 반복적인 작업을 처리하기 위한 반복문을 배울 것이다. 2. 배열(array) 집에 살림이 늘어나면 점점 마음이 힘들어지고 책장이나 수납상자 등을 사거나 방이 여러개 있는 집으로 이사를 갈 수도 있다. 이런 식으로 집.. 2020. 5. 9. 5/8(2) 생활코딩 오늘의 진도: WEB2 - JavaScript 조건문 예고~리팩토링 조건문: 하나의 프로그램이 하나의 흐름으로 가는 것이 아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것 11. 조건문 예고 night/day 버튼에서의 불만족 : 버튼이 두 개가 있는게 불편하다. 그래서 하나의 버튼으로 night 상태에서 클릭하면 day 모드가 되고, day 상태에서 클릭하면 night 모드가 되게 만들고 싶다. = toggle 12. 비교 연산자와 Boolean 데이터 타입 JavaScript의 여러 기능 중에서 비교 연산자(Comparison operator)라는 것과, 그 비교 연산자를 통해 만들어지는 '불리언(boolean)'이라는 새로운 데이터 타입, 그리고 조건문이라는 것을 연달아 같이 살펴볼 것.. 2020. 5. 9. 5/8 생활코딩 < JavaScript 시작 > JavaScript 1. 수업의 목적 (1) 웹페이지가 사용자와 상호작용할 수 있게 해준다. = JavaScript는 사용자와 상호작용을 하는 언어이다' - HTML이 정보라는 멈춰 있는 이미지를 그리는 것이라면 JavaScript는 정보라고 하는 그 이미지를 마치 영화처럼 움직이게 한다. ex) night 버튼을 누르면 까만 바탕에 흰 글씨로 바뀌고 day 버튼을 누르면 흰 바탕에 까만 글씨로 바뀐다. (2) 웹브라우저는 한번 화면에 출력이 되면 그 다음에는 자기 자신을 바꿀 수 있는 능력이 없다. 그것을 해주는 것이 JavaScript이다. = JavaScript는 HTML을 제어하는 언어다. → 웹페이지를 훨씬 더 동적으로, 다이나믹하게 만들어준다. * 검사 - 개발자 도구에서 Elements(=T.. 2020. 5. 8. 5/7~8 생활코딩 < CSS 完 > 오늘의 진도: WEB2 - CSS 그리드 +5/8 ~수업을 마치며 1. 그리드의 기본 사용법 목록과 본문이 나란히 위치하는 디자인하기 그 여러가지 방법 중 최신의 방법 - 그리드 디자인만을 위해 사용하는 태그 div block level element다. 같은 목적으로 만들어진 또 하나의 태그 span 이것은 inline element다. → 목적에 따라서 둘 중 하나를 사용한다. 오늘은 div를 사용할 것이다. 부피감을 알기 위해 선을 그려준다. sytle 태그 안에 다음을 추가한다. div{ border:5px solid gray; } 이 두개의 태그를 나란히 놓기 위해서 이 두개의 태그를 감싸는 부모가 필요하다. 그리고 부모 태그에 id를 준다. (id 값은 아무거나 해도 된다.) grid 태그는 .. 2020. 5. 7. 이전 1 ··· 28 29 30 31 32 다음
