CSS (40) 썸네일형 리스트형 CSS 애니메이션 : Transforms Translation in flow 위치에서의 이동. 해당 요소의 이동이 grid, flex 타 요소 배치에 영향주지 않음. 픽셀 transform: translate(0px, 20px); % : 원래 자신의 크기 transform과 left의 차이점 Scale 배수를 나타내는 단위없는 값 좌우따로 너비나 높이 수정 시 모든 요소들의 위치를 계산해서 다 변경해야함. transform은 대상만 움직이고 확대하기에 성능에 좋음 Rotate 시계 방향으로 돌림 degree : 회전 각도 turn : 회전 수 Skew 거의 안씀. 대각선 레이아웃 만들 때나 씀 : https://9elements.com/blog/pure-css-diagonal-layouts/ 디폴트 X축. Y축 가능 Transform or.. 리액트 개발자를 위한 CSS Variable 원문 : https://www.joshwcomeau.com/css/css-variables-for-react-devs/ CSS Variables for React Devs CSS Variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with React to create dynamic themes. We'll see how to get the most out of CSS-in-JS tools like styled-components, and how our m www.joshwcomeau.com CSS 변수 정의 / 사용 일반 CSS 변수와.. Styled-component와 Tailwind 함께 사용하기 with Twin Macro 원문 보러가기 Tailwind는 맞춤형 디자인을 빠르게 구축하기 위한 유틸리티 퍼스트 CSS 프레임워크입니다. 단독으로 React 앱의 스타일 설정에 사용할 수도 있지만, Styled Components와도 잘 사용할 수 있습니다. Tailwind CSS, Styled Components 및 Twin Macro를 사용하여 CSS를 한 줄도 작성하지 않고 form 컴포넌트를 만들어 봅니다. 왜 이 세가지를 동시에 사용하죠? Tailwind 클래스는 상당히 길 수 있고, 이는 컴포넌트의 가독성과 유지보수성을 저해합니다. Styled Components의 경우 직접 스타일을 작성해야 합니다. Tailwind CSS는 유틸리티 클래스를 지원하고, Styled Components는 CSS-in-JS의 도움으로 컴.. resizable table(row, col) with React Unfortunately it's not an optimized solution. If you have any ideas for refactoring and optimization, feel free to contact me. note : This table's height is not fixed, so scrollTop is calculated with document.documentElement HTML 삽입 미리보기할 수 없는 소스 reference https://adamlynch.com/flexible-data-tables-with-css-grid/ Flexible data tables with CSS Grid Now that we've launched, I can finally talk abou.. [CSS][Layout][Positioned Layout][Absolute Positioning] Absolute Positioning을 통해 흐름에서 벗어날 수 있다. 이걸 언제 쓰지? 툴팁, 드롭다운, 모달, 대화상자 등 명백히 문서 흐름에서 벗어난 요소들 기본 위치 만약 displacement를 설정하지 않으면? 원래 Flow Laout시 자기 위치에 쌓여 뒤에 오는 요소를 가린다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Hello World It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 아래는 어떻게 그려질 지 생각해보자. This .. [CSS][Flow Layout][Flow Layout의 width, height] https://courses.joshwcomeau.com/ Josh W Comeau's Course Platform Not logged in. Please log in to access your course. courses.joshwcomeau.com Width Width의 기본값은 auto다 block level 요소의 기본 너비는 100%이라 생각할 수 있다. 하지만 기본값은 auto다. 위의 경우 크기 (부모컨텐츠너비100%-32px)를 계산하여 화면에 넘치지 않게 보여준다. 아래의 경우 화면 크기를 넘어가는 걸 볼 수 있는데, 이는 box-sizing이 content-box일 경우, 해당 컨텐츠의 크기는 부모의 크기 100%를 갖기 때문이다. 오른쪽으로 16px + 부모컨텐츠너비100%(화면길이).. [CSS][box-sizing 알아보기] TLDR : content-box면 content 영역 크기는 변하지 않는다. boreder-box면 content 영역 크기가 변한다. box-sizing : content-box는 모든 요소에 대해 디폴트 선언이다. 이 설정의 문제점은 content 영역 크기의 계산은 쉽지만 박스모델 전체 크기(dimension)가 예상이 어렵다는 것이다. border box : .box 클래스 요소의 크기(dimension)는? 드래그 : 220px * 320px 드래그 : 502px * 2px 크기가 없는 컨텐츠에 마진과 보더만 붙어서 보이는 현상은 보통 원하지 않을 것이다. 새로운 디폴트 : border-box *, *::before, *::after { box-sizing: border-box; } borde.. [CSS][Layout][Flow layout :마진 및 마진 겹침] 마진 마진은 보더, 패딩과 다르게 음수가 가능하다. 이는 엘리먼트를 부모 안으로 혹은 밖으로 끌어당기고 내보내는 것이 가능하다는 것이다. 즉 부모가 자식에게, 또는 반대로, 형제가 형제에게 영향을 미치는 것이 가능하다. 좀 더 알아보기. Negative margins in CSS - QuirksBlog (quirksmode.org) Negative margins in CSS - QuirksBlog Negative margins in CSS I’m writing the Box Model chapter of the new book and came to the point where I had to treat negative margins. To my surprise, I found that there is n.. 이전 1 2 3 4 5 다음
