코딩기록

table { display: block; overflow-y: auto; } table tbody tr td div.text-ellipsis { display: table; table-layout: fixed; width: 100%; white-space: nowrap; } table tbody tr td div.text-ellipsis > * { display: table-cell; overflow: hidden; text-overflow: ellipsis; } 1 문의sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss내용 2022.11.11

/*탭메뉴*/ .tab-nav { text-align: center; width: 28%; margin: auto; display: flex; justify-content: space-between; } .tab-nav li{ display: inline-block; text-align:center; } .tab-nav li a{ display:block; border: 1px solid #333; color: #000; padding: 6px 12px; font-size:0.875rem; } .tab-nav li a:hover, .tab-nav li a.active{ background:#212529; color:#fff; } $(function(){ $('.tab-content > div').hide..

/*첨부파일*/ .file-box .upload-name { display: inline-block; height: 30px; padding: 0 10px; vertical-align: middle; border: 1px solid #999; width: 30%; color: #999999; outline: none; } .file-box label { display: inline-block; padding: 0 20px; color: #fff; vertical-align: middle; background-color: #999999; cursor: pointer; height: 30px; line-height: 30px; margin-left: 10px; } .file-box input[type="fi..

/* 스크롤바 가리기 */ body{ -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; }

▶HTML EventHandler - if(elName.value.length < 5) //요소. 입력내용. 글자 수 elMsg.textContent = '이름은 5글자 이상 써주세요!'; : 사용자 이름 5글자 이하일 때 경고창 뜸. ▶다른방식 매개변수 추가 IE 구버전 ▶커서 포커스 - 화면이 로드될 때 자동으로 커서가 움직임.

▶form_출석체크 - A.append(b); //부모요소A에 자식 요소를 추가 (마지막 부분) - A.prepend(b); //부모요소A에 자식 요소로를 추가 (첫번째 부분) - A.before(B); //A요소의 바로 앞에 B를 추가 - A.after(B); //A요소의 바로 뒤에 B를 추가 - A.insertbefore(B); //A요소의 바로 앞에 B를 추가 - A.insertafter(B); //A요소의 바로 뒤에 B를 추가 ▶form_약관동의 - all.onclick = function(){ terms1.checked = this.checked; terms2.checked = this.checked; } : 모든 약관 동의 - overflow: auto; : 영역 안의 글자 자동으로 스크롤 생..

▶애니메이션 배너 만들기 - 배너에 들어가는 애니메이션 이미지들 각각의 위치지정 해줌. - 애니메이션에 들어가는 세미콜론(;) 잘 확인해야함 . 작동하지 않음. - opacity 값을 주어 투명했다가 진해지는 효과를 넣어줌.

▶classList add/remove/contains - 사이트를 열었을 때 사이드바가 안보이는 상태이기 때문에 !(부정) 사용 - toggle 을 사용하지 않았을 때의 방법으로 if 사용해봄. ▶classList add/remove - 버튼이 여러개라서 querySelectorALL 사용 - function의 bb를 그대로 사용하지 못해서 변수값 let num=0 지정 ▶classList add/remove - .list img의 개수가 여러개기 때문에 querySelectorALL 사용 - .list img의 이미지를 onclick하면 클래스 active 발생 - elpopImage.src = this.src : 팝업창이 이미지 주소는 내가 클릭하는 이미지 - num = bb : 몇번째 배열의 아이..

▶attribute(속성) 검사 - .menuOn : '개인'메뉴가 항상 밑줄에 두껍게 표시될 수 있도록 함. - utilMenu 사이에 막대기는 after를 이용해 만듦.

▶attribute(속성) 검사 - ul의 세번째 li가 클래스 유무에 따라 생성되는 문구가 다름. - li의 공백도 인식되기 때문에 공백없이 늘여써줌. ▶attribute 생성, 변경 - item1 : 첫번째 li의 기존 클래스 "rrr"을 "check"로 변경 - item2 : 세번째 li #three a 안에 링크를 넣어줌. - item3 : 세번째 li에 'red'클래스 넣어줌 ▶DOM - attribute(속성) 제거 - 2번째 li에 클래스가 없어서 경고창이 뜸. - 3번째 li에 아이디 지움. ▶class toggle - elBtn1.onclick = function(){ elC01.classList.toggle('active'); } : 간단하게 사용 가능 - 버튼 누르면 팝업창 생성 ▶c..