코딩 슬라임 공방

See the Pen 관계연산자 == === by Lee Hoyeon (@nixpluvia) on CodePen.

SVG - TEXT svg 안에 text 요소를 넣을 수 있는데 text를 넣을 때에 중앙 정렬을 해주기 위해서는 여러가지가 필요합니다. 우선 svg 안에 들어가는 text에 대한 참고 사이트 링크를 걸겠습니다. svg 텍스트 요소 text-anchor text에 사용할 수 있는 속성으로 text-anchor가 있습니다. text의 중심점을 정하는 요소인데 middle로 설정 해줘야 텍스트의 중앙에 오게됩니다. text-anchor 속성 dominant-baseline text에 사용하는 속성으로 dominant-baseline이 있습니다. 다양한 속성이 사용되지만 중앙으로 정렬하기 위해서는 central 값을 사용해줘야 합니다. middle 속성도 존재하지만 텍스트의 특성상 텍스트의 정중앙이 되지않습니..

참고사이트

스크롤의 방향을 확인하는 방법 스크롤의 방향을 확인하는 방법은 wheelDelta를 사용하면 확인 할 수 있다. 마우스휠(mousewheel) 이벤트에서 함수를 생성하고 함수의 매개변수에 event를 사용한다. event.wheelDelta 나 event.originalEvent.wheelDelta를 사용하면 값을 얻을 수 있다.\ 크롬에서는 아래로 내릴 때에는 -120의 값이 나오고 크롬에서는 위로 올릴 때에는 120의 값이 나온다 다른 브라우저에서는 다른 값이 나온다. 다른 브라우저의 값은 참고사이트에서 몇몇가지 확인 할 수 있다. 참고 사이트 참고 사이트

웹킷에서 스크롤바 없애는 방법 css에서 스크롤바는 없애지만 스크롤은 하게 하고 싶은 경우에 사용 할 수 있다. css에서 스크롤 바를 없애고 싶은 요소에 ::-webkit-scrollbar{display: none}를 사용하면 된다. 단점은 브라우저의 엔진이 웹킷이 아닐 경우에는 사용할 수 없다. IE에서 스크롤 바를 없애고 싶을 때에는 아래와 같이 css에 작성하면 된다. 요소{-ms-overflow-style: none;}

요소 줄어드는 것 방지 flex 사용 시에 flex가 적용된 상자들이 반응형에 따라 크기가 줄어들 때 크기가 줄어들면 안되는 요소들은 flex-shrink : 0을 사용해줘야 한다.

margin을 사용해서 좌우로 정렬하기 FLEX의 방향이 row일 때 FLEX 요소를 정렬하기 위해서는 justify-content를 사용해서 한쪽 방향으로 정렬할 수 있었다. 하지만 단 하나의 요소만 왼쪽이나 오른쪽으로 따로 정렬하기 위해서는 justify-self를 사용해야한다고 생각 할 수 있지만 justify-self라는 기능은 존재하지 않는다. 그래서 FLEX 요소 중 오른쪽 끝으로 정렬하고 싶은 요소는 margin-left: auto; 를 사용해서 오른쪽 끝으로 정렬 할 수 있고 왼쪽 끝으로 정렬하고 싶은 요소는 margin-right: auto; 를 사용해서 왼쪽 끝으로 정렬 할 수 있다. 이 방법을 사용해서 다양하게 정렬을 할 수 있으니 확인해 보기 바랍니다.