날아라쩡글이의 블로그입니다.

단위테스트 - PMO 즉, 감리자격증이 있는 감리가 세세히 테스트를 진행하고 본인들이 생각하는 event의 현상을 작성하고 제출 통합테스트 - 단위테스트를 진행하고 임원들 앞에서 테스트를 시연한다 시큐어코딩테스트 - sql 이 $로 mapping시 sql injection 에 대한 해킹위험에 노출될 위험이 크다 이클립스에서도 unused에러를 정리해주자

System.getProperty.toLowerCase()으로 변수 설정 변수.contain() contain은 equals이다 해당 운영체제 앞과 비굣값을 설정 나는 fileNm을 설정하는 것을 설정함

조회버튼을 이용하여 정보를 조회하기 앞전에 확인한 것처럼 웹스퀘어는 통신할때 form을 이용해서 전송, 이동하지 않고 submission이라는 객체를 통하여 통신한다. addSubmission버튼으로 통신할 수 있다. 그러나 해당컬럼에서는 UI가 보이지 않기 대문에 subMission탭을 활용하면 편하다. 열러진 편집창에서 우선 id를 입력한다. 공백과 -을 사용하지 않는 고유식별자를 사용한다. reference는 request정보를 setting한다.request정보를 담아 줄 data의 객체를 생성하고 지정한다. target은 response정보를 setting한다. respose정보를 담아 줄 data객체를 생성하고 지정한다. URL action은 실제 서버와 통신한url을 연결해준다. mode에서..

각 컴포넌트에 기본Data를 setting하는 방법 기본값설정에 필요한 컴포넌트는 td의 객체 내의 각 컴포넌트들과 조회버튼이 필요하다. 기본값 셋팅에 필요한 컴포넌트들에 대하여 모두 id를 부여하고, 웹스퀘어에서의 컴포넌트들은 id를 부여하면 해당 id는 전역변수로 인식되어 script에서 바로 사용이 가능하다. id를 작성시 주의사항은 공백은 허용하지 않으며 -의 문자는 파싱의 과정에서 오류를 일으킬 가능성이 있어서 사용을 권장하지 않는다. 기본적이지만 id를 적용할 때의 중요한 사항은 유니크한 id를 사용해야한다는 점이다. id는 중복되는 경우 오류를 발생할 수 있다. 날짜util API를 입력할 때에는 $p객체를 이용할 수 있으며, $p를 입력하고 .를 입력하면 웹스퀘어에서 사용가능한 utilAP..

브라우져에 html UI태그들이 그려지는 기준을 고정위치와 상태위치로 나눌 수 잇다. 어떤 방식으로 구성할 지는 CSS의 속성의 position으로 결정된다. static - 소스코드의 순서대로 배치 absolute - 기준점을 중심으로 배치 relative - static의 확장으로 위치의 속성을 사용할 수 있다. fixed - absolute기반의 고정좌표 sticky - relative기반의 고정좌표 상단의 change Draw Mode를 클릭한다. Palette에서 원하는 해당 컴포넌트를 사용하고 absolute의 mode를 사용하면 개발자가 원하는 위치에 컴포넌트를 배치할 수 있게 만들수 있다. span을 선택하며 컴포넌트의 위치를 변경할 수 있다. trigger을 사용하여 버튼을 쉽게 만들수 ..

실행된 스튣디오에서 가장 먼저 Open Perspective기능을 확인한다. 기본적으로 웹스퀘어 5는 3가지의 화면을 가지고 잇다. default는 기본개발자모드, debug는 디버깅모드, old는 신규스튜디오 이전버젼의 기본 개발자 모드이다. defult로 설정하면 오른쪽 상단에서 perspective가 websquare로 선택된것을 확인할 수 있다. 기본 웹스퀘어에서 보이는 view를 확인할 수 있다. 만일 현재보여지는 view의 위치등을 조절하여 변경하고자 하면, 우선 view 위치조정 및 추가적으로 보고자 하는 view를 window -> showview -> other을 통해 open한다. 예를들면 console, server을 클릭해서 open이 가능하다 변경된 view의 모드를 저장할려면 w..

웹스퀘어는 자동으로 확장자 명이 xml으로 되어있기 때문에 따로 폴더명을 설정하지않고 설정한다. script에서는 javascript의 로직을 작성한다. websquare5 파일을 생성하면 onpageload-페이지로딩 후 실행 ,onPageunload-페이지종료 후 실행 이벤트가 자동 등록된다. 그리고 웹스퀘어 5에서는 기본 namespace기반의 코딩을 하며 default로 사용하는 객체의 명은 scwin이다. 웹스퀘어 5에서는 제공하는namespace를 사용하면 페이지를 닫을 때 해당자원을 자동을 delete시켜주는 기능을 이용할 수 있으며 scwin이라는 namespacea명은 설정을 통해 변경이 가능하다. DataColletion에서는 data객체를 생성하고 관리한다. Datamap은 단건 da..

flex는 class를 부여하여 부모속성인 container와 내부에 개별적인 item으로 부여를 할 수 있다. container의 경우 display, flex-flow, justify-content, align-item 의 속성을 부여할 수 있고, item의 경우 order, flex, flex-grow, flex-shrink, flex-basis, align-self의 속성을 부여할 수 있다. flex container의 display속성은 flex는 블록 요소로 수직으로 쌓고, inline-flex는 인라인 요소로 수평으로 쌓는 점을 기억하자 flex-container flex-flow = 주축으로 여러줄을 묶는다. flex-direction : items의 주축으로 주요 x, y축을 설정한다. ..

transform = 요소의 변형, 변환을 주는 효과 , 속성은 1개 속성하나로 여러가지 함수를 지정, 2D와 3D(평면과 삼차원)을 표현할 수 있다. transform:rorate(20deg) translate(10px,0) skew scale의 함수로 입력이 가능하다. transform: 원근법 이동 크기 회전 기울임; transform = 2D 변환 함수 translate : 이동을 변환하는 함수 (x축, y축)입력, 수치는 px단위로 입력가능함. translateX( x축 ) translateY(y축) scale : 확대, 축소, 크기를 변환하는 함수 , 단위는 없이 배수로 지정함. (1,1) 변화x, (1.5, 1.5); 05배효과 scaleX(x축) scaleY(y축) rotate : 회전 ,..

float나머지 요소는 항상 수직으로 쌓이려고한다. float의 경우 수평정렬로 만들어지며, float:right 는 우측부터 3, 2, 1의 형태로 배열되고, float:left의 경우 좌측부터 1, 2, 3의 형태로 쌓이게 된다. 해제의 경우 clear를 입력하고 left는 left로 right는 right로 작성하여 해제한다. 그러나 구별하기 어렵거나, 유지보수의 문제로 clear:both를 사용한다. 해제를 하지않고 작성시에 요소는 중복되어 사용된다. float의 속성이 적용된 요소의 주위로 다른요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제;해야한다. 해제의 방법은 다음형제 요소에 clear:left,right,both를 추가한다. 부모요소에 overflow:hidden,auto를 추가..

font-weight = 9단계로 글꼴을 설정할 수 있다. 단계 크기 100 thin(hairline) 200 extra light (ultra light) 300 light 400 normal (기본값) 500 medium 600 semi bold(demibold) 700 bold 800 extra bold(ultra bold) 900 black(heavy) 상속 값 bolder( 부모요소보다 더 두껍게 ) lighter( 부모요소보다 더 얇게 ) 100~300 400 100 400~500 700 100 600~900 900 600,700 = 400 800,900 = 700 font-weight를 적었을 때 브라우저에 동일한 두께와 값이 없을 경우, 정확한 두께를 표현하지 못 하였을 경우 1. 400값..

reset : css를 초기화해주는 문법이다. 다양한 브라우저의 경우 style이 다르게 출력되기 때문에 동일하게 스타일을 만들기 위하여 초기화하고 작성을 해야한다. 일일히 margin:0; padding:0;으로 설정해주기보단 기존의 style을 초기화해주는 것이 좋은데, reset MDN을 검색해서 reset.min.css의 압출파일 경로를 Visual studio code에 입력시 main.css를 연결하는 link보다 위쪽에 입력하여 모두 reset이 되도록 설정해준다. codepan에서도 적용 가능한데, css좌측에 톱니바퀴에 설정을 해준다 emmet문법 = tab키를 이용하여 바로바로 작성이 되도록 설정해준다. 감싸는 방법도 가능하며, 복잡한 문서를 손쉽게 입력가능하다. emmet plug i..

CHILD( 자식) first child =E:first child (선택 E가 부모를 공유하는 형제요소 중 첫번째 요소인 경우 ) .fruits li:last child (막내) nth child =몇번째 요소를 선택할 것인가 (n번째 요소) ,짝수만 선택가능 n+3= 세번째요소부터 모두선택가능함 n키워드를 사용시 css는 1부터 해석, java와 java script는 0부터 해석(zero-base) 해석이 정확하기때문에 정확한 위치를 적어주어야 입력이 가능하다. first-child의 경우 모든 요소중의 first-child까지 지 적용하기 때문에 어느 class만의 바로 자식요소만 사용시 그 자식요소만을 사용하여야한다. 전체적인 __:first-child를 사용하고 싶을경우 빈칸으로 둬서 기본선택..

css의 경우 문법과 속성을 배워 모양을 만들어 흥미를 유발하는 역활을 한다. css의 선택자는 중요한 요소이다. selector{ 속성:속성값; 속성:속성값; } 으로 입력한다 속성과 속성값사이는 꼭 붙여서 작성한다. property = 속성 (검색된 대상될 명령 set) value = 값 주석: /* comment */ : 문서내 수정사항이나 설명등을 작성 css선언방식==>HTML->style 작성, div style=color :red; font-size:20px; =>html의 직접입력은 피하는것이 좋다. 1. 내장 embedded방식 link type , html 외부문서로 css가져와서 입력함 추천방법 2.@import 방식 =a+규칙 =>미디어쿼리 :css @ import 를 이용하여 문서..

style =전역속성 html+sytle =css인라인 선언 , h1 이던 어디에서든 사용가능 , 전체적으로 사용이 가능한 속성, 띄어쓰기를 이용하여 속성을 추가하는 기능이있다. p, div전체가능하다. title = 요소의 정보, 설명을 지정한다. 마우스를 가져다두면 tip으로 표시하여 text를 제공해준다. lang = 요소의 언어를 지정한다. html( ISO -639-1) 하나의 언어로 명시한다. 어떤태그에서도 사용가능하며, html주소에 한번만 선언하면 나머지는 수정안해도된다. data-* =사용자 정의 데이터 속성, java scrip에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용한다. html에서 보관 후 java scrip으로 사용한다. java는 하이폰을 좋아하지않아 하이폰 뒤..

표를 작성할때 사용하는 구조적인 tag= table(데이터표,표시) tr =행, 줄(table row) th,td=칸,열,셀 display가 block,inline요소가 아니다. 표를 입력할 때 1. 설계할 표를 그린다. 2. 줄을 먼저 형성한다. 3. 줄안에 각각의 칸을 입력한다. 선과 여백을 없애는 방법은 css을 이용한다. 선의 경우 td와 th에 border을 삽입하여 몇px, 형상, 색상과 원하는 색상을 background-color로 설정한다. 여백을 없애는 경우 td와 th의 부모인 table에 입력을 하며 border-collapse: collapse;(여백없애기)를 입력하여 여백을 없애면 된다. css에서 부모요소는 항상위에 작성을 해야하며, td와 th위에 table을 작성하면 된다. ..

이전글 보기 2021.06.09 - [공부하는파워걸 story/html story] - html (inline과 멀티미디어 속성 약간) html (inline과 멀티미디어 속성 약간) 앞에서는 block요소의 부분과 inline부분을 약간 진행하였다. html은 전체적으로 구조를 나타내는 부분으로 나무를 나타낸다고 하면 css 꾸며주는 낙엽잎이다. block요소는 레이아웃부분은 나타내어 lionpower.tistory.com scrset= 브라우저에 제시할 이미지들과 그 이미지의 원본 크기를 제시한다. 사용할 후보 이미지의 경로와 원본의 크기를 작성하는데, scrset의 경우 사용할 이미지의 크기가 2장이상일 때 사용이 가능하며, px단위가 아닌 w와 x의 단위를 사용하여 작은 이미지부터 순서대로 입력을..

앞에서는 block요소의 부분과 inline부분을 약간 진행하였다. html은 전체적으로 구조를 나타내는 부분으로 나무를 나타낸다고 하면 css 꾸며주는 낙엽잎이다. block요소는 레이아웃부분은 나타내어주고 inline요소는 text를 의미하는 부분이다. abbr =abbrevivation로 약어를 의미한다. 약어를 사용하는 부분에 emmt로 이용하여, 약어를 표현할 부분을 rapping하고 abbr title로 어떤의미인지 표현하여준다. 쩡글이 이런식으로 묶어준후 쩡글이라는 단어에 마우스를 가져다가 대면 힌트를 제공해준다. inline속성이다. title의 경우 전역속성이기때문에 전체영역에 사용가능한 부분을 가지고 있다. 그렇기 떄문에 어디서든 사용이 가능하다. b=범위와 표시를 지정하는 bring ..

html은 구조의 언어 css는 표현언어 java strip은 동적제어 하는 언어이다. block level 요소 (블록 요소) inline 요소 (인라인 요소) 1. DIV, H1,P, TAG 2.사용가능한 최대 가로 넓이를 사용 3. width= 100% , height = 0; 값으로 출발하며, 요소구함, 설정하지 않고 auto로 시작하고 들어감 4. 수직 쌓임 5.위,아래로 쌓임 margin과 padding의 속성, 위,아래,좌우 사용이 가능함 6. 레이아웃을 위한 용도로 사용됨= div사용 1. span, img 2. 필요가능한 너비를 사용 (들어간 만큼의 글의 내용만큼의 가로 너비를 사용한다. 3. 크기 지정이 불가함 4.width =0; height =0;으로 시작한다. 5. 수평으로 쌓음 ..