개발 뜯기

1. HTML의 요소(1) 1) HTML이란? ✔ HTML의 생김새 웹페이지를 구성하고 있는 요소(element)를 '태그'로 작성 태그를 통해 어떤 요소인지 명시 태그의 이름은 HTML5 웹 표준에 맞게 작성 This is Title! Fix you HTML은 줄바꿈을 인식하지 못한다.(br tag 사용) 여는 태그 닫는 태그 내용 : 요소의 내용 요소 : 여는 태그, 닫는 태그, 내용을 통틀어 요소라 함태그의 경우, 대소문자를 구분하진 않지만 가독성을 높이기 위하여 모두 소문자로 작성하는 것을 권장 ✔ 빈 요소(Empty elements) 내용이 없는 요소를 빈 요소라고 부른다. ex) 이미지, 수평선, 줄바꿈 등 닫는 태그를 추가로 명시하지 않아도 된다. Empty element, Self-Cols..

0. HTML 개요 1) HTML과 웹 브라우저 ✔ HTML 로 작성된 언어 .html 의 확장명을 갖는다. (ex. .pdf, .hwp ...) 웹 브라우저는 .html 확장자를 실행할 수 있다. 웹브라우저 : 크롬, 엣지, 익스플로러, 사파리... html을 보여주는 단순 뷰어 뿐만아닌 웹페이지 분석 가능한 개발 도구를 제공한다. ✔ HTML(HyperText Markup Language) Programing Language : 데이터를 가공 또는 명령 Markup Language : 데이터를 어떻게 표현할지, 보여질지 정의 2) HTML, CSS and JavaScript HTML : markup, 설계 등 웹 페이지의 골격 및 구조 CSS : 요소의 레이아웃, 스타일링 JavaScript : 동적..

Canvas HTML에선 Canvas API를 제공하고 있다. Canvas는 context를 가지며 이는 요소 안에서 픽셀에 접근할 수 있는 방법이라고 보면 된다. context는 와 사이에 있다 생각하면 된다. 이 때, 실질적으로 그림을 그리는 것은 CanvasRenderingContext2D를 통해 할 수 있다. CanvasRenderingContext2D context를 만드는 방법은 간단하다. context veriable을 만들어주면 된다. const canvas = document.getElementById('my-house'); const ctx = canvas.getContext('2d'); properties fillStyle 도형 내부의 색, 그래디언트, 패턴 등을 정의한다. examp..

Mouse Event mouse와 관련된 대표 event에 대해 알아보자. MouseEvent 인터페이스는 특정 지점을 가리키는 장치를 통해 발생하는 이벤트를 의미한다. (키보드, 마우스처럼) 1. mousedown / mouseup 요소 위에서 마우스를 클릭하거나 뗄 때 발생한다. 2. mouseover / mouseout 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직이거나 커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생합한다. 3. mousemove 마우스를 움직일 때 발생한다. 4. click 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 실행된다다. 5. dblclick 동일한 요소 위에서 마우스 왼쪽 버튼을 빠르게 ..

HTML의 form action, JavaScript의 onsubmit()을 활용하면 다음 페이지로 넘어가는 이벤트를 줄 수 있다. Form action & onsubmit() action : form 데이터를 처리할 프로그램의 URI(Uniform Resource Identifier)를 지정한다. 웹 문서 링크를 문자열 형태로 작성한 뒤 form의 데이터를 전송하면 해당 루트로 이동한다. php나 jsp로 작성한 문서를 지정해 데이터를 처리하는 것도 가능하다. onsubmit() : 양식 제출 이벤트가 발생할 때의 동작을 지정할 수 있다. form 태그 내부에서 type="submit"으로 인해 발생하는 이벤트를 처리할 수 있다. 이벤트 발생과 url이 적용되는 시점 사이에 처리할 동작을 지정할 수 있..