CSS36 css flex 속성에 관하여 아래의 두 링크에 flex 속성에 대한 자세한 설명이 있다. https://www.vobour.com/1-flexbox-%EC%9D%B4%ED%95%B4-%EB%8B%B9%EC%8B%A0%EC%9D%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%EB%AA%A8%EB%93%A0-%EA%B2%83-understa http://gnoownow10.cafe24.com/assets/html/flexbox.html 2018. 5. 9. background-image 에서 해당 이미지가 없을때 대처방법 아래의 링크에 그 방법이 잘 나와있다. https://stackoverflow.com/questions/22287474/onerror-event-using-background-url?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa 2018. 5. 1. 로딩바 구현 로딩바를 지금까지는 absolute 방식을 써서 만들었는데,찾아보니 fix 방식을 쓰는것이 훨씬 깔끔하고 쉬웠다.아래의 링크는 내가 깔끔한 로딩바를 구현하기 위해 참조한 링크이다. https://codepen.io/MattIn4D/pen/LiKFC 결론적으로 내 코드는 아래와 같다. * html 부분 * css 부분 #loading { position: fixed; margin: auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 7000;} #loading:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color.. 2018. 4. 7. image drag 방지 -webkit-user-drag: none; 이라는 속성을 쓰면 이미지 드래그를 방지할 수 있다. 2018. 1. 31. box-sizing 속성의 중요성 bootstrap을 참조하면 일반적으로 대부분의 div에 box-sizing 속성이 잡혀있다.예전에는 몰랐는데, 해당 속성이 css 코드에 있어서 많이 중요하다는 것을 알게되었다.본 속성은 div의 padding 값을 고려하여 DOM 속성에 width 값을 정해준다.자세한 설명은 아래의 링크를 참조하면 된다. https://www.w3schools.com/cssref/css3_pr_box-sizing.asp 본 속성을 설저 안하고 padding에 감싸져 있는 태그에 width 100%값을 준다면,해당 태그가 감싸진 태그의 범위를 넘어서게 된다. 2018. 1. 31. 부모 영역의 이벤트를 자식에게 전달 최근 CSS3에서 만약 부모의 DOM에 이벤트가 발생했을때 자식의 스타일을 바꾸어줄수 있는지 찾아보았다.왠걸 정말 방법이 존재했다..(정말 좋아졌구나..ㅅ..) https://stackoverflow.com/questions/7217244/style-child-element-when-hover-on-parent/7217397 그냥 간단히 hover 다음에 바꾸어줄 자식 dom을 적으면 된다. 2018. 1. 29. html img 태그에 background-image에서 사용하는 contain 속성을 부여하고자 할때 image 태그에도 contain 속성을 부여하는 css 속성이 있을까 찾아봤는데, 결론적으로 제공하고 있었다.object-fit 이라는 속성인데, 아래의 링크에 잘 설명되어 있다. https://developer.mozilla.org/ko/docs/Web/CSS/object-fit 2017. 12. 18. css를 사용한 글자바꾸기 최근 워드프레스의 플로그인의 영문을 한글로 바꾸어야 할 일이 생겼다.플러그인 코드를 죄다 일일이 뜯어보는 방법 말고도 CSS로 쉽게 글자를 바꾸는 방법을 찾아보니,그 방법이 존재하였으며 간단하였다. 자세한 설명은 아래의 링크에 나와있다. https://www.thewordcracker.com/miscellaneous/replace-text-with-css/ 2017. 11. 7. masonry 구현시 유의할 점 본 포스트를 올리게 된 이유는 이전에 masonry를 구현해 놓은것에 대한 문제점을 발견하였고,그것을 해결하였기 때문이다. 두가지 문제가 있었는데, 하나는 반응형 컬럼 구현이었다.창의 width값이 변함에 따라서 컬럼의 수가 동적으로 달라졌는데,이떄문에 창의 width값에 따라 원하는 컬럼의 수를 맞춰주기 위해컬럼안의 객체의 너비를 column-width 속성으로 일일이 설정해줘야 했다. 해결 방법을 찾아보니 column-count 이라는 속성을 이용하면 쉽게 해결할 수 있었다.본 속성은 창이 width 값이 달라져도 컬럼의 개수를 일정하게 유지시켜주는 속성이다. 다음 문제로는 컨텐츠가 세로로 짤려서 다음 컬럼으로 가는 문제였는데,본 문제는 컬럼안에 있는 각 객체에 break-inside: avoid 속.. 2017. 8. 10. 이전 1 2 3 4 다음