전체 글28 [JavaScript] col 태그의 class를 tbody의 td에 동일하게 할당 col 태그의 class를 tbody의 td에도 동일하게 할당해 col 태그에서 적용할 수 없는 text-align 등을 css에서 적용하는 방법 [html] header header header header content 1 content 2 content 3 content 4 content 5 content 6 content 7 content 8 content 9 content 10 content 11 content 12 [css] table, th, td { border: 1px solid #222; } th, td { width: 100px; } .col-2 { text-align: center; } .col-3 { color: red; } [js] window.onload = function().. 2024. 3. 4. [JavaScript] table에서 내용을 title 속성에 자동으로 추가 table 태그 내 td 안의 내용을 td의 title 속성에 자동으로 추가하여 툴팁(tooltip)으로 보여주는 방법 [html] header header header header content 1 content 2 content 3 content 4 content 5 content 6 content 7 content 8 content 9 content 10 content 11 content 12 [css] table, th, td { border: 1px solid #222; } [js] window.onload = function() { // 화면 로딩 후 실행 let tds = document.querySelectorAll('td'); // td 태그 배열로 변수에 할당 tds.forEach((i.. 2024. 1. 24. [JavaScript] siblings() 함수 활용 탭 메뉴 (Tabs) 구성 siblings() 함수(function)로 형제요소를 선택하여 탭 메뉴(Tabs) 구성하는 방법 [html] tab#1 tab#1 content tab#2 tab#2 content tab#3 tab#3 content [css] * { margin: 0; padding: 0; } ul, li { list-style: none; } ul { display: flex; gap: 2rem; position: relative; } .content { display: none; position: absolute; top: 1.5rem; left: 0; } .tab.active .content { display: block; } [js] function siblings(t) { var children = t.par.. 2023. 10. 31. [Tabulator] 배경색(background) / 테두리(border) / 마우스오버(mouseover) 변경 테이블 라이브러리(table library)인 타뷸레이터(Tabulator) 배경색(background) 및 테두리(boder), 마우스오버(hover) 효과 변경 방법 [html] [css] html, body { font-family: 'Roboto', sans-serif; color: #333; } .tabulator { margin: 2rem; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .tabulator .tabulator-header { border-bottom: none; /* header 하단 구분선 삭제 */ } .tabulator .tabulator-header .tabulator-col { background: #4.. 2023. 9. 17. [DataTables] 배경색(background) / 테두리 (border) 변경 테이블 라이브러리(table library)인 데이터테이블(DataTables) 배경색(background) 및 테두리(boder) 변경 방법 [html] Column 1 Column 2 Row 1 Data 1 Row 1 Data 2 Row 2 Data 1 Row 2 Data 2 Row 3 Data 1 Row 3 Data 2 Row 4 Data 1 Row 4 Data 2 [css] html, body { background: #ddd; color: #333; } #myTable_wrapper .dataTables_length, #myTable_wrapper .dataTables_filter { padding-bottom: 1rem; } #myTable { border: none; /* 테이블 최하단 테두.. 2023. 9. 14. [CSS] 마우스오버 (hover) 밑줄 애니메이션 효과 마우스오버(mouseover, hover) 시 밑줄(underline)이 가운데 또는 왼쪽에서부터 나타나는 효과 적용하는 법 [html] Center Left to Right [css] ul { display: flex; gap: 40px; font-size: 40px; list-style: none; } li::after { content: ""; display: block; width: 100%; height: 4px; background: #000; transition: all 1s; } /* 가운데에서 나타남 */ .center::after { transform: scaleX(0); } .center:hover::after { transform: scaleX(1); } /* 왼쪽에서 나타남 */ .. 2023. 8. 22. [HTML] 아이폰(iOS) 사파리(Safari) 전화번호 인식 차단 아이폰이나 아이패드의 iOS용 사파리(Safari)에서 전화번호를 자동으로 인식하여 a태그로 변경하는 것을 차단하는 방법 [html] 전화번호: 02-111-1111 별다른 css 없이 html을 위와 같이 작성하여도 iOS의 사파리(Safari)에는 전화번호를 a태그로 변경하여 아래처럼 표시한다. iOS의 사파리(Safari) 전화번호 자동 인식 기능을 차단하려면 아래의 메타태그 한 줄만 추가해주면 된다. [html] 메타태그를 삽입하고 확인해보면 아래처럼 정상적으로 표시되는 것을 확인할 수 있다. 2023. 8. 20. [jQuery] 특정 위치(화면 위치)에서 스크롤 이벤트 스크롤 시 화면이 특정 위치에 도달했을 때 이벤트 발생 화면의 1/2 지점과 2/3 지점에 div가 도달했을 때 배경색 변경 예시 [html] 아래로 스크롤 화면의 1/2 지점에서 이벤트 발생 화면의 2/3 지점에서 이벤트 발생 [css] div { width: 100%; height: 700px; font-size: 2rem; text-align: center; } .scroll-12 { background: pink; } .scroll-23 { background: skyblue; } [js] // 화면의 1/2값과 2/3값 변수 할당 let scrollVh12 = $(window).innerHeight() * 1 / 2; let scrollVh23 = $(window).innerHeight() * .. 2023. 8. 14. [jQuery] 마우스 커서(cursor) 따라다니는 애니메이션(animation) 마우스 커서(cursor)를 따라다니는 도형 애니메이션(animation) [html] [css] .cursor { position: absolute; transform: translate(100%, 100%); width: 1rem; height: 1rem; border: 2px solid #808080; border-radius: 50%; opacity: 0.4; transition: all 0.3s ease-out; z-index: 1000; } .cursor.on { border: 2px solid #222; background: #222; opacity: 1; } [js] $(window).on('scroll mousemove', function(e){ $('.cursor').css('left'.. 2023. 8. 11. 이전 1 2 3 4 다음 728x90
