IBSheet7에서 비교적 자주 사용되었다고 생각되는 함수에 대해 지원 여부와 변경된 내용입니다.
| IBSheet7 함수명 | 기능 설명 | IBSheet8 지원 여부 |
|---|---|---|
| ActionMenu | 데이터 영역에서 마우스 우측 버튼 클릭시 컨텍스 메뉴 생성 | Menu속성으로 대체 |
| CellAlign | 셀의 좌우 정렬 값 설정 | Align (cell)속성으로 대체. ex) sheet.setAttribute(row,'colName','Align','Right'); |
| CellBackColor | 셀의 배경색 변경 | Color (cell)속성으로 대체. ex) var color = sheet.getAttribute(row, 'colName', 'Color'); |
| CellComboItem | 셀의 드롭리스트 아이템 변경 | Enum (cell), EnumKeys (cell) 속성으로 대체. ex) sheet.setAttribute(row, 'colName', 'Enum', '\|사장\|과장\|대리\|사원');sheet.setAttribute(row, 'colName', 'EnumKeys', '\|A01\|B0\|B2\|C0'); |
| CellEditable | 셀의 편집가능 여부 | CanEdit (cell)속성으로 대체. ex) sheet.setAttribute(row, 'colName', 'CanEdit', 0); |
| CellFont | 셀의 다양한 폰트 유형 설정 | TextFont (cell), TextStyle (cell), TextSize (cell) 속성으로 대체 ex) sheet.setAttribute(row, 'colName', 'TextSize', '1.3em'); |
| CellFontBold | 셀의 font-weight 수정 | TextStyle (cell)속성으로 대체 ex) sheet.setAttribute(row, 'colName', 'TextStyle', 1); |
| CellFontColor | 셀의 폰트 색상 변경 | TextColor (cell)속성으로 대체 ex) var color = sheet.getAttribute(row, 'colName', 'TextColor'); |
| CellFontItalic | 셀의 font-style를 italic으로 수정 | TextStyle (cell)속성으로 대체 |
| CellFontName | 셀의 font-family 수정 | TextFont (cell)속성으로 대체 |
| CellFontSize | 셀의 font-size 수정 | TextSize (cell)속성으로 대체 |
| CellFontStrike | 셀 내용에 취소선(strike) 설정 | TextStyle (cell)속성으로 대체 |
| CellFontUnderline | 셀 내용에 밑줄(Underline) 설정 | TextStyle (cell)속성으로 대체 |
| CellVAlign | 셀 내용의 상하 정렬 설정 | VAlign (cell)속성으로 대체 ex) sheet.setAttribute(row, 'colName', 'VAlign', 'top'); |
| CellImage | 이미지 셀의 이미지 변경 | getValue (method), setValue (method)함수로 변경(Img타입에 대한 데이터 확인) ex) sheet.setValue(row, 'colName', '\|./img/pic/sw97231.png\|200\|300'); |
| CellSearchValue | 셀의 최초 로딩된 데이터 확인 | Orig (cell)속성으로 대체 ex) var orgValue = sheet.getAttribute( sheet.getRowById("AR99") , "CLS" , "Orig"); |
| CellText | 셀의 값을 포맷이 적용된 상태로 얻거나 설정 | getString (method), setString (method)함수로 대체 ex) var v = sheet.getString(row, col); |
| CellValue | 셀의 값을 포맷을 제거한 상태로 얻거나 설정 | getValue (method), setValue (method)함수로 대체 ex) sheet.setValue(row, 'colName', 'A01'); |
| CheckAll | 열 전체에 값을 체크 | setAllCheck (method)함수로 대체 ex) sheet.setAllCheck('colName', 1); |
| CheckedRows | 체크된 전체 행의 개수를 얻음 | getRowsByChecked (method)함수를 이용 ex) var cnt = sheet.getRowsByChecked( 'sCheck' ).length; |
| ColBackColor | 열 전체의 배경색 설정 | Color (col)속성으로 대체 ex) sheet.setAttribute(null, 'colName', 'Color', '#FF9AE0'); |
| ColFontBold | 열 전체의 font-weight를 설정 | |
| ColFontColor | 열 전체의 글자색을 설정 | TextColor (col)속성으로 대체 ex) sheet.setAttribute(null, 'colName', 'TextColor', '#FF0000'); |
| ColFontUnderline | 열 전체 내용에 밑줄(Underline)설정 | TextStyle (col)속성으로 대체 ex) sheet.setAttribute(null, 'colName', 'TextStyle', 4); |
| ColWidth | 열의 너비 설정 | Width (col)속성으로 대체 ex) sheet.setAttribute(null, 'colName', 'Width', 250); |
| ColEditable | 열의 편집 가능여부 설정 | CanEdit (col)속성으로 대체 ex) sheet.setAttribute(null, 'colName', 'CanEdit', 0); |
| ColInsert | 신규 열 추가 기능 | addCol (method)함수로 변경 |
| ColHidden | 열 보임/감춤 설정 | hideCol (method)함수로 변경 Visible (col)속성으로 대체 가능 ex) sheet.setAttribute(null, 'colName', 'Visible', 0); |
| ColSaveName | 열 index를 기준으로 Name을 확인 |
getColByIndex (method)함수로 대체 ex) var c = sheet.getColByIndex(4); |
| ColumnSort | 지정한 열 소팅 | doSort (method)함수로 대체 ex) sheet.doSort('colName1|-colName2'); |
| ColValueDup | 열내 중복행 검사 | getRowsByDup (method)함수로 대체 ex) var dupRows = sheet.getRowByDup({cols:'colName','firstOnly':1}); |
| ColValueDupRows | 열내 전체 중복행 추출 | getRowsByDup (method)함수로 대체 ex) var dupRows = sheet.getRowByDup({cols:'colName'}); |
| CountFormat | 조회건수 표시 | setInfoRow (method)함수로 대체 |
| CountPosition | 조회 건수 표시 위치 | setInfoRow (method)함수로 대체 |
| CurrentColInfo | 현재 열 정보(순서,너비등) 추출 | getCurrentColInfo (method), setCurrentColInfo (method)함수로 동일 |
| DataCopy | 행 복사 기능 | copyRow (method)함수로 대체 ex) sheet.copyRow(sheet.getFocusedRow()); |
| DataInsert | 행 추가 기능 | addRow (method)함수로 대체 ex) sheet.addRow(); |
| DataMove | 행 이동 기능 | moveRow (method)함수로 대체 ex) sheet.moveRow(row, nextRow); |
| DirectDown2Excel | ||
| DirectLoadExcel | ||
| DoAllSave | 전체 데이터 저장 | doSave (method)함수에 saveMode인자로 대체ex) sheet.doSave({url:'saveData.do',saveMode:0}); |
| DoPrint | 시트데이터 인쇄 | doPrint (method)함수로 동일 |
| DoSave | 시트 데이터 저장 | doSave (method)함수로 동일 |
| DoSearch | 시트 데이터 조회 | doSearch (method)함수로 동일 |
| DoSearchPaging | SearchMode가 서버페이징 인 경우 조회 함수 | doSearchPaging (method)함수로 동일 |
| Down2Excel | 시트를 excel파일로 export | down2Excel (method)함수로 동일 |
| Down2ExcelBuffer | 여러개의 시트를 엑셀파일로 export | 지원안함 |
| Down2Pdf | ||
| Down2Text | 시트의 내용을 text파일로 export | down2Text (method)함수로 동일 |
| Editable | 시트 전체에 대한 편집가능 여부설정 | CanEdit (cfg)속성으로 대체 ex) sheet.CanEdit = 0;<br/>sheet.renderBody(); |
| EnterBehavior | ||
| Enable | 시트 활성화 여부 | enable (method),disable (method) 두개 함수로 변경 |
| ExportData | ||
| ExtendLastCol | 마지막 열의 자동 너비 조절 기능 | RelWidth (col)속성을 통해 열간 너비 비율 조정 가능 |
| FindCheckedRow | 특정 열에 체크된 행 추출 기능 | getRowsByChecked (method)함수로 변경 |
| FindStatusRow | 상태변화된 행 추출 기능 | getRowsByStatus (method)함수로 변경 |
| FindSubSumRow | ||
| FindText | 특정 문자를 포함하는 행 추출 기능 | findText (method)함수로 동일 |
| FitColWidth | 열의 너비 재조정 | RelWidth (col)속성을 통해 자동 조정는 형태로 변경 |
| FitSizeCol | 열의 너비를 열내에 가장 긴글자를 갖는 셀에 맞게 조정 | fitSize (method)함수로 변경 |
| FocusAfterProcess | 데이터 로딩 후 첫번째 행에 포커스를 둘지 여부 | IgnoreFocused (cfg)속성으로 대체 0으로 설정하면 데이터 로딩 후 첫번째 행에 포커스를 이동 시킴 (default: 0) |
| FrozenCol | 좌측 열 고정 기능 | setFixedLeft (method)함수로 변경 |
| FrozenRows | 상단에 행 고정 기능 | setFixedTop (method)함수로 변경 |
| GetCellProperty | 행또는 셀에 속성 확인 기능 | getAttribute (method)함수 통해 확인 가능 ex) var colEdit = sheet.getAttribute({col:'colName',attr:'CanEdit'}); |
| GetChildRows | 트리사용시 특정행의 자식행 추출 | getChildRows (method)함수로 동일 |
| GetComboInfo | 드랍리스트의 item 내용 확인 | Enum (col), EnumKeys (col)속성을 통해 확인 가능 ex) var enum = sheet.getAttribute(null, 'colName', 'Enum'); |
| GetCurrentPage | 현재 페이지 index를 확인 | getPageIndex (method)함수로 변경 |
| GetDataFirstRow | 첫번째 데이터행 index 확인 | getFirstRow (method)함수로 변경 |
| GetDataLastRow | 마지막 데이터행 index 확인 | getLastRow (method)함수로 변경 |
| GetEditText | 현재 편집중인 내용 확인 | |
| GetSaveData | ajax 통신 전용 함수 | 지원 안함 |
| GetSaveJson | 시트 내 데이터를 json형식으로 추출 | getSaveJson (method)함수로 동일 |
| GetSaveString | 시트 내 데이터를 querystring형식으로 추출 | getSaveString (method)함수로 동일 |
| GetSearchData | ajax 통신 전용 함수 | 지원 안함 |
| GetSelectionCols | 현재 선택된 열 index 추출 | getSelectedRanges (method)함수를 통해 선택 영역 전체를 얻는 형태로 변경 |
| GetSelectionRows | 현재 선택된 행 index 추출 | getSelectedRanges (method)함수를 통해 선택 영역 전체를 얻는 형태로 변경 |
| HeaderActionMenu | 헤더행에서 마우스 우측버튼 클릭시 컨텍스트 메뉴 표시 기능 | Menu (row)속성을 Def.Header에 설정하는 형태로 변경(ibsheet-common.js 참고) |
| HeaderBackColor | 헤더행에 대한 배경색 | 가급적 css 파일에서 설정하는 것을 권장. Def.Header에 Color (row)속성으로 통해 설정 가능 |
| HeaderCheck | 헤더 체크박스에 대한 체크/언체크 설정 | Checked (cell)속성을 통해 설정 ex) sheet.getAttribute(sheet.Header,"CheckData","Checked"); |
| HeaderFontBold | 헤더 타이틀 font-weight 설정 | 가급적 css 파일에서 설정하는 것을 권장.Def.Header에 TextStyle (row)속성으로 통해 설정 가능 |
| HeaderFontColor | 헤더 타이틀 글자색 설정 | 가급적 css 파일에서 설정하는 것을 권장.Def.Header에 TextColor (row)속성으로 통해 설정 가능 |
| HeaderRows | 헤더 행의 개수 | getHeaderRows (method)함수로 확인 가능 ex) var hcnt = sheet.getHeaderRows().length; |
| HideFilterRow | 필터행 제거 기능 | hideFilterRow (method)함수로 동일 |
| HideProcessDlg | 대기 이미지 제거 | hideMessage (method)함수로 변경 |
| HideSubSum | 소계 행 제거 | removeSubTotal (method)함수로 변경 |
| IBCloseCalendar | 달력 제거 | IBSheet.showCalendar (static)함수로 생성된 객체의 다이얼로그객체.Close (appendix)함수로 변경 |
| IBShowCalendar | 시트 외부영역에서 달력 오픈 | IBSheet.showCalendar (static)함수로 변경 |
| ImageList | 이미지 파일 index 설정 | 지원안함 |
| InitCellProperty | 셀단위 설정 변경 | 각 셀(cell)에서 사용가는한 속성 형태로 변경 |
| InitColumns | 열 초기화 | IBSheet.create (static)함수에 통합 |
| InitComboNoMatchText | ||
| InitHeaders | 헤더 기본 기능 설정 | Cfg 속성으로 통합. ex) options.Cfg = {CanColResize:0,CanSort:1}; //전체 소팅,리사이징 금지 |
| IsDataModified | 데이터 수정 여부 확인 | hasChangedData (method)함수로 변경 |
| IsHaveChild | 자식노드 유무확인 | getChildRows (method)를 이용해서 반환되는 배열의 길이가 0이상이면 자식이 1개 이상 존재하는걸 알 수 있음 |
| LastCol | 마지막 열 index 얻기 | getLastCol (method)함수로 변경(열의 Name이 리턴) |
| LastRow | 마지막 행 index 얻기 | getLastRow (method)함수로 변경(마지막 데이터 행 객체을 리턴) |
| LoadSaveData | 저장 결과에 대한 반영 | applySaveResult (method)함수로 변경 |
| LoadSearchData | 조회 데이터 로드 | loadSearchData (method)함수로 동일(xml 지원 안함) |
| LoadExcel | 엑셀파일 데이터 로드 | loadExcel (method)함수로 동일 |
| LoadExcelBuffer | 여러개 워크시트 내용 로등 | loadExcelBuffer (method)함수로 동일 |
| LoadText | 텍스트 파일 데이터 로드 | loadText (method)함수로 동일 |
| MergeSheet | 데이터 자동 병합 기능 | HeaderMerge (cfg), DataMerge (cfg)속성으로 변경 |
| MouseCol | 마우스 커서가 위치한 열 index | getMouseCol (method)함수로 변경(열의 Name 리턴) |
| MouseHoverMode | 데이터위에 마우스 Hover시 표현 설정 | Hover (cfg)속성으로 변경 ex) sheet.Hover = 1; //셀단위 |
| MouseRow | 마우스 커서가 위치한 행 index | getMouseRow (method)함수로 변경(행 객체 리턴) |
| MouseToolTipText | 풍선도움말 표시 설정 | showTip (method)함수로 변경 ex) sheet.showTip('<div class="warn">분기 마감 3일 전입니다.</div>'); |
| MoveColumnPos | 열 위치 변경 | moveCol (method)함수로 변경 |
| PagingPosition | 페이지네이션 설정 | InfoRowConfig (cfg)속성에 통합 |
| RangeBackColor | 특정 영역의 배경색 변경 | 렌더링 시점을 직접 컨트롤 할수 있으므로 setAttribute (method)함수를 통해 각 cell별로 Color (cell)속성을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출 |
| RangeFontBold | 특정 영역의 font-weight변경 | 렌더링 시점을 직접 컨트롤 할수 있으므로 setAttribute (method)함수를 통해 각 cell별로 TextStyle (cell)속성을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출 |
| RangeFontColor | 특정 영역의 글자색 변경 | 렌더링 시점을 직접 컨트롤 할수 있으므로 setAttribute (method)함수를 통해 각 cell별로 TextColor (cell)속성을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출 |
| RangeText | 특정 영역의 내용 추출 | 렌더링 시점을 직접 컨트롤 할수 있으므로 setString (method)함수를 통해 각 cell별로 값을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출 |
| RangeValue | 특정 영역의 내용 추출 | 렌더링 시점을 직접 컨트롤 할수 있으므로 setValue (method)함수를 통해 각 cell별로 값을 설정(render인자를 0으로)하고, 설정이 끝났을때 rerender (method)함수를 호출 |
| RedrawSum | 합계 재 계산 | calculate (method)함수로 변경 |
| RemoveAll | 전체 데이터 삭제 | removeAll (method)함수도 동일 |
| RenderSheet | 수정 내용 일시 반영 중지/실행 | renderBody (method), rerender (method)함수로 변경 |
| ReNumberSeq | Seq열에 대한 다시 순번 매김 | 지원안함 매번 자동으로 순번을 계산함. |
| Reset | 시트 객체 클리어 | dispose (method)함수를 호출해서 시트를 완전히 제거하고 같은 id로 다시 생성(IBSheet.create (static)) |
| ReturnCellData | 셀 데이터를 최초 로딩된 데이터로 변경 | revertCell (method)함수로 변경 |
| ReturnColumnPos | 열의 순서를 최초 생성상태로 되돌림 | 지원안함 |
| ReturnData | 행 전체 데이터를 최초 로딩된 데이터로 변경 | revertRow (method)함수로 변경 |
| RowBackColor | 행 배경색 변경 | Color (row)속성으로 대체 ex) sheet.setAttribute(row, null, 'Color', '#FFAA99'); |
| RowBackColorD | 삭제될 행의 배경색 | css파일 .IBColorDeleted class에서 설정 |
| RowBackColorI | 추가행의 배경색 | css파일 .IBColorAdded class에서 설정 |
| RowBackColorU | 수정된 행의 배경색 | css파일 .IBColorChanged class에서 설정 |
| RowCount | 상태별 행 개수 확인 | getRowsByStatus (method)나 getTotalRowCount (method)함수로 확인 가능 |
| RowData | 행의 값을 json형태로 얻거나 설정 | getRowById (method), getFocusedRow (method)등 모든 행 객체를 통해 값 얻기 가능 |
| RowDelete | 행 즉시 삭제 | removeRow (method)함수로 변경 |
| RowEditable | 행 전체 수정 가능 여부 설정 | CanEdit (row)속성으로 대체 ex) sheet.setAttribute(row, null, 'CanEdit', 0); |
| RowExpanded | 트리 사용시 자식행에 대한 펼침 여부 설정 | setExpandRow (method)함수로 변경 |
| RowFontColor | 행의 글자색 변경 | TextColor (row)속성으로 대체 ex) var fc = sheet.getAttribute(row, null, 'TextColor'); |
| RowHeight | 행의 높이 설정 | getRowHeight (method)함수로 확인 Height (row)속성으로 높이 변경. ex) sheet.setAttribute(sheet.getFocusedRow(), null, "Height", 200); |
| RowHeightMax | 전체 데이터 행의 최대 높이 설정 | Def.Row.MaxHeight속성으로 설정 ex) sheet.Def.Row.MaxHeight = 100; sheet.rerender(); |
| RowHeightMin | 전체 데이터 행의 최소 높이를 설정 | Def.Row.MinHeight속성으로 설정 ex) sheet.Def.Row.MinHeight = 50; sheet.rerender(); |
| RowHidden | 행을 보임/감춤 설정 | Visible (row)속성으로 대체 ex) sheet.setAttribute(row, null, 'Visible', 0);hideRow (method)함수로 변경 ex) sheet.hideRow(row, null, 0); |
| RowLevel | 트리 사용시 행의 Depth index 설정 | Level속성으로 대체(확인만 가능)ex) var lvl = sheet.getAttribute(row, null, 'Level');moveRow (method)함수로 행을 이동시켜야함. |
| SaveNameCol | 열 명에 대한 Index | getColIndex (method)함수로 변경 |
| SearchRows | 로드된 데이터 행의 수 | getDataRows (method)함수로 변경 하지만 상태가 변경된 데이터행을 제외하고 싶다면 다음과 같이 갯수를 구할 수 있습니다. ex) var searchRow = sheet.getDataRows() - sheet.getRowsByStatus("Added,Deleted").length; |
| SelectCell | 특정 위치로 포커스 이동 | focus (method)함수로 변경 ex) sheet.focus(row, 'colName'); |
| SelectCol | 특정 열로 포커스 이동 | focus (method)함수로 변경 ex) sheet.focus(null, 'colName');var fc = sheet.getFocusedCol(); |
| SelectionMode | 행,셀단위 select 설정 | SelectingCells (cfg)속성으로 대체 |
| SelectRow | 특정 행으로 포커스 이동 | focus (method)함수로 변경 ex) sheet.focus(row, null);var fr = sheet.getFocusedRow(); |
| SetBlur | 시트내 포커스 제거 | blur (method)함수로 변경 ex) sheet.blur(2); |
| SetColProperty | 열 속성 변경 | setAttribute (method)를 통해 각종 속성 설정 가능 ex) sheet.setAttribute(null, 'colName', 'CanEdit', 0); |
| SetConfig | 초기 기능 설정 | IBSheet.create (static)함수에 Cfg속성으로 대체 |
| SetEndEdit | 편집 종료 기능 | endEdit (method)함수로 변경 |
| SetHeaderMode | 헤더행에 대한 기능 설정 | 위에 InitHeaders함수에 대한 설명 참고. ex) sheet.CanSort = 0; |
| SetMergeCell | 특정 영역에 대한 span | setMergeRange (method)함수로 변경 |
| SetSelectRange | 특정 영역 선택 | selectRange (method)함수로 변경 |
| SetSplitMergeCell | 머지된 영역에 대해 머지취소 | setMergeCancel (method)함수로 변경 |
| SheetWidth | 시트의 너비 변경 | IBSheet.create (static)함수로 생성할때 지정된 el객체의 너비를 수정 |
| SheetHeight | 시트이 높이 변경 | IBSheet.create (static)함수로 생성할때 지정된 el객체의 높이 수정 |
| ShowCalendar | 특정 셀위에 달력 팝업 open | AutoCalendar (cfg)속성으로 대체 |
| ShowColumnPopup | 열에 설정한 컨텍스트 메뉴를 표시 | showMenu (method)함수로 유사하게 기능 구현 가능 ex) var menu = sheet.getAttribute(sheet.getFocusedRow(),"sCompany","Menu");sheet.showMenu(sheet.getFocusedRow(),"sCompany",menu); |
| ShowFilterRow | 필터행 표시 | showFilterRow (method)함수로 동일 |
| ShowFindDialog | 찾기 다이얼로그 창 open | showFindDialog (method)함수로 동일(ibsheet-dialog.js 파일 필요) |
| ShowGroupRow | 그룹행 생성 | solid 행 사용으로 변경 |
| ShowMsgMode | 메세지 event 발생 여부 설정 | |
| ShowPivotDialog | 피봇 다이얼로그 창 open | showPivotDialog (method)함수로 변경(ibsheet-dialog.js 파일 필요) |
| ShowProcessDlg | 대기 이미지 표시 | showMessage (method)함수로 변경 |
| ShowSubSum | 소계행 생성 기능 | makeSubTotal (method)함수로 변경 |
| ShowToolTip | 풍선도움말 표시 | showTip (method)함수로 변경 |
| ShowTreeLevel | 트리 시트 사용시 지정한 Depth까지 펼침 | showTreeLevel (method)함수로 동일 |
| SumBackColor | 합계 행에 대한 배경색 | css파일의 .IBFormulaRow class에서 설정 혹은 합계행에 대해 직접 설정ex) var frow = sheet.getRowById("FormulaRow");sheet.setAttribute(frow, null, 'Color', "#FF0099"); |
| SumFontBold | 합계 행에 대한 font-weight | css파일의 .IBFormulaRow class에서 설정 |
| SumFontColor | 합계 행에 대한 글자색 설정 | css파일의 .IBFormulaRow class에서 설정 |
| SumRowHidden | 합계 행 보입/감춤 설정 | showRow (method), hideRow (method)로 분리 및 변경 Visible (row)속성으로 대체 ex) sheet.setAttribute(sheet.FormulaRow, null, "Visible", true); |
| SumValue | 합계 행의 값 설정 | getValue (method), setValue (method)함수로 변경 ex) sheet.setValue(sheet.FormulaRow, "sAmt", 250000); |
| TabBehavior | 포커스 상태에서 'Tab’키 클릭시 동작 설정 | |
| Theme | 테마 설정 | setTheme (method)만 동일 |
| ToolTipText | 특정 셀에 풍선도움말 설정 | Tip (cell)속성으로 대체 ex) sheet.setAttribute(row, 'colName', 'Tip', '사원번호를 먼저 입력하세요'); |
| TopRow | 최상단의 행 index 확인 | getShownRows (method)함수로 확인 가능 ex) var trow = sheet.getShownRows()[0]; |
| TotalRows | 전체 데이터 건수 설정 | getTotalRowCount (method)함수로 변경 |
| Visible | 시트 전체 보임/감춤 설정 | IBSheet.create (static)로 생성할때 지정된 el객체에 대해 display나 visibility 변경 |