Web/HTML|CSS (10) 썸네일형 리스트형 [Tailwind] tailwindcss cli 프론트 개발을 한다고 하였을때 특히 js 관련 프로젝트를 진행한다고 하였을 때 tailwind를 모르기란 쉽지않다. 오랜만에 프론트 진행을 하였는데 가벼운 프로젝트라 python 으로 서버를 돌리고 jinja 템플릿을 조금 사용하고 js로 함수로 기능을 붙이고.. 하였다.. 이때 css의 사용 편의성을 위하여 tailwind를 사용하였는데 커스텀이 필요하였다. 처음에는 아래와 같이 tailwindcss를 기본적으로 넣고 수정이 커스텀 css 들을 작성하여 반영하는 방식으로 하였다. 근데 이렇게 했을 경우 문제점이 자꾸 모듈을 넣어줘야하니까 화면이 깜박깜박거리는 것이다.엄청나게 거슬린다. 그래서 그걸 고치는 방법을 찾아봤는데 tailwindcss cli 로 패키징을 다시해주는듯하다. 원래는 이렇게 사용하는.. [CSS] FLEX BOX https://css-tricks.com/snippets/css/a-guide-to-flexbox/ A Complete Guide to Flexbox | CSS-Tricks Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi css-tricks.com [CSS] css 3d transform www.google.com/search?q=css+3d+transform&source=lmns&bih=937&biw=1920&rlz=1C1FKPE_koKR942KR942&hl=ko&sa=X&ved=2ahUKEwjLpMGq5v_vAhUN35QKHS2MAvUQ_AUoAHoECAEQAA css 3d transform - Google 검색 2019. 1. 2. · CSS 3D transform 은 평면에서의 여러 개 CSS 속성을 조합하고 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함하고 원근감, 관찰자의 위치을 부여 ... www.google.com [CSS] Border style do not work with sticky position element Border style do not work with sticky position element table의 thead를 고정하고 싶을때 sticky 를 사용한다. border를 주고 싶을 때 잘못 사용하면 막 이상하게 스크롤이 되는데 아래와 같은 방법으로 해결 할 수 있다 요약 : table의 속성을 border-collapse: collapse; collapse 말고 border-collapse: separate; /* Don't collapse */ separate 로 주어야한다. separate로 주었을때 border를 안줬는데도 있는 경계선이 싫다면 table에 border-spacing: 0; 를 주면된다. stackoverflow.com/questions/50361698/border-styl.. 아이콘 웹 폰트 fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com icofont.com/icons All Icons | IcoFont Download any icons from the vast collection and use it to your design, website, mobile application and any software. icofont.com css로 할 수 있는 것들 css로 심슨 그리기 pattle.github.io/simpsons-in-css/ The Simpsons in CSS Bart View CSS Marge View CSS Lisa View CSS Maggie View CSS Mr Burns View CSS Ned Flanders View CSS Krusty the Clown View CSS Itchy View CSS Smithers View CSS Comic Book Guy View CSS Ralph Wiggum View CSS Apu View CSS What's really cool is I can now do stuf pattle.github.io queryselector www.w3schools.com/jsref/met_element_queryselector.asp HTML DOM querySelector() Method HTML DOM querySelector() Method ❮ Element Object Example Change the text of the first child element with class="example" in a element: var x = document.getElementById("myDIV"); x.querySelector(".example").innerHTML = "Hello World!"; Try it Yourself www.w3schools.com [CSS] font 관련 메모 https://wit.nts-corp.com/2017/09/25/4903 (번역) CSS에 대한 깊은 이해: 폰트 매트릭스, line-height와 vertical-align 원문: 본 번역문은 원작자인 Vincent De Oliveira의 동의하에 번역 및 게시되었습니다. line-height와 vertical-align은 아주 간단한 CSS 속성들입니다. 매우 간단하기 때문에 대분의 사람들은 이것 wit.nts-corp.com https://aboooks.tistory.com/171 [html/css] vertical-align 속성 자세히 알기(수직 정렬) [html/css] vertical-align 속성 자세히 알기(인라인 요소의 수직 정렬) vertical-align 속성, 그저 수직 정렬할 .. 이전 1 2 다음 목록 더보기