New: kr-steemAll contenthive-129948hive-196917krzzanhive-180932steemhive-183959hive-166405photographyuncommonlabhive-185836hive-150122hive-183397hive-144064lifebitcoinhive-188619krsuccesshive-101145hive-139150hive-103599hive-124908hive-109690hive-184714hive-180301TrendingNewHotLikerschainsmokerslav (62)in hive-137029 • 2 years ago[캔버스] 3_2-1. 캔버스로 사각형 그리기 메서드_2[캔버스] 3_2-1. 캔버스로 사각형 그리기 메서드에 이어 설명. [02. 사각형 그리기] :chainsmokerslav (62)in hive-137029 • 2 years ago[캔버스] 3_2-1. 캔버스로 사각형 그리기 메서드[02. 사각형 그리기] : 테두리만 있는 사각형은 strokeRect() 메서드를 사용하여 그리며, 색이 채워진 사각형은 fillRect() 메서드를 사용하여 그린다. 추가로 clearRect() 메서드를 사용하여 특정 영역을 지우는 메서드도 존재한다. strokeRect(x, y, width, height) : 테두리만 있는 사각형을…chainsmokerslav (62)in hive-137029 • 2 years ago[캔버스] 3_2-0. 캔버스로 사각형 그리기[02. 사각형 그리기] : 사각형을 그리기 위해서는 시작점인 x, y좌표와 너비, 높이를 나타내는 네 가지의 값을 요구(필요로)하게 된다. 캔버스를 기준으로 캔버스 왼쪽 맨 위의 꼭짓점이 x, y좌표인(0, 0)이 된다. (0, 0)좌표를 기준으로 각각이 지정한 (x, y)좌표를 시작으로 하여 너비(width), 높이(height) 크기의 사각형이…chainsmokerslav (62)in hive-137029 • 2 years ago[캔버스] 3_1-1. 웹에서의 캔버스_3[캔버스] 3_1-1. 웹에서의 캔버스_2에 이어 설명. [01. 캔버스] : 해당되는 id에 해당하는 캔버스를 불러와서 canvas 객체를 생성, 생성후 getContext(2d) 메서드를 호출하여 그리기 컨텍스트를 생성한다. 아직 3d 컨텍스트(context)는 완전하지 않기 때문에 2d 컨텍스트에 대해만 다루었다. 이후엔 실제로 JS로…chainsmokerslav (62)in hive-137029 • 2 years ago[캔버스] 3_1-1. 웹에서의 캔버스_2[캔버스] 3_1-1. 웹에서의 캔버스에 이어 설명. [01. 캔버스] : 만약 canvas 요소에 너비나 높이를 지정하지 않으면 자동으로 너비(W) 300px, 높이(H) 150px의 캔버스가 생성된다. 캔버스가 만들어졌다. 이제 실제적 그림을 그릴 JS(자바스크립트)를 작성해야 한다. 생성했던 canvas 요소에 아이디canvas를…chainsmokerslav (62)in hive-137029 • 2 years ago[캔버스] 3_1-1. 웹에서의 캔버스[01. 캔버스] : 캔버스가 가장 주목받는 이유는 바로 단순히 브라우저에 그림을 표현하는 것을 넘어 여러 가지 효과를 주고, 텍스트를 표현하고, 간단한 애니메이션까지 표현 가능하게 된 것 때문이다. 브라우저에 그림을 그리기 위해서는 canvas 요소(태그)를 사용하여 그림을 그릴 영역을 지정하고 실제 그림을 그리는 것을 JS로 응용한다. 캔버스를…chainsmokerslav (62)in hive-137029 • 2 years ago[캔버스] 3_1-0. 웹에서의 캔버스[01. 캔버스] : HTML5에서 가장 중요하고 주목이 필요한 것중 하나는 캔버스이다. 이 캔버스의 사전적인 의미는 유화를 그릴 때 쓰는 천이라는 뜻으로, HTML5에서는 '캔버스라는 브라우저에 그림을 그리기 위하여 놓는 것'이라고 생각하면 이해하기 쉬울 것이다. 앞으로 캔버스를 공부하면서 도형 및 선을 그리는 방법에 대해서 설명할 예정.chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹] SUMMARY-2. 레이아웃/표현을 위하여 추가된 요소레이아웃을 위하여 추가된 요소 -header : 머리말을 나타내는 요소 -hgroup : 제목과 부제목을 묶는 요소 -nav : 메뉴 부분을 나타내는 요소 -article : 개별 콘텐츠를 나타내는 요소 -section : 제목별로 나눌 수 있는 요소 -aside : 좌우측의 사이드바를 나타내는 요소 -footer : 제작자의 정보나…chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현_3[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현_2에 이어 설명. [02. 표현을 위한 요소] : 콘텐츠 타입별 요소 분류 : HTML5에서 각 요소(엘리먼트/태그)가 가지고 있는 의미는 더 중요해져가고 있다. 이에 따라 WHATWG(www.whatwg.org)에선 각 요소(엘리먼트/태그)를 일곱가지 타입별로…chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현_2[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현에 이어 설명. [02. 표현을 위한 요소] : -> progress 요소를 사용하여 최소값 0, 최대값 100의 Progress바를 생성하고 현재 수치로 72를 지정.chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현[02. 표현을 위한 요소] : 많은 파일을 복사 붙여넣기 하거나 파일 다운로드를 웹브라우저 내에서 할 때 작업 진행 상태를 확인 가능하다. progress 요소는 바로 어떠한 작업에 대하여 현재 진행 중인 상태를 나타낼 때 사용하는 요소이다. 단순히 progress 요소만을 사용한다면 멈춰져 있는 단순한 진행 상태 바를 확인할 수 있을 것이다.…chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-3. 시맨틱 웹에서의 범위나 비율 표현_2[시맨틱 웹을 위한 태그] 2_2-3. 시맨틱 웹에서의 범위나 비율 표현에 이어 설명. [02. 표현을 위한 요소] : 9 : meter 요소를 사용하여 디스크 사용률에 대하여 최소값(min) 0, 최대값(max) 100, 유효한 최소값(low) 10, 유효한 최대값(high) 90으로 지정한다. 그리고 실제 사용률(value) 값으로…chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-3. 시맨틱 웹에서의 범위나 비율 표현[02. 표현을 위한 요소] : meter 요소는 일정 범위 안의 값이나 분포 비율 등을 나타낼 때 사용한다. 예를 들자면 현재 디스크 사용률이나, 성적 비율 등을 나타낼 때 사용할 수 있다. 범위와 값을 표현하기 위하여 meter는 아래와 같은 속성을 가지고 있다. 0 value : 실제로 측정한 데이터 지정 0 min : meter…chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-2. 시맨틱 웹에서의 시간 표현_2[시맨틱 웹을 위한 태그] 2_2-2. 시맨틱 웹에서의 시간 표현에 이어 설명. [02. 표현을 위한 요소] :chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-2. 시맨틱 웹에서의 시간 표현[02. 표현을 위한 요소] : time 요소를 사용하여 시간 표현에 대해서 의미를 부여할 수 있다. 예를 들자면 단순히 '2023_01_01'이라고 표기를 하게 되면 시각적으로는 날짜라고 정확하게 알 수 있지만 시스템에서는 그냥 일반적 텍스트인지, 날짜인지를 구분하기 힘들다. 그러므로 날짜나 시간 등에 대해서 time 요소를 사용하여 의미를…chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-1. 시맨틱 웹에서의 특정 텍스트 강조 표현_2[시맨틱 웹을 위한 태그] 2_2-1. 시맨틱 웹에서의 특정 텍스트 강조 표현에 이어 설명. [02. 표현을 위한 요소] : mark 요소는 모든 브라우저에서 지원되고 있다. 지원이 중단된 익스플로러든, 지원중인 파이어폭스, 크롬, 사파리, 오페라 등등이다.chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-1. 시맨틱 웹에서의 특정 텍스트 강조 표현[02. 표현을 위한 요소] : HTML4에서는 강조하고자 하는 문구나 단어에 strong요소를 주로 사용해 왔다. HTML5에서는 이에 추가로 mark 요소를 사용할 수 있다. 하지만 만약 시각적으로 강조하고자 하는 용도로 사용한다면 기존의 string 요소만으로도 충분할 것이다. 하지만 의미적으로도 강조하고자 한다면 mark요소를 사용해야 한다.…chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-0. 시맨틱 웹에서의 표현을 위한 요소[02. 표현을 위한 요소] : HTML5에는 시맨틱 웹을 위해 레이아웃을 위한 요소뿐 아니라 표현을 위한 요소도 추가되었다. 표현을 위한 요소라 하면, 시각적인 효과를 위한 요소, 시간을 표현하는 요소, 일정 범위 안의 값을 표현하는 요소 등이 있다. mart요소 : 특정 텍스트를 강조하고자 할 때 사용하는 요소 time요소 : 시간…chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹] 2_1-3. 내비게이션 메뉴(nav)와 사이드바(side_b)_3[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-3. 내비게이션 메뉴(nav)와 사이드바(side_b)_2에 이어 설명. [1-3 내비게이션 메뉴(nav)와 사이드바(side_b)] : header 요소를 사용하여 헤더 영역을 지정. 두 개의 제목을 표기하기 위하여 hgroup 요소를 사용하여 하느의 그룹으로…chainsmokerslav (62)in hive-137029 • 2 years ago[시맨틱 웹] 2_1-3. 내비게이션 메뉴(nav)와 사이드바(side_b)_2[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-3. 내비게이션 메뉴(nav)와 사이드바(side_b)에 이어 설명. [1-3 내비게이션 메뉴(nav)와 사이드바(side_b)] : 상단의 메뉴는 nav 요소로 나타내고, 프로필이나 카운터 등의 콘텐츠는 aside 요소로 나타낼 수 있다. 머리말과 꼬리말, 그리고 본문을 나타내는 요소들과…
