FRONT14 회사에서 사용하는 class 네이밍 방식이 궁금하다. 다니는 회사에서 사용하는 클래스 네이밍 방식이 있는데_업계에서는 이런 방식을 뭐라고 하는지 궁금하여 찾아봤다. 보통 아래와 같이 마크업 하고 있다. (data 말고도 post, board, bullet 등등 사용) 타이틀영역 타이틀영역 .. 2025. 6. 20. 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. scroll 이벤트 (jQuery 사용) 요소 일부가 보이면 토글클래스 [스크롤 이벤트 (jQuery코드임)] ● s-animation 클래스를 가진 요소가 뷰포트에 들어왔을 때 show 클래스를 토글 (요소가 스크롤로 화면 중간쯤에 들어오면 show 클래스 부여 / CSS 에서 show 클래스로 애니효과) ▷ 요소 선택 const $sAnimations = $('.s-animation'); ▷ 함수 작성function scrollAnimation() { const triggerPoint = (window.innerHeight) / 1; $sAnimations.each(function(index, section) { const sectionTop = section.getBoundingClientRect().top - $(section).height() / 2; .. 2025. 6. 20. 메일 코딩 table HTML 일부 안되는거 겁나 많은 메일 코딩. 일단 모든 내용들을 감싸는 body 코드 부터. body태그 바로 밑에서 시작하는 table 태그 메일 코딩은 아웃룩이 문제가 아니라 지메일이 문제다. 2025. 6. 20. gulp 한 줄 한 줄 해석 1년 전에 자동화 툴로 사용했던 gulp 세팅값이다. 당시에 프로젝트가 끝나고 시간적 여유가 있어서, gulp 코드의 한 줄 한 줄에 대한 역할을 찾아서 정리해 놨었다. 지금 여기서 더 업그레이드되었을 수 있다. 최신 문법이 생겼을 수도 있고. 암튼 일단 잃어버릴까 봐 블로그에 기록!const gulp = require("gulp"); // gulp 기본 모듈. 파일을 읽고 변환.const scss = require("gulp-sass")(require("sass")); // gulp-sass는 gulp와 함께 사용 가능한 scss 컴파일러. require("sass")를 통해 Dart Sass 컴파일러 사용 (Dart Sass는 Sass의 최신 기능과 사양을 가장 먼저 지원. 오류 메시지 지원)cons.. 2025. 6. 20. wv-2503~2505-02 (스크롤바 작업 중 기록 / 스크롤바 CSS 속성) 스크롤바 작업중이었다.아.. 난관에 봉착했다.뭐가 문제인가?스크롤바 상단, 하단의 여백이 없어서border-radius가 들어간 영역에서는 스크롤바가 보기 좋지 않다.아래와 같이 말이다.. 라운드가 아닌 직각 박스안에서는 크게 문제 될 것은 없어보이나,모서리가 둥근 박스에서는 스크롤바가 .. UI작업 하면서 매번 고민과 고통을 주는 요소들이 있다.요즘에는 SWIPER 커스텀, 그리고 스크롤바가 그것이다.디자이너가 원하는 스크롤바는 구현하기 쉽지 않다.애초에 스크롤바를 CSS로 커스텀하기가 .. 고되다. (MDN에서도 말한다. '스크롤바 스타일을 지정하는 것은 피해야 합니다. 스크롤바의 모양을 기본 설정에서 변경하면 외부 일관성이 깨져 사용성에 부정적인 영향을 미치기 때문입니다. '라고..) 위에는 C.. 2025. 4. 30. wv-2503~2505-01 (인터랙션 작업 중 기록) WV 인터랙션 작업 중 (카드 펼쳐짐) 크롬에서는 부드럽게 정상적으로 작동하는 반면, 사파리, edge 에서 버벅거림 현상 발견. 이유는 top, left 로 위치를 잡았기 때문. transform으로만 작업했더니 모든 브라우저에서 부드럽게 정상 작동! 반응형 사이트이기 때문에 mobile 분기에서는 아래처럼 vw 단위를 사용했다. 현재 인터랙션 작업하면서 가장 까다운것이 cubic-bezier 값 맞추기. 이게 지금 제일 어렵다. 2025. 4. 16. 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 2 다음
