FRONT/CSS&SCSS4 ir 기법을 위한 CSS 코드 일단 IR기법은 웹접근성을 위해 필요함다이어그램, 표, 그래프 등이 이미지로 되어있을 때 설명하기 위함임.대체 텍스트를 숨기는 것! (스크린리더로만 읽히도록, 화면에는 안 보임) display: block; position: absolute; overflow: hidden; visibility: hidden; margin: -1px; padding: 0; width: 1px; height: 1px; line-height: 1px; font-size: 1px; border: 0; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); pointer-events: none; 보통 내가 작업하는 프로젝트에는 .. 2025. 6. 20. wv-2503~2505-02 (스크롤바 작업 중 기록 / 스크롤바 CSS 속성) 스크롤바 작업중이었다.아.. 난관에 봉착했다.뭐가 문제인가?스크롤바 상단, 하단의 여백이 없어서border-radius가 들어간 영역에서는 스크롤바가 보기 좋지 않다.아래와 같이 말이다.. 라운드가 아닌 직각 박스안에서는 크게 문제 될 것은 없어보이나,모서리가 둥근 박스에서는 스크롤바가 .. UI작업 하면서 매번 고민과 고통을 주는 요소들이 있다.요즘에는 SWIPER 커스텀, 그리고 스크롤바가 그것이다.디자이너가 원하는 스크롤바는 구현하기 쉽지 않다.애초에 스크롤바를 CSS로 커스텀하기가 .. 고되다. (MDN에서도 말한다. '스크롤바 스타일을 지정하는 것은 피해야 합니다. 스크롤바의 모양을 기본 설정에서 변경하면 외부 일관성이 깨져 사용성에 부정적인 영향을 미치기 때문입니다. '라고..) 위에는 C.. 2025. 4. 30. table 열의 넓이(col width값)가 pc, mobile 화면 크기에 따라 달라질 때. @each 사용 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 루프를 사용하여 코드 줄이기!.. 2024. 7. 8. 반복되는 SCSS소스! @for 지시어로 줄이는 방법 찾기. 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.. 2024. 7. 4. 이전 1 다음
