JavaScript4 [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. [JavaScript] forEach 활용 탭 메뉴 (Tabs) 구성 자바스크립트의 forEach를 활용하여 탭 메뉴 구성하기 [html] tab1 tab1 content tab2 tab2 content tab3 tab3 content [css] ul { position: relative; padding: 0; } li { list-style: none; } a{ color: inherit; text-decoration: none; } .tab-menu { display: flex; justify-content: space-between; width: 200px; } .tab.active { color: red; text-decoration: underline; } .content { display: none; position: absolute; left: 0; top: .. 2023. 7. 8. 이전 1 다음 728x90
