CSS (19) 썸네일형 리스트형 Transition (2) Transition 예제 (2) DOCTYPE html> Step01_Transition2.html .box{ width: 100px; height: 100px; border: 1px solid red; } #one{ transition: all 5s ease-in-out; /* 처음에 천천히 */ } #two{ transition: all 5s ease-out; /* 나중에 천천히 */ } #three{ transition: all 5s linear; /* 계속 일정하게 */ } .margin{ margin-left: 800px; } transition timing function 테스트 start document.querySelector("#startBtn").addEventListener("clic.. Transition (1) transition 란? css가 변경되는 중간 과정을 보여주기 위한 css 속성이다. DOCTYPE html> Step01_Transition.html .box{ width: 100px; height: 100px; border: 1px solid red; cursor: pointer; /* css 가 변경되는 중간 과정을 보여주기 위한 css 속성*/ /* transition: all 1s linear; */ transition-property: all; transition-duration: 1s; transition-timing-function: linear; } .box:hover { width: 200px; height: 200px; border-width: 10px; margin-left: 10.. Bootstrap Popover 디자인 및 동작 예제1) DOCTYPE html> Step06_Popover.html Popover 테스트 Click to toggle popover Click to toggle popover Click to toggle popover // data-bs-toggle 속성의 value 가 popover 인 모든 요소의 참조값을 배열에 담아오기 const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]'); // popover 가 동작하기 위한 초기화 작업 하기 const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTr.. Bootstrap Dropdown 디자인 및 동작 DOCTYPE html> Step04_DropDown.html dropdown 버튼 테스트 Dropdown button Action Another action Something else here 메뉴 선택 김밥 라면 떡볶이 // document.querySelector("#btn1").addEventListener("click", (e)=>{ // document.querySelector("#btn0").innerText = e.target.innerText // }); // document.querySelector("#btn2").addEventListener("click", (e)=>{ // document.querySelector("#btn0").innerText = e.target.innerTex.. Bootstrap Alert 디자인 및 동작 DOCTYPE html> Step03_Alert.html 알림 메세지 성공적으로 작업이 끝났습니다. 삭제 했습니다 확인 0ops! 작업이 실패 했습니다. bootstrap javascript 를 로딩하고 data-bs-xxx 속성을 적절히 추가하면 자동으로 동작하는 UI 가 있다. 0ops! 작업이 실패 했습니다. 어쩌구.. 저쩌구.. 테스트 테스트 테스트 document.querySelector("#closeBtn").addEventListener("click", ()=>{ document.querySelector("#myAlert").style.display="none" }) document.querySelector("#testBtn").addEventListener("click", ()=>{ con.. Bootstrap Form 디자인(2) DOCTYPE html> Step02_Form4.html 다양한 form 디자인 아이디 비밀번호 직업 선택 프로그래머 의사 성별체크 남자 여자 취미 체크 피아노 게임 기타 개인정보 활용 동의 전체 동의 이메일 수신여부 광고성 문자 수신 여부 가입 document.querySelector("#allowAll").addEventListener("change", (e)=>{ // 모두 동의 체크 여부 알아낸다 const Check = e.target.checked // 클래스가 allow 인 모든 요소의 참조값을 배열로 얻어내기 const allows = document.querySelectorAll(".allow"); // 반복문 돌면서 checkbox 상태 바꿔주기 for (let i=0; i{ // it.. Bootstrap Form 예제(정규 표현식 활용) DOCTYPE html> Step02_Form3.html 회원가입폼 아이디 영문자 소문자로 시작하고 4글자 이상 10글자 이하로 작성해 주세요 이메일 이메일 형식에 맞게 입력해 주세요! 가입 //페이지 로딩 시점에 상태값을 관리할 변수를 만들고 초기값을 부여한다. let isFormValid=false; let isIdValid=false; let isEmailValid=false; //아이디 입력란에 입력을 할때마다 호출되는 콜백함수 등록하기 document.querySelector("#id").addEventListener("input", (e)=>{ //1. 입력한 아이디를 읽어온다 const inputId=e.target.value; //const inputId2=document.querySele.. Bootstrap Form 디자인 Form 디자인 종류 form 크기) form 디자인 아이디 비밀번호 가입 위에 form 두개 중 아래의 form 을 보면 div class row 안에 div class를 col-6 으로 작성하면 창의 크기에 상관없이 6/12 크기를 갖게 된다. (위의 form은 col-6이 작성 안된 form이다) form 디자인 아이디 비밀번호 가입 576px 이상일때만 6/12 크기를 유지하는 class "col-sm-6" 576px 이상일때는 6/12 크기를 유지하지만 창의 크기가 576px 이하가 되는 순간 6/12 크기가 유지가 되지 못한다. form 디자인 아이디 비밀번호 가입 576 px 이상일 경우에만 가운데 정렬이 되는 class "col-sm-6 mx-auto" 576 px 이상일때는 폼이 가운데 .. 이전 1 2 3 다음
