본문 바로가기

분류 전체보기

 (195)
HTML<canvas>, 자바스크립트로 그림판 만들기 01 먼저 html 파일에 를 만들고 js파일을 연결한다. 의 크기는 css으로 작성해도되지만 퀄리티를 위해 자바스크립트로 정의하는것이 좋다. 마우스가 눌러졌을때 (mousedown) ispainting을 true 하여 작동하게 하고, 마우스를 땟을때(mosueup) ispainting을 false하여 작동을 멈춘다. 마우스가 움직일때 ispainting이 true면 {}안의 내용이 수행되고, false면 움직이기만(moveTo) 한다. const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 800; //선 굵기 ctx.lineWidth = 2; l..
비주얼 스튜디오 코드(Visual Studio Code) 확장프로그램(Expansion) 1. Korean Language Pack for Visual Studio Code 한국어 버전으로 보여주는 확장프로그램이다. 2. Prettier - Code formatter 코드를 작성하고 저장(Ctrl + S)을 누르면 코드를 자동으로 정렬해주는 확장프로그램이다. 저장하여 코드를 정렬하기 위해서는 아래의 설정이 필요하다. 1. 비주얼 스튜디오 코드의 왼쪽 하단의 톱니바퀴를 눌러 '설정'에 들어간다. 2. editor format 검색한다. 3. Editor: Default Formatter에 '없음(null)'로 되어있는것을 'Prettier - Code fomatter' 로 변경한다. 4. Editor: Format On Save에 체크 표시를 한다. 4. Material Theme 비주얼 스튜..
영문 / 숫자 풍선폰트 사이트 https://s.muz.li/ZTM1OTkwMDA3
[WebSquare] 웹스퀘어 girdView 자주쓰는 속성 1. 속성 focusMode 셀 선택시 선택 영역 표현 방법 autofit 그리드뷰 반응형 autoFitMinWidth autoFit="allColumn" 설정을 적용하기 위해 필요한 GridView의 최소 너비 keepDefaultColumnWidth autoFit="true"인 경우,rowNum 컬럼과 rowStatus 컬럼의 폭을 고정 fixedColumn 틀고정을 적용할 컬럼의 위치 fixedRow 틀고정을 시킬 행의 위치 overflowX 가로 스크롤 표시 여부 overflowY 세로 스크롤 표시 여부 rowMouseOverColor 마우스 오버된 행의 배경색 selectedCellColor 선택된 셀의 배경색 selectedRowColor 선택된 행의 배경색 oddEvenColorDisplay..
[WebSquare] 웹스퀘어 가이드 (퍼블리싱) 1. 작업시 열어놓는 창 Package Explorer Palette Style Property Outline Servers : 서버 사용시 Console : 서버 사용시 2. 퍼블리싱 1. 작업할 파일을 생성 - 웹스퀘어 폴더 안에 있는 WebSquare CSS, WebSquare JS, WebSquare Page 로 생성함. 2. CSS는 기존 작성법과 동일 3. WebSquare Page - html 파일이라고 생각하면됨 (웹스퀘어는 XML) - 하단의 Design 에서 작업 -- Palette에서 원하는 컴포넌트를 클릭하여 화면에 그리는 방식으로 작업 -- 웹스퀘어에서 제공하는 컴포넌트는 고유의 class명이 있음 (별도로 class 추가 가능) -- 컴포넌트의 속성은 Property에서 설정 -..
[CSS] 많이쓰는 class 이름 정리 breadcrumbs (빵부스러기 : 길을 잃어버리지 않기 위해 길에 떨어뜨리는 빵부스러기와 같은 역할)ex) 홈 > 회사소개 > 연혁class명설명예시wrapper  container  inner  section  box그룹핑 목적으로 사용되는 div 엘리먼트에 주로 사용 area  sub  bul의미가 없는 요소로 사용할 수 있는 이미지로 사용 icon의미가 있는 요소로 설명에 대한 텍스트가 명확한 경우 사용 item  pop팝업 titheading 요소로 사용되지는 않고 문단의 강조를 나타내는 형식의 텍스트 desc  txt문단의 이미지로된 텍스트에 사용 h1 ~ h6heading요소에 사용 aside  navlnb, gnb, snb 등의 네비게이션 요소에 사용 lnb현재 서비스 지역 네비게이션 g..
[WebSquare] 웹스퀘어 프로젝트와 파일 생성 방법 프로젝트 생성 New > Project > webSquare에 webSquare project > naxt > 프로젝트 네임 설정 > naxt > Context Root(기본적으로 프로젝트 네임과 동일하게) > finish Context Root : 웹 어플리케이션을 식별하기위한 기준단위 좌측 상단(Project Explorer)에서 프로젝트 확인! 파일 생성 Project Explorer에서 프로젝트 우클릭 > New > 파일 클릭 > 파일 네임 설정 가장 주요 파일은 webSquare CSS, JS, XML 이다.
JAVASCRIPT ) 클릭했을 때 class 추가하고 재클릭하면 다시 없애기 글자를 클릭하면 주황색, 다시 클릭하면 파랑색, 다시 클릭하면 주황색... 무한 반복되는 예제이다.클릭하면 태그의 class에 active를 추가하고 다시 클릭하면 active를 삭제하고, 다시 클릭하면 추가하는..무한 반복되는 방식이다.   const h1 = document.querySelector("h1");function clickEvent(){ if(h1.className === "active"){ h1.className = ""; } else { h1.className = "active"; }}h1.addEventListener("click", clickEvent);  위 예제는 스트링 "active"가 반복된다. 예제에서는 상관없겠지만 코드가 길어지고, class이름이 수정 ..

티스토리툴바