본문 바로가기

전체 글154

[웹스퀘어] segmented ui radio 코딩/CSS 2026. 10. 16. segmented ui인데 radio를 접목한 디자인. 라디오 (xf:select1)버튼 (w2:anchor/xf:trigger)선택값 저장ref만 연결하면 dataMap에 바로 들어감클릭할 때마다 스크립트에서 직접 값 저장하나만 선택엔진이 알아서 처리다른 버튼의 on 클래스를 지우고 누른 버튼에 붙이는 코드 필요선택 변경 이벤트onchange 하나로 끝버튼마다 onclick을 달거나 공통 함수로 분기초기값·값 되돌리기dataMap 값만 바꾸면 화면이 따라옴값에 맞춰 on 클래스를 다시 붙이는 코드 필요항목 추가xf:item 한 줄 추가, itemset으로 동적 목록도 가능버튼 추가에 스크립트 수정까지흰 박스 슬라이드:checked + :has()로 CSS만으로 됨.on 클래스 기준으로 CSS를 바꾸면 ..
아코디언 css구조 코딩/CSS 2026. 10. 14. HTML 타이틀 토글 /* 내부div에 padding이 있을경우 접어도 영역이 남음으로 div로 한번 감싸주면 애니메이션이 깔끔함 */ 토클 컨텐츠 안에 넣기 CSS/* togglebox */.togglebox .toggle_header{margin-bottom:0;cursor:pointer}.togglebox .toggle_cont{display:grid;grid-template-rows:1fr;margin-top:8px;opacity:1;transition:all ease .3s}.togglebox .toggle_cont > *{overflow:hidden}.togglebox:not(.on) .toggle_cont{gri..
VS Code 플러그인 모음 코딩 2026. 8. 15. 1. Tokyo Night theme깔끔하고 다크한 테마2. Bearded Theme 엄청 다양한 테마 모음이 있어서 골라쓰는 재미추천테마 : Arc, Coffee, Coffee Cream, Monokai stone, Milkshake Vanilla Banana3. VSCode Icons다양한 확장자를 지원하고 색감이 다양해서 예쁘고 눈에 잘 들어옴4. GitHub Themediff 보기가 편하다고 함. + 개발 폰트 사이트https://www.programmingfonts.org/#lyth-mono 자주쓰는 폰트 : Myna, '나눔스퀘어 네오', '나눔바른고딕', Adwaita Mono,'D2Coding', Hack, Lyth Mono, 'Menlo', Consolas, 'Courier New',..
[웹스퀘어] xml파일에 css 추가하기 카테고리 없음 2026. 8. 4. xml 파일 최상단에 css 직접 넣는 코드
[웹스퀘어] material icon 사용 카테고리 없음 2026. 8. 3. 1. CSS 상단에 넣기@charset "utf-8";@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); 2. XML 코드 상에서 label 값에 아이콘 이름 넣기. 아래는 틀린 코드임!! close
[웹스퀘어] 반응형 테이블 코드 걷어내고싶을때 코딩/웹스퀘어 2026. 7. 30. pc화면만 보고싶은데 window사이즈 줄어들면 테이블 레이아웃 변경되는거 막고 싶을 때 table 컴포넌트에서 adaptiveThreshold="100" 으로 주면 됨.

Designed by 티스토리

© Daum Corp.

티스토리툴바