ReasonJun

CSS : min-content, object-fit, letter-spacing, inset, grid, grid-template-columns, box-shadow 본문

Frontend/CSS

CSS : min-content, object-fit, letter-spacing, inset, grid, grid-template-columns, box-shadow

ReasonJun 2023. 6. 13. 23:18
728x90

min-content : 

min-content specifies the minimum size a container should be, based on its content. This can be useful for creating flexible layouts.

https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

 

min-content - CSS: Cascading Style Sheets | MDN

The min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.

developer.mozilla.org

 

object-fit : 

object-fit is a property that specifies how an image or video should fit within its container. This can be helpful for controlling the visual display of media elements.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

 

object-fit - CSS: Cascading Style Sheets | MDN

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

developer.mozilla.org

 

letter-spacing : 

letter-spacing is a property that adjusts the spacing between letters in text. This can be used to fine-tune typography.

https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

 

letter-spacing - CSS: Cascading Style Sheets | MDN

The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apar

developer.mozilla.org

 

inset : 

inset is a shorthand property that can be used to set the position of an element within its container. It allows you to set values for top, right, bottom, and left all at once.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/inset

 

inset - CSS: Cascading Style Sheets | MDN

The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.

developer.mozilla.org

 

grid

grid is a powerful tool for creating complex layouts. It allows you to define rows and columns, as well as grid gaps and alignments.

 

grid-template-columns

grid-template-columns is a property that allows you to define the number and size of columns in a grid layout. This can be used to create responsive designs that adapt to different screen sizes.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout

 

CSS Grid Layout - CSS: Cascading Style Sheets | MDN

The CSS grid layout module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

developer.mozilla.org

 

 

box-shadow

box-shadow is a property that applies a shadow effect to an element. This can be used to create depth and dimensionality in your design.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

 

728x90
저작자표시

'Frontend > CSS' 카테고리의 다른 글

CSS : cubic-bezier, background-clip, scrollLeft, innerWidth  (0) 2023.06.14
Webkit in css  (0) 2023.06.14
CSS : media  (0) 2023.06.06
CSS : Animation  (0) 2023.06.06
CSS : transition  (0) 2023.06.06
'Frontend/CSS' Related Articles more
Comments