#kr-steemUnmoderated tagAll postsTrending CommunitiesSteemitCryptoAcademyNewcomers' Communityআমার বাংলা ব্লগKorea • 한국 • KR • KOSTEEM CN/中文Steem POD TeamAVLE 일상Tron Fan ClubWORLD OF XPILARSteem AllianceItalyBeauty of CreativityExplore Communities...#kr-steemTrendingHotNewPayoutsMutedchainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[캔버스] 3_2-1. 캔버스로 사각형 그리기 메서드_2[캔버스] 3_2-1. 캔버스로 사각형 그리기 메서드에 이어 설명. [02. 사각형 그리기] :chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[캔버스] 3_2-1. 캔버스로 사각형 그리기 메서드[02. 사각형 그리기] : 테두리만 있는 사각형은 strokeRect() 메서드를 사용하여 그리며, 색이 채워진 사각형은 fillRect() 메서드를 사용하여 그린다. 추가로 clearRect() 메서드를…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[캔버스] 3_2-0. 캔버스로 사각형 그리기[02. 사각형 그리기] : 사각형을 그리기 위해서는 시작점인 x, y좌표와 너비, 높이를 나타내는 네 가지의 값을 요구(필요로)하게 된다. 캔버스를 기준으로 캔버스 왼쪽 맨 위의 꼭짓점이 x, y좌표인(0…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[캔버스] 3_1-1. 웹에서의 캔버스_3[캔버스] 3_1-1. 웹에서의 캔버스_2에 이어 설명. [01. 캔버스] : 해당되는 id에 해당하는 캔버스를 불러와서 canvas 객체를 생성, 생성후 getContext(2d) 메서드를 호출하여 그리기…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[캔버스] 3_1-1. 웹에서의 캔버스_2[캔버스] 3_1-1. 웹에서의 캔버스에 이어 설명. [01. 캔버스] : 만약 canvas 요소에 너비나 높이를 지정하지 않으면 자동으로 너비(W) 300px, 높이(H) 150px의 캔버스가…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[캔버스] 3_1-1. 웹에서의 캔버스[01. 캔버스] : 캔버스가 가장 주목받는 이유는 바로 단순히 브라우저에 그림을 표현하는 것을 넘어 여러 가지 효과를 주고, 텍스트를 표현하고, 간단한 애니메이션까지 표현 가능하게 된 것 때문이다. 브라우저에…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[캔버스] 3_1-0. 웹에서의 캔버스[01. 캔버스] : HTML5에서 가장 중요하고 주목이 필요한 것중 하나는 캔버스이다. 이 캔버스의 사전적인 의미는 유화를 그릴 때 쓰는 천이라는 뜻으로, HTML5에서는 '캔버스라는 브라우저에 그림을 그리기…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹] SUMMARY-2. 레이아웃/표현을 위하여 추가된 요소레이아웃을 위하여 추가된 요소 -header : 머리말을 나타내는 요소 -hgroup : 제목과 부제목을 묶는 요소 -nav : 메뉴 부분을 나타내는 요소 -article : 개별 콘텐츠를 나타내는 요소…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현_3[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현_2에 이어 설명. [02. 표현을 위한 요소] : 콘텐츠 타입별 요소 분류 : HTML5에서 각 요소(엘리먼트/태그)가…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현_2[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현에 이어 설명. [02. 표현을 위한 요소] : -> progress 요소를 사용하여 최소값 0, 최대값 100의…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-4. 시맨틱 웹에서의 현재 진행 중인 상태 표현[02. 표현을 위한 요소] : 많은 파일을 복사 붙여넣기 하거나 파일 다운로드를 웹브라우저 내에서 할 때 작업 진행 상태를 확인 가능하다. progress 요소는 바로 어떠한 작업에 대하여 현재 진행 중인…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-3. 시맨틱 웹에서의 범위나 비율 표현_2[시맨틱 웹을 위한 태그] 2_2-3. 시맨틱 웹에서의 범위나 비율 표현에 이어 설명. [02. 표현을 위한 요소] : 9 : meter 요소를 사용하여 디스크 사용률에 대하여 최소값(min)…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-3. 시맨틱 웹에서의 범위나 비율 표현[02. 표현을 위한 요소] : meter 요소는 일정 범위 안의 값이나 분포 비율 등을 나타낼 때 사용한다. 예를 들자면 현재 디스크 사용률이나, 성적 비율 등을 나타낼 때 사용할 수 있다. 범위와 값을…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-2. 시맨틱 웹에서의 시간 표현_2[시맨틱 웹을 위한 태그] 2_2-2. 시맨틱 웹에서의 시간 표현에 이어 설명. [02. 표현을 위한 요소] :chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-2. 시맨틱 웹에서의 시간 표현[02. 표현을 위한 요소] : time 요소를 사용하여 시간 표현에 대해서 의미를 부여할 수 있다. 예를 들자면 단순히 '2023_01_01'이라고 표기를 하게 되면 시각적으로는 날짜라고 정확하게 알 수…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-1. 시맨틱 웹에서의 특정 텍스트 강조 표현_2[시맨틱 웹을 위한 태그] 2_2-1. 시맨틱 웹에서의 특정 텍스트 강조 표현에 이어 설명. [02. 표현을 위한 요소] : mark 요소는 모든 브라우저에서 지원되고 있다. 지원이 중단된 익스플로러든…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-1. 시맨틱 웹에서의 특정 텍스트 강조 표현[02. 표현을 위한 요소] : HTML4에서는 강조하고자 하는 문구나 단어에 strong요소를 주로 사용해 왔다. HTML5에서는 이에 추가로 mark 요소를 사용할 수 있다. 하지만 만약 시각적으로…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹을 위한 태그] 2_2-0. 시맨틱 웹에서의 표현을 위한 요소[02. 표현을 위한 요소] : HTML5에는 시맨틱 웹을 위해 레이아웃을 위한 요소뿐 아니라 표현을 위한 요소도 추가되었다. 표현을 위한 요소라 하면, 시각적인 효과를 위한 요소, 시간을 표현하는 요소…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹] 2_1-3. 내비게이션 메뉴(nav)와 사이드바(side_b)_3[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-3. 내비게이션 메뉴(nav)와 사이드바(side_b)_2에 이어 설명. [1-3 내비게이션 메뉴(nav)와 사이드바(side_b)] :…chainsmokerslav (62)in kr-dev 커뮤니티 • 2 years ago[시맨틱 웹] 2_1-3. 내비게이션 메뉴(nav)와 사이드바(side_b)_2[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-3. 내비게이션 메뉴(nav)와 사이드바(side_b)에 이어 설명. [1-3 내비게이션 메뉴(nav)와 사이드바(side_b)] : 상단의 메뉴는…