분류 전체보기

2. HTML의 요소(2) 3) 텍스트 요소 ✔ 제목 ~ ~ 요소는 6단계의 구획 제목을 나타낸다. Heading h1 Heading h2 Heading h3 Heading h4 Heading h5 Heading h6 구획 단계는 이 가장 높고 >이 가장 낮음 글씨 크기를 위해 제목 태그를 사용하지 않을 것을 권장(CSS style 사용) 제목은 순차적으로 기입하는 것을 권장 웹 접근성을 위해 전체 페이지의 목적을 설명하는 은 페이지 당 하나를 권장 검색 엔진이 을 먼저 찾아 웹 페이지의 전체 내용을 아우르는 것을 인지. ✔ 본문 - 요소는 하나의 문단을 나타낸다. HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있다. 문단은 블록 레벨 요소이다. 닫는 태그 문장의 한 줄 ..

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 동일한 요소 위에서 마우스 왼쪽 버튼을 빠르게 ..