Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- ES6
- DART
- Session
- nodejs
- ECMAScript
- Mongoose
- CSS
- NextJs
- heroku
- pug
- clonecoding
- 자바스크립트
- react
- API
- TypeScript
- javscript
- MongoDB
- Component
- backend
- frontend
- 리액트
- node.js
- graphQL
- CLONE
- Flutter
- HTML
- GRID
- form
- JavaScript
- express
Archives
- Today
- Total
목록max-content (1)
Enjoy Programming

min-content와 max-content를 알아보자 예를들어 텍스트가 적힌 태그가 있다고 하자 이상태에서 첫번째 칼럼은 min-content를 두번째 칼럼은 max-content를 주면 이렇게 ! 바뀐다. 태그안에 컨텐츠가 어떻게 보여야 하는지 나타내 줄때 매우 용이하다 두번째 처럼 안에 제목같은 텍스트가 반응형에서 움직이지 않아야 할때 그리고 문장이 최소 단위로만 표기되기만 하면 될때 이 두가지를 잘 섞어 사용하면 된다. 그리고 이것을 minmax & repeat과 함께 사용할 수 잇는데 예를 들어 보자 서로 다른 길이의 문장들이 있다. grid-template-columns: repeat(6, minmax(max-content, 1fr)); css에 이렇게 스타일을 줘보겠다 6개의 칼럼이 반복되고..
CSS
2021. 4. 23. 21:23