J.BF Story

다음과 같이 각 탭과 박스를 'id'를 통해 연결시켜준 후, 탭의 'selected' 클래스와 박스의 'hide' 클래스을 이용해 스타일을 나타내준다. 선택한 탭만 'selected' 클래스를 가지도록 하고, 선택한 탭과 관련된 박스를 제외하고는 'hide' 클래스를 가지도록 한다. tab1 tab2 tab3 test box 11111 ... test box 22222 ... test box 33333 ...

CSS를 통해 넘친 콘텐츠 또는 라인수를 넘어가는 글자에 대하여 뒤에 '...'이 붙는 말줄임 처리를 할 수 있다. 한줄일 경우와 여러줄 일때 구현방법이 다르다. 한줄인 경우 text-overflow 속성의 'ellipsis'를 통해 넘어가는 글자를 말줄임(...) 처리한다. 'white-space: nowrap', 'overflow: hidden' 설정을 꼭 해주어야한다. 'white-space: nowrap': 줄바꿈없이 한줄로 표시 'overflow: hidden': 넘친 콘텐츠 안보이게 처리 test one line ellipsis.testestestestestestestestestestestestestestestestestestestestestestestestestestestest 여러줄인 경우..

onclick vs addEventListener("click") onclick addEventListener("click") 공통점 - 이벤트 수신 - 콜백 함수 실행 가능 차이점 - 요소의 속성임 - 속성값은 덮어쓰기가 되므로 둘 이상의 이벤트를 동시에 핸들링 할 수 없음 - 요소에 이벤트 헨들러 추가 - "on" 접두사 없이 사용 - 요소에 이벤트 헨들러를 덮어쓰지 않고 제한 없이 추가 가능 사용법 - html: - js: testBtn.onclick = testFunc1; js: testBtn.addEventListener("click", testFunc1); 예시 onclick CLICK ME!! addEventListener("click") CLICK ME!! 참고 https://www.gee..

Windows Chrome 환경에서는 스크롤이 있는 경우 스크롤바가 기본적으로 항상 존재한다. 다음과 같이 설정하여 스크롤 기능은 유지하면서 스크롤바를 없앨 수 있다. .test-scroll-box::-webkit-scrollbar { display: none; }

X축, Y축 스크롤에 대하여 처음과 끝을 탐지하는 코드는 다음과 같다. // // X축 scroll function isScrollXStart(ele) { return (ele.scrollLeft = ele.scrollWidth) } // // Y축 scroll function isScrollYStart(ele) { return (ele.scrollTop = ele.scrollHeight) } ** ceil: Window환경의 브라우저에서 특정 해상도에서 1미만의 차이로 탐지를 못하는 경우가 있었다. 이를 방지하기위해 값을 올림(ceil) 처리를 하였다.

다음과 같이 요소들을 겹쳐놓았을 때, 앞에 있는 요소만 이벤트가 정상적으로 동작하고 뒤에 있는 요소의 모든 이벤트(스크롤 이동, 버튼 클릭, 텍스트 드래그 및 선택 등)가 작동하지 않는 것을 확인할 수 있다. 앞 요소: 양옆 방향 버튼을 가진 요소 뒤 요소: 스크롤이 가능하며 텍스트, 버튼을 가진 요소 item1 btn1 item2 btn2 item3 btn3 item4 btn4 item5 btn5 이 경우 'pointer-events' 속성을 활용하여 뒤의 이벤트를 처리할 수 있다. pointer-events 해당 요소의 포인터(마우스) 이벤트 (scroll, hover, click, drag ...) 활성화 여부 결정 설정값 auto: pointer-events 적용하지 않음 none: - 해당 요소..

'flex'를 활용하여 반응형 레이아웃을 만들던 중 같은 크기의 아이템들을 유동적이고 순차적으로 나열하려고 했을 때, 다음과 같은 문제가 발생했다. WISH 아이템 넓이는 기본 240px 아이템들이 화면 크기에 따라 적절하게 정렬되며, 화면에 꽉차게 유동적으로 크기가 변했으면 함 모든 아이템의 크기가 동일했으면 함 PROBLEM 행에 배치된 아이템들끼리 무조건 화면에 꽉차게 크기를 조정하기 때문에, 행마다 아이템 크기가 다를 수 있음 logo1 logo2 logo3 logo4 logo5 logo6 logo7 이러한 현상은 'flex'가 1차원적으로 한 방향으로만 요소를 배치할 수 있는 특성때문에 발생한 것이다. (요소 배치 방향 row, column 둘 중에 하나만 선택 가능) 여기서 2차원적으로 가로,..

다음 코드와 같이 'static' 요소와 'absolute' 요소를 혼합해서 사용하는 경우에 'static' 요소가 'absolute' 요소보다 앞으로 와야하는 상황이 있었다. 그러나 'static'요소에 아무리 'z-index'를 두어도 앞으로 배치되지 않았다. static absolute 이 경우 position을 'static'에서 'relative'으로 변경해주면 된다. static absolute 요소가 쌓이는 순서가 어떻게 되는지 궁금하여 다음과 같이 코드를 만들어서 테스트를 해봤다. 1. fixed 2. sticky 3. relative 3-A. absolute in test-relative 4. absolute 5. static 'static' 요소는 가장 뒤에 위치한다. 'static'을..

가상요소 ::after, ::before에서 사용한 svg에 대하여 크기 조정이 되지 않아 사용했던 방법이 'background'를 활용하는 것이었다. (포스팅한 링크 참고) [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url) [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (background) 원인을 찾아보다가 svg 파일의 값에 width, height값이 고정적으로 설정되어 있는 것을 볼 수 있다. svg 파일 값은 'vs-code'로 svg파일을 열면 확인이 가능하다. 다음은 크기 조정이 가능했던 svg파일과 크기 조정이 불가능했던 svg파일 설정 차이이다. 고정 크기 값을 가지고 있는 svg를 'con..

저번에는 svg를 ::after, ::before의 'content'로 표현하여 요소를 꾸며주었다. [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url) [CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url) 가상요소 ::after, ::before에 'content'에 svg 이미지를 로드하여 요소를 꾸며줄 수 있다. 이렇게 구성하면 svg를 나 를 통해 따로 나타낼 필요없이 class만으로 표현이 가능하기 떄문에 관리하기 편하고 jbf-story.tistory.com 하지만 고정 크기를 가진 svg을 사용하여 작업했을 시 다음과 같은 문제가 발생했다. width, height를 설정해도 svg..