본문 바로가기

분류 전체보기

(185)
영문 / 숫자 풍선폰트 사이트 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이름이 수정 ..
Javascript addEventListener() - 이벤트 리스너 사용법과 종류 addEventListener() addEventListener()는 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다. 아래의 title이라는 변수(h1)를 addEventListener() 메소드를 사용하여 클릭이벤트 유형을 지정하고 클릭할 때 마다 clickEvent() 함수가 호출되도록 만든 예제입니다. const title = document.querySelector("h1"); function clickEvent(){ title.style.color = "blue"; } title.addEventListener("click", clickEvent); addEventListener() 대신? addEventListener() 대신 on으로 시작하는 메소드(?)를 써도..
Javascript document - HTML 요소 선택 메소드 document : HTML과 상호작용을 가능하게 해주고 브라우저에서 사용할 수 있는 객체 getElementbyId() : document 함수, HTML에서 id 속성을 통해 element를 찾습니다. id는 한 HTML안에 중복될 수 없습니다. 만약 주어진 id와 일치하는 element가 없으면 null을 반환합니다. document.getElementById(id); getElementbyClassName() : HTML에서 class 속성을 통해 element를 찾습니다. 배열을 반환합니다. document.getElementByClassName(class); getElementsByTagName() : div, li, p 와 같은 특정 태그명을 통해 element 의 집합을 가져오는 함수입니다..