๐ŸŒˆResponsive CSS & Flexbox

hojuneยท2023๋…„ 8์›” 13์ผ
0

Web Development

๋ชฉ๋ก ๋ณด๊ธฐ
9/32

Flexbox

css

display : flex;

the flex model


main axis - ๋ณธ ์ถ• ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ •๋ ฌ

cross axis - ๊ต์ฐจ ์ถ• ์œ„์—์„œ ์•„๋ž˜๋กœ ์ •๋ ฌ

Flex-Direction

์ปจํ…Œ์ด๋„ˆ ์•ˆ์—์„œ ๋ณธ์ถ• ๋ฐฉํ–ฅ์„ ๊ฒฐ์ •

flex-direction : row-reverse = ๋ณธ์ถ•์˜ ๋ฐฉํ–ฅ์ด ๋ฐ˜๋Œ€๋กœ ๋ฐ”๋€œ

flex-direction : column = ๋ณธ์ถ•์˜ ๋ฐฉํ–ฅ์ด ์ƒํ•˜๋กœ ๋ฐ”๋€œ

Justify Content

์ฃผ์ถ•์„ ๊ธฐ์ค€์œผ๋กœ ์ •๋ ฌ

justify-content : space-between, center, flex-end, space-around, etc.

Flex-Wrap

์ฃผ์ถ•์ด ์ˆ˜ํ‰์ผ๋•Œ๋Š” ์ƒˆ๋กœ์šด ํ–‰์„ ๋งŒ๋“ค์–ด ์š”์†Œ๋ฅผ ์ •๋ ฌํ•˜๋ฉฐ

์ฃผ์ถ•์ด ์ˆ˜์ง์ผ๋•Œ๋Š” ์ƒˆ๋กœ๋ฃฌ ์—ด์„ ๋งŒ๋“ค์–ด ์š”์†Œ๋ฅผ ์ •๋ ฌํ•˜๋Š” ์†์„ฑ

๊ฐ„๋‹จํžˆ ๋งํ•ด์„œ ์„ ์„ ํ•œ์ค„๋กœ ๋‘˜๊ฒƒ์ธ์ง€ ์—ฌ๋Ÿฌ ์ค„์„ ์Œ“์„ ๊ฒƒ์ธ์ง€ ํ•˜๋Š” ๊ฒƒ

wrap, reverse, now warp = ๊ต์ฐจ ์ถ•(cross axis)์˜ ๋ณ€ํ™”

Align

Align-Items = ๊ต์ฐจ์ถ•์„ ๊ธฐ์ค€์œผ๋กœ items๊ฐ€ ์ •๋ ฌ๋œ๋‹ค

flex-start ,center,flex-end,etc.


Align-Content = ๊ต์ฐจ์ถ•์„ ๊ธฐ์ค€์œผ๋กœ  (๋‘ ์ค„ ์ด์ƒ ์ผ๋•Œ) ๋ผ์ธ ์ž์ฒด๊ฐ€ ์ •๋ ฌ๋œ๋‹ค



Align-self = ๊ฐœ๋ณ„์ ์ธ ์š”์†Œ์— ์ ์šฉํ•  ๋•Œ ์‚ฌ์šฉ

ex) div:nth-of-type(2) { align-self:center;}

Flex

Flex-Basis = ์š”์†Œ์˜ ์ตœ์ดˆ ํฌ๊ธฐ ์ง€์ •

Flex-Grow = ์ด์šฉ๊ฐ€๋Šฅํ•œ ๊ณต๊ฐ„ ๋ถ„๋ฐฐ๋ฅผ ์ง€์ •

Flex-Shrink = ๋‹ค๋ฅธ ์š”์†Œ์— ๋น„ํ•ด ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์˜ ๋น„์œจ์„ ์ค„์ด๋Š” ์„ค์ •



Flex ์†๊ธฐ

flex:  2     2    10%
     grow shrink basis

flex : 2
     grow
     
flex :10em
      30%
     basis

Responsive Design
์‚ฌ์šฉ์ž์˜ ์—ฌ๋Ÿฌ ํ™˜๊ฒฝ์— ๋งž๊ฒŒ ์ œ์ž‘

Media Queries

css์—์„œ ์–ด๋–ค ์Šคํƒ€์ผ์„ ์„ ํƒ์ ์œผ๋กœ ์ ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

@media (max-width:800px) (min-width:600px) 
{
    h1 {
        color: purple;
       }
}

0๊ฐœ์˜ ๋Œ“๊ธ€