풀먹고 개발공부하는 노동자

pc, mobile 화면 크기에 따라 table 열의 너비가 다른 디자인을 마주했다. 내가 시도한 방법은 이렇다. 1. colgroup 을 'pc-only', 'mo-only' class를 사용해 'display: none', 'display: block' 처리를 한다. -> 문제점 : 웹 접근성에 걸린다. 테이블이 하나인데 col이 여러 개니까는..!2. col이나 th에 'nth-child' 선택자를 붙여 미디어 쿼리로 css를 처리한다. -> 문제점 : 코드가 길어져서 보기 싫어짐..!결국 내가 선택한 방법 : table에 고유 class를 붙이고(한 페이지에 테이블이 여러개가 있는 경우) col에 순서대로 번호를 붙여 col1~col5 class를 부여하고 @each 루프를 사용하여 코드 줄이기!..

CSS를 작성하다 보면 반복되는 구간이 보인다. 아래 같은 코드가 나를 신경 쓰이게 만들었다.&.esg-test-type1 { background-image: url(../../assets/images/esg/esg-test-type1.svg);}&.esg-test-type2 { background-image: url(../../assets/images/esg/esg-test-type2.svg);}&.esg-test-type3 { background-image: url(../../assets/images/esg/esg-test-type3.svg);}&.esg-test-type4 { background-image: url(../../assets/images/esg/esg-test-ty..

이미지를 스크립트로 삽입하는 상황에서alt값을 직접 작성하기 어려울 때 써먹기 좋은 간단 코드! (접근성을 위해 alt값은 필수로 작성해야 하므로)document.addEventListener('DOMContentLoaded', function () { var imgs = document.querySelectorAll('.section .figure .cover'); imgs.forEach(function(img) { img.addEventListener('load', function() { img.alt = "이미지 설명"; }); });}); 위 코드에 대한 GPT의 설명 : '이 코드는 이미지가 로드될 때마다 해당 이미지의 alt 속성을 ..

학원에서 배워 잘 써먹고 있는 skip 네비게이션의 마크업와 스타일.접근성에 필수이기 때문에 무조건 넣어줘야 한다! (보통 메뉴바로가기, 본문바로가기, 하단정보바로가기 이렇게 3개의 메뉴를 넣는 것 같다.) 마크업본문 바로가기 스타일#skip-nav{ position: fixed; left: 0; top: -40px; width: 100%; line-height: 40px; text-align: center; background-color: rgba(0, 0, 0, 0.8); color: #ffffff; font-size: 16px; transition: top 0.3s; z-index: 100000;}