J.BF Story

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

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

다음과 같이 요소들을 겹쳐놓았을 때, 앞에 있는 요소만 이벤트가 정상적으로 동작하고 뒤에 있는 요소의 모든 이벤트(스크롤 이동, 버튼 클릭, 텍스트 드래그 및 선택 등)가 작동하지 않는 것을 확인할 수 있다. 앞 요소: 양옆 방향 버튼을 가진 요소 뒤 요소: 스크롤이 가능하며 텍스트, 버튼을 가진 요소 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..

전체 요소에 'font-family'를 통해 글꼴을 정해줄 때 처음에는 다음과 같이 요소를 통해 적용하였다. 그러나 , , 요소에는 글꼴이 적용되지 않은 것을 발견하였다. Hello world Hello world Hello world 따라서 다음과 같이 요소 뿐만 아니라, , , 에도 'font-family'를 적용시켜줘야한다. Hello world Hello world Hello world

상단에 고정 헤더를 가진 웹페이지에서#anchor 를 통해 해당 anchor로 스크롤 할 시 고정 헤더에 의해 가려져 안보이는 현상이 일어났다. 테스트 코드는 다음과 같다. header welcome to anchor test test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This is test-anchor1 This ..

가상요소 ::after, ::before에 'content'에 svg 이미지를 로드하여 요소를 꾸며줄 수 있다. 이렇게 구성하면 svg를 나 를 통해 따로 나타낼 필요없이 class만으로 표현이 가능하기 떄문에 관리하기 편하고 코드가 간결해져 가독성도 올라간다. 예시는 다음과 같다. more ** svg의 width를 꼭 설정해주어야한다. ** svg가 기본적으로 차지하는 빈 공간의 면적을 'line-height'을 통해 줄일 수 있다. (텍스트도 마찬가지)