Keep going

이벤트 웹 브라우저나 사용자가 행하는 웹 문서 영역 안에서 이루어지는 동작 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. 마우스 이벤트 click : 사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다. dbclick : 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다. mousedown : 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다. mousemove : 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다. mouseover : 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다. mouseout : 마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다. mouseup : 사용자가 요소 위에 놓인 마..

여러 동작을 묶은 덩어리, 함수 자바 스크립트 프로그램은 단순히 동작 하나만 실행되는 게 아니라 여러 가지 동작이 연결된다. 이렇게 동작해야 할 목적대로 묶은 명령을 함수라고 한다. 함수 선언 및 호출 cs 재사용할 수 있는 함수 만들기 함수를 선언할 때부터 외부에서 값을 받아 줄 변수를 미리 만들어야 한다. 이것을 매개변수라 하고 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣는다. Colored by Color Scripter cs 매개변수 기본값 지정하기 ES6부터는 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능도 생겼다. 예를 들어 매개변수의 변숫값을 넘겨받지 못했을 때 기본값을 사용한다. function multiple(a, b = 5, c = 10) { // b = 5, c = 10으..

13-1 자바 스크립트로 무엇을 할까 웹의 요소를 제어한다. HTML은 웹 문서의 내용을 구성하고, CSS는 웹 문서의 레이아웃이나 색상, 스타일 등을 지정했다. 여기에 자바스크립트를 추가하면 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다. 웹 애플리케이션을 만든다. 최근 웹은 사용자와 실시간으로 정보를 주고 받으며 마치 애플리케이션처럼 동작한다. (길 찾기 서비스, 데이터 시각화 라이브러리 등) 다양한 라이브러리를 사용할 수 있다. 서버에서 했던 일을 클라이언트에서도 할 수 있다. 웹 애플리케이션을 개발할 때 사용하는 리액트, 앵귤러, 뷰와 같은 프레임워크와 그래픽 활용을 위한 D3.js나 DOM을 쉽게 조작할 수 잇게 해주는 제이쿼리 같은 라이브러도 있다. 이 밖..

11-1 변형 알아보기 transform과 변형 함수 웹 요소를 이동시키는 변형 함수는 translate()인데, 예를 들어 웹 요소를 x 축으로 50 px, y축으로 100 px 이동하는 클래스 선택자 .photo를 정의하려면 아래와 같이 사용하면 된다. .photo {transform: translate(50px, 100px); } cs 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형한다. 평면에서 변형할 때는 2차원 좌표를 사용하는데, x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커진다. 3차원 변형은 x축과 y축에 원근감을 주는 z축을 추가해서 변형한다. 3차원 변형에서 z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작..

10-1 연결 선택자 연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다. 선택자를 둘 이상 조합하므로 조합 선택자라고도 하고 콤비네이션 선택자, 콤비네이션 셀렉터 등으로 부른다. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. 현재 요소를 기준으로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 한다. 하위 선택자 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. section p { /* section 요소의 모든 ..

9-1 배경색과 배경 범위 지정하기 배경색을 지정하는 background-color 속성 배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 사용한다. background-color는 앞에서 설명한 16진수나 rgb 값 또는 색상 이름을 사용해서 지정한다. background-color : #008000; background-color : rgb(0,128,0); background-color : green; cs 글꼴이나 글자 크기 등은 태그 선택자에서 지정하면 문제 전체에 상속된다. 따라서 하위 요소에서 스타일을 수정하지 않는 한 문서 전체에 똑같이 적용되었다. 하지만 예외로 background-color 값은 상속되지 않는다. 기본적으로 모든 웹..

8-1 CSS와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 블록 레벨 요소를 만드는 대표적인 태그로 ,,등이 있다. 블록 레벨과 인라인 레벨 body * { border: 1px solid blue; } .accent { color: red; font-weight: bold; } 시간이란... 내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라. Colored by Color Scr..

7-1 글꼴 관련 스타일 글꼴을 지정하는 font-family 속성 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다. 이 속성은 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소에서 주로 사용한다. font-family : | [, ] 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시된다. 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시된다. 따라서 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 선택하기도 하지만 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 생각한다. 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표를 넣어 구분한다. body { font - family ..