CSS36 CSS position sticky 사용기 최근 CSS의 position 속성중에 sticky라는 녀석을 써보았다. 컨테이너에 붙어다니는 사이드 버튼을 위해서 사용했는데, 이것을 몰랐을때는 relative 와 fixed 간의 조합을 이용해서 구현했었다. 알고나니 이것이 정말 편한 속성임을 더 깨닫게 되었다.. (모르면 고생한다더니..) 해당 속성에 대한 자세한 설명은 아래를 참고하길 바란다. https://developer.mozilla.org/ko/docs/Web/CSS/position position position CSS 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다. developer.mozilla.org 여튼 여러분들도 스크롤이 내려가도 컨테.. 2019. 7. 2. header 속성이 fixed여서 생기는 문제방지 header 속성이 fixed 일때 생기는 문제중 하나가 페이지내 a 태그를 통해 이동하는 경우에 해당 콘텐츠를 가릴수 있다는 점이다. 나도 이런 문제에 직면했었는데, 의외로 해결 방법이 간단했다. 아래 링크에 해결 방법이 잘 나와있다. https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/ CSS Tip: Fixed Headers and Section Anchors | Caktus Group Linking within a page is a natural case for using a fixed header. Unfortunately, internal linking and a fixed header pos.. 2019. 4. 19. bootstrap tab에 의하여 차트의 width가 변하는 현상 해결 말그대로 bootstrap의 탭 콘텐츠에 차트를 만들게 되면 대부분 탭을 전환하는 과정에 있어 차트의 가로 수치가 손상되게 된다.이러한 문제를 해결하는 방법은 아래의 링크에 잘 나와 있다. https://jonpolygon.com/bootstrap-tabs-100-percent-width-charts/ 2018. 11. 6. css color name code 보는곳 아래의 링크에 css color name code 가 잘 나와있다. https://www.rapidtables.com/web/css/css-color.html#orange 2018. 9. 28. css calc() 함수 가끔 css 코딩을 하다가 width, height 값에 100% 속성을 주면서 동시에 어느정도 margin을 주고싶을때가 있다. 평소에는 설마 이러한 기능이 css에 있겠어 했는데,오늘 필요해서 찾아보니 정말 있었다.. calc()라는 함수인데 정말 매우 유용하다.더 자세한 설명은 아래의 링크를 참고하면 된다. https://www.w3schools.com/cssref/func_calc.asp 2018. 7. 23. column-count 속성을 사용하여 masonry를 구현할때 주의할 점 최근에 column-count 속성을 사용하여 masonry를 구현한 일이 있었다.자세한 설명은 아래의 링크를 참조하면 된다. https://codepen.io/AdamBlum/pen/fwrnE 위의 링크에서는 article에 column-count 속성이 적용되었고, section에서는 display: inline-block 속성이 적용되어 있다.이렇게 될 경우 신기하게도 section을 article이 잘 감싸지만 밑에 불필요한 공간이 생김을 확인하였다. (이걸 없애려고 3시간 동안 별별짓을 다해 보았다..)결론적으로 이것을 없애지 못하고 다른 방법을 찾게 되었다. 그것은 section의 display 속성을 block으로 주는 방법이다.이렇게 되면 해당 section 콘텐츠는 반응형에 따라 마구 짤.. 2018. 7. 20. column count 사용시 컨텐츠가 overflow 될때 말그대로 column-count 사용시 컨텐츠가 overflow 될때가 있다.이러면 모양이 보기 안 좋은데, 이러한 문제를 방지하기 위해서는 아래의 코드 하나만 추가해주면 된다. page-break-inside: avoid; 더 자세한 사항은 아래의 링크를 참고하면 된다. https://stackoverflow.com/questions/41668228/css-column-count-overflow-issue-in-chrome 2018. 7. 20. grid로 masonry 구현시 한계점 바로 이전 포스트에서 나는 완벽한 masonry를 구현하는 방법에 대해 포스트 하였다. 하지만 오늘 몇가지 실험을 해본결과 grid로도 완벽한 masonry를 구현하기에 한계가 존재한다는 사실을 알게 되었다.일단 아래는 내가 해당 스크립트를 jquery로 변한한것이다. function resizeGridItem(item) { var grid = $('#list-wrap'); var rowHeight = parseInt(grid.css('grid-auto-rows').replace('px', '')); var rowGap = parseInt(grid.css('grid-row-gap').replace('px', '')); var rowSpan = Math.ceil((item.children('.list-wr.. 2018. 5. 24. 완벽한 masonry 인터페이스를 구현하는 방법 2 marsonry를 사용하면 사용할수록 더 완벽한 marsonry에 도전하고 싶어지는것 같다.이전에 marsonry에 대해 정리하고 끝났었는데,그중에서 css의 gird 속성을 이용하여 marsonry 구현하는 방법도 링크를 달아놓았었다.그런데 오늘 gird 속성을 이용하여 완벽한 marsonry를 구현한 블로그를 찾게 되었다. 아래의 링크된 사이트에 그에대한 자세한 설명과 codepen 링크가 걸려있다. https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb 아래는 최종 완성된 링크다 나도 아래의 링크를 참조 및 수정하여 현재 개발하고 있는 사이트에 masonry를 구현할 수 있었다. https://codepe.. 2018. 5. 19. 이전 1 2 3 4 다음