{"id":873,"date":"2022-09-24T08:05:03","date_gmt":"2022-09-24T08:05:03","guid":{"rendered":"https:\/\/sap-learn-more.com\/?p=873"},"modified":"2022-09-24T08:05:07","modified_gmt":"2022-09-24T08:05:07","slug":"sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4","status":"publish","type":"post","link":"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/","title":{"rendered":"SAPUI5 FlexBox \uae30\ubcf8 \uac1c\ub150 – \uc601\ud654 \uc815\ubcf4 api \uc11c\ube44\uc2a4"},"content":{"rendered":"\n

CSS\uc5d0\uc11c Flexbox\ub780, \ud589\uacfc \uc5f4 \ud615\ud0dc\ub85c \uc544\uc774\ud15c\ub4e4\uc744 \ubc30\uce58\ud558\ub294 1\ucc28\uc6d0 \ub808\uc774\uc544\uc6c3 \ubc29\ubc95\uc778\ub370, SAPUI5 \uc5d0\uc11c\ub294 SAPUI5 Flexbox \ud074\ub798\uc2a4\ub85c \ud574\ub2f9 \ud50c\ub809\uc2a4\ubc15\uc2a4 css\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc77c\ubc18 CSS Flexbox\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c SAPUI5 Flexbox \ucee8\ud14c\uc774\ub108\ub0b4\uc758 \uc544\uc774\ud15c\ub4e4\uc740 \ubd80\uc871\ud55c \uacf5\uac04\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc5ec\ubd84\uc758 \uacf5\uac04\uc73c\ub85c \ucc44\uc6b0\uac70\ub098 \ucd95\uc18c\ub418\uba70 \ubcc0\ud615\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc624\ub298\uc740 SAPUI5 Flexbox \ub808\uc774\uc544\uc6c3\uc5d0 \ub300\ud558\uc5ec \uc774\ud574\ud574 \ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n\n\n\n

CSS Flexbox\uc758 \uae30\ubcf8\uc801\uc778 \uc18d\uc131<\/h2>\n\n\n\n

\uae30\ubcf8\uc801\uc73c\ub85c \ubd80\ubaa8 \uac1d\uccb4\uc778 Container\uc5d0 Flex \uc18d\uc131\uc744 \ubd80\uc5ec\ud569\ub2c8\ub2e4. \ubd80\uc5ec\ud558\ub294 \uc989\uc2dc, \ubd80\ubaa8 Container\uc5d0 \uc18d\ud55c \ubaa8\ub4e0 Item \ub4e4\uc774 Flex \uc18d\uc131\uc744 \uac16\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

Container\ub294 \uc544\ub798\uc640 \uac19\uc774 \ub2e4\uc591\ud55c \uc18d\uc131\uc744 \uac16\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content<\/p><\/blockquote>\n\n\n\n

\uadf8\ub9ac\uace0 Flexbox \ub0b4\uc5d0 \ud3ec\ud568\ub418\ub294 Item\uc740 \ub2e4\uc74c\uc758 \uc18d\uc131 \ub4e4\uc744 \uac16\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

order
flex-grow
flex-shrink
flex
align-self<\/p><\/blockquote>\n\n\n\n

\uc704\uc758 Flexbox \uc18d\uc131 \uc911\uc5d0\uc11c SAPUI5 Flexbox\ub97c \uad6c\uc131\ud558\ub294\ub370 \uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 Flexbox\uc758 \uc18d\uc131\uc5d0 \ub300\ud574\uc11c \uba87\uac00\uc9c0 \uc815\ub9ac\ud574\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

justify-content, align-items \uc18d\uc131 >> SAPUI5 FlexBox alignItems, justifyContent \uc18d\uc131 \ub300\uc751<\/h2>\n\n\n\n

\ub610, Flexbox\ub294 main axis, cross axis \uc989, \uc8fc\ucd95\/\ubcf4\uc870\ucd95\uc744 \uae30\uc900\uc73c\ub85c \ub3d9\uc791\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc67c\ucabd\uc5d0\uc11c \uc624\ub978\ucabd\uc73c\ub85c \uc815\ub82c\ub428\uc774 \uae30\ubcf8\uac12 \uc989, \uc8fc \ucd95\uc774 \ub418\uace0, \uc774 \uacbd\uc6b0\uc5d0\ub294 \uc790\ub3d9\uc73c\ub85c \uc704\uc5d0\uc11c \uc544\ub798 \ubc29\ud5a5\uc740 \ubcf4\uc870\ucd95\uc774 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

\uae30\ubcf8\uc801\uc73c\ub85c Flexbox\ub294 main axis\ub97c \uae30\uc900\uc73c\ub85c \uc6c0\uc9c1\uc774\uba70, main axis \ub97c \uae30\uc900\uc73c\ub85c \ud558\uc5ec \ub3d9\uc791\ud558\uac8c \ud558\ub294 \uba85\ub839\uc5b4\uac00 justify-content \uc774\uba70, \ubcf4\uc870\ucd95\uc744 \uae30\uc900\uc73c\ub85c \ub3d9\uc791\ud558\uac8c \ud558\ub294 \uba85\ub839\uc5b4\uac00 align-items \uc785\ub2c8\ub2e4<\/p>\n\n\n\n

\uc774\uc640 \uac19\uc740 Flex\uc758 \uc18d\uc131\uc740 SAPUI5 Flexbox \uc18d\uc131\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc608\uc2dc \ud615\ud0dc\ub85c \uc0ac\uc6a9\uc774 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

\n
 <FlexBox alignItems=\"Baseline\" justifyContent=\"Center\">\n            <items>\n                <Text text=\"\ud648\" \/>\n                <Text text=\"New\" \/>\n            <\/items>\n        <\/FlexBox>\n<\/code><\/pre>\n<\/div>\n\n\n\n
flex-direction \uc18d\uc131 >> SAPUI5 FlexBox direction<\/h2>\n\n\n\n
\uac00\ub85c\ub85c \ub3d9\uc791\ud558\ub294 \uba54\uc778 \ucd95\uc744 \uc138\ub85c\ub85c \ubc14\uafb8\uae30 \uc704\ud574\uc11c\ub294 \uac00\uc7a5 \uc26c\uc6b4 \ubc29\ubc95\uc740 flex-direction \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
\uae30\ubcf8\uac12\uc740 row \ub85c \uc124\uc815\ub418\uc5c8\uae30 \ub54c\ubb38\uc5d0 \uc544\ubb34\uac83\ub3c4 \ud558\uc9c0 \uc54a\uc73c\uba74 \ud589\uc744 \uae30\uc900\uc73c\ub85c \ub3d9\uc791\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n
\n
\"flex-direction<\/figure><\/div>\n\n\n
\ub2e4\uc74c\uacfc \uac19\uc774 CSS\uac00 \uc7a1\ud600 \uc788\ub2e4\uba74,<\/p>\n\n\n\n
\n
.container {\n  height: 100vh;\n  display: flex;\n}\n<\/code><\/pre>\n<\/div>\n\n\n\n
\uc544\ub798\uc640 \uac19\uc774 \uae30\ubcf8\uac12\uc740 row\ub97c \uae30\uc900\uc73c\ub85c \uc124\uc815\uc774 \ub418\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n
\n
\"flex<\/figure><\/div>\n\n\n
\ud558\uc9c0\ub9cc css \uc18d\uc131\uc5d0 flex-direction column\uc744 \ucd94\uac00\ud574 \uc8fc\uba74 \uc138\ub85c\ub97c \uba54\uc778 \ucd95\uc73c\ub85c \ud558\ub3c4\ub85d \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\n
 \n.container {\n  height: 100vh;\n  display: flex;\n   flex-direction: column;\n \n}\n \n<\/code><\/pre>\n<\/div>\n\n\n
\n
\"flex<\/figure><\/div>\n\n\n
\uc774\uc640 \ub300\uc751\ud558\ub294 SAPUI5 Flexbox \uc18d\uc131\uc774 direction\uc785\ub2c8\ub2e4. Column, ColumnReverse, Row, RowReverse\ub97c \uc120\ud0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\n
<FlexBox direction=\"Column\">\n            <items>\n                <Text text=\"\ud648\" \/>\n                <Text text=\"New\" \/>\n            <\/items>\n        <\/FlexBox>\n<\/code><\/pre>\n<\/div>\n\n\n\n
SAPUI5 FlexBox \uc790\uc8fc\uc4f0\ub294 \uc18d\uc131 \uc815\ub9ac<\/h2>\n\n\n\n
\uadf8\ub7fc \uc704\uc758 \ub0b4\uc6a9\uc744 SAPUI5 \ucf54\ub4dc\ub97c \uc815\ub9ac\ud558\uc5ec Flexbox\uc758 \uc8fc\uc694 \uc18d\uc131\uc744 \uc54c\uc544\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\ub3d9\uc77c\ud55c CSS\ub97c \uc785\ud78c \ud6c4\uc5d0 \ub2e4\uc74c\uacfc SAPUI5 FlexBox\ub97c \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc\ub85c \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\n
  <FlexBox>\n    <Text class=\"item item1\" text=\"\ucca0\uc218\" \/>\n    <Text class=\"item item2\" text=\"\uc601\ud76c\" \/>\n    <Text class=\"item item3\" text=\"\ubcd1\ucc2c\" \/>\n    <Text class=\"item item4\" text=\"\ud64d\uc9c4\" \/>\n    <Text class=\"item item5\" text=\"\ud615\uc9c4\" \/>\n  <\/FlexBox>\n<\/code><\/pre>\n<\/div>\n\n\n
\n
\"sapui5<\/figure><\/div>\n\n\n
\uccab\ubc88\uc9f8 \uc18d\uc131\uc740 FlexBox\uc758 justifyContent \uc785\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc774 justifyContent\uc5d0 End\uac12\uc744 \uc801\uc6a9\ud558\uba74 CSS\uc758 flex box justify-content \uc18d\uc131\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c \ub3d9\uc791\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\n
  <FlexBox justifyContent=\"End\">\n    <Text class=\"item item1\" text=\"\ucca0\uc218\" \/>\n    <Text class=\"item item2\" text=\"\uc601\ud76c\" \/>\n    <Text class=\"item item3\" text=\"\ubcd1\ucc2c\" \/>\n    <Text class=\"item item4\" text=\"\ud64d\uc9c4\" \/>\u3147\n    <Text class=\"item item5\" text=\"\ud615\uc9c4\" \/>\n  <\/FlexBox>\n<\/code><\/pre>\n<\/div>\n\n\n
\n
\"sapui5<\/figure><\/div>\n\n\n
\uc774\ucc98\ub7fc justifyContent\uc5d0 SpaceAround \uc18d\uc131\uc744 \uc8fc\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n
\n
\"sapui5<\/figure><\/div>\n\n\n
justifyContent\ub294 \uc911\uc2ec\ucd95\uc5d0\uc11c \uc544\uc774\ud15c\ub4e4\uc744 \uc5b4\ub5bb\uac8c \ubc30\uce58\ud558\ub294 \uc9c0\ub97c \uacb0\uc815\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\ubc18\ub300\ucd95\uc5d0\uc11c \uc544\uc774\ud15c\uc758 \ubc30\uce58\ub97c \uacb0\uc815\ud558\ub294 \uac83\uc740 alignItems\ub97c \uc0ac\uc6a9\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\n
 <FlexBox justifyContent=\"SpaceBetween\" alignItems=\"Center\" height=\"100vh\">\n    <Text class=\"item item1\" text=\"\ucca0\uc218\" \/>\n    <Text class=\"item item2\" text=\"\uc601\ud76c\" \/>\n    <Text class=\"item item3\" text=\"\ubcd1\ucc2c\" \/>\n    <Text class=\"item item4\" text=\"\ud64d\uc9c4\" \/>\n    <Text class=\"item item5\" text=\"\ud615\uc9c4\" \/>\n  <\/FlexBox>\n \n<\/code><\/pre>\n<\/div>\n\n\n\n
\uc704\uc640 \uac19\uc774 \ud655\uc778\uc744 \uc704\ud574 \ub192\uc774\ub97c 100vh\ub97c \uc8fc\uace0 alignItems\ub97c Center\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4. \uadf8\ub7ec\uba74 \uc544\ub798\uc640 \uac19\uc774 \ubc30\uce58\uac00 \ub418\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n
\n
\"sapui5<\/figure><\/div>\n\n\n
direction \uc18d\uc131\uc744 \uc9c0\uc815\ud574\uc11c \uae30\ubcf8 axis\uac00 \uac00\ub85c\uc5d0\uc11c \uc138\ub85c column \ubc29\ud5a5\uc73c\ub85c \ubc14\uafb8\uc5b4\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. CSS\uc758 direction column\uacfc \ub3d9\uc77c\ud55c \ub3d9\uc791\uc744 \ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\ub530\ub77c\uc11c justifyContent\uc640 alingItems \ub3d9\uc791\uc2dc \uba54\uc778\ucd95\uacfc \ubc18\ub300\ucd95\uc774 \ubc14\ub00c\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n
\n
  <FlexBox direction=\"Column\">\n    <Text class=\"item item1\" text=\"\ucca0\uc218\" \/>\n    <Text class=\"item item2\" text=\"\uc601\ud76c\" \/>\n    <Text class=\"item item3\" text=\"\ubcd1\ucc2c\" \/>\n    <Text class=\"item item4\" text=\"\ud64d\uc9c4\" \/>\n    <Text class=\"item item5\" text=\"\ud615\uc9c4\" \/>\n  <\/FlexBox>\n<\/code><\/pre>\n<\/div>\n\n\n
\n
\"sapui5<\/figure><\/div>\n\n\n
\ub610, wrap \uc18d\uc131\uc744 \ud1b5\ud574 wrap \ubc0f noWrap \ub4f1\uc758 \uc18d\uc131\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\n
<FlexBox wrap=\"Wrap\">\n    <Text class=\"item item1\" text=\"\ucca0\uc218\" \/>\n    <Text class=\"item item2\" text=\"\uc601\ud76c\" \/>\n    <Text class=\"item item3\" text=\"\ubcd1\ucc2c\" \/>\n...\n\n<\/code><\/pre>\n<\/div>\n\n\n
\n
\"sapui5<\/figure><\/div>\n\n\n
\n
<FlexBox wrap=\"Wrap\">\n    <Text class=\"item item1\" text=\"\ucca0\uc218\" \/>\n    <Text class=\"item item2\" text=\"\uc601\ud76c\" \/>\n    <Text class=\"item item3\" text=\"\ubcd1\ucc2c\" \/>\n...\n\n<\/code><\/pre>\n<\/div>\n\n\n
\n
\"sapui5<\/figure><\/div>\n\n\n
\uc774\uc0c1\uc73c\ub85c SAPUI5 FlexBox\uc5d0 \ub300\ud574\uc11c \uc54c\uc544\ubcf4\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
CSS\uc758 \uc790\uc138\ud55c FlexBox\uc5d0 \ub300\ud574 \uc54c\uace0\uc790 \ud558\uba74 \uc544\ub798\uc758 \ub9c1\ud06c\ub97c \ucc38\uc870\ud574\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n\n\n\n
\ubaa8\uc9c8\ub77c CSS \uae30\ubcf8 \uac1c\ub150<\/a><\/p>\n\n\n\n
\ub514\uc790\uc778\uacfc \uad00\ub828\ud558\uc5ec SAPU5 Theme\ub294 \ub2e4\uc74c\uc744 \ucc38\uace0\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n\n\n\n
SAPUI5 Themes Dark \uc801\uc6a9 \u2013 SAPUI5 API \uc11c\ube44\uc2a4 \ub530\ub77c\ud558\uae30<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
CSS\uc5d0\uc11c Flexbox\ub780, \ud589\uacfc \uc5f4 \ud615\ud0dc\ub85c \uc544\uc774\ud15c\ub4e4\uc744 \ubc30\uce58\ud558\ub294 1\ucc28\uc6d0 \ub808\uc774\uc544\uc6c3 \ubc29\ubc95\uc778\ub370, SAPUI5 \uc5d0\uc11c\ub294 SAPUI5 Flexbox \ud074\ub798\uc2a4\ub85c \ud574\ub2f9 \ud50c\ub809\uc2a4\ubc15\uc2a4 css\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc77c\ubc18 CSS Flexbox\uc640 \ub9c8\ucc2c\uac00\uc9c0\ub85c SAPUI5 Flexbox \ucee8\ud14c\uc774\ub108\ub0b4\uc758 \uc544\uc774\ud15c\ub4e4\uc740 \ubd80\uc871\ud55c \uacf5\uac04\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc5ec\ubd84\uc758 \uacf5\uac04\uc73c\ub85c \ucc44\uc6b0\uac70\ub098 \ucd95\uc18c\ub418\uba70 \ubcc0\ud615\ub429\ub2c8\ub2e4. \uc624\ub298\uc740 SAPUI5 Flexbox \ub808\uc774\uc544\uc6c3\uc5d0 \ub300\ud558\uc5ec \uc774\ud574\ud574 \ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. CSS Flexbox\uc758 \uae30\ubcf8\uc801\uc778 \uc18d\uc131 \uae30\ubcf8\uc801\uc73c\ub85c \ubd80\ubaa8 \uac1d\uccb4\uc778 Container\uc5d0 Flex \uc18d\uc131\uc744 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":881,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[101,39,111],"yoast_head":"\nSAPUI5 FlexBox \uae30\ubcf8 \uac1c\ub150 - \uc601\ud654 \uc815\ubcf4 api \uc11c\ube44\uc2a4 - SAP Space<\/title>\n<meta name=\"description\" content=\"SAPUI5 \uc5d0\ub294 SAPUI5 Flexbox \ud074\ub798\uc2a4\ub85c \ud574\ub2f9 \ud50c\ub809\uc2a4\ubc15\uc2a4 css\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. CSS FlexBox \uc18d\uc131 \uadf8\ub300\ub85c SAPUI5 FlexBox \ucee8\ud14c\uc774\ub108\ub0b4 \uc544\uc774\ud15c\ub4e4\uc740 \ubd80\uc871\ud55c \uacf5\uac04\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc5ec\ubd84\uc758 \uacf5\uac04\uc73c\ub85c \ucc44\uc6b0\uac70\ub098 \ucd95\uc18c\ub418\uba70 \ubcc0\ud615\ub429\ub2c8\ub2e4.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sap-learn-more.com\/sapui5-flexbox-\uae30\ubcf8-\uac1c\ub150-\uc601\ud654-\uc815\ubcf4-api-\uc11c\ube44\uc2a4\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SAPUI5 FlexBox \uae30\ubcf8 \uac1c\ub150 - \uc601\ud654 \uc815\ubcf4 api \uc11c\ube44\uc2a4 - SAP Space\" \/>\n<meta property=\"og:description\" content=\"SAPUI5 \uc5d0\ub294 SAPUI5 Flexbox \ud074\ub798\uc2a4\ub85c \ud574\ub2f9 \ud50c\ub809\uc2a4\ubc15\uc2a4 css\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. CSS FlexBox \uc18d\uc131 \uadf8\ub300\ub85c SAPUI5 FlexBox \ucee8\ud14c\uc774\ub108\ub0b4 \uc544\uc774\ud15c\ub4e4\uc740 \ubd80\uc871\ud55c \uacf5\uac04\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc5ec\ubd84\uc758 \uacf5\uac04\uc73c\ub85c \ucc44\uc6b0\uac70\ub098 \ucd95\uc18c\ub418\uba70 \ubcc0\ud615\ub429\ub2c8\ub2e4.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sap-learn-more.com\/sapui5-flexbox-\uae30\ubcf8-\uac1c\ub150-\uc601\ud654-\uc815\ubcf4-api-\uc11c\ube44\uc2a4\/\" \/>\n<meta property=\"og:site_name\" content=\"SAP Space\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-24T08:05:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-24T08:05:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sap-learn-more.com\/wp-content\/uploads\/2022\/09\/sapui5-flexbox-justifyContent-SpaceAround-\uc18d\uc131.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"276\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"user\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"user\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/\",\"url\":\"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/\",\"name\":\"SAPUI5 FlexBox \uae30\ubcf8 \uac1c\ub150 - \uc601\ud654 \uc815\ubcf4 api \uc11c\ube44\uc2a4 - SAP Space\",\"isPartOf\":{\"@id\":\"https:\/\/sap-learn-more.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sap-learn-more.com\/wp-content\/uploads\/2022\/09\/sapui5-flexbox-justifyContent-SpaceAround-\uc18d\uc131.png\",\"datePublished\":\"2022-09-24T08:05:03+00:00\",\"dateModified\":\"2022-09-24T08:05:07+00:00\",\"author\":{\"@id\":\"https:\/\/sap-learn-more.com\/#\/schema\/person\/6a9cf36f82ea5867c3f46f766f7d2bfa\"},\"description\":\"SAPUI5 \uc5d0\ub294 SAPUI5 Flexbox \ud074\ub798\uc2a4\ub85c \ud574\ub2f9 \ud50c\ub809\uc2a4\ubc15\uc2a4 css\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. CSS FlexBox \uc18d\uc131 \uadf8\ub300\ub85c SAPUI5 FlexBox \ucee8\ud14c\uc774\ub108\ub0b4 \uc544\uc774\ud15c\ub4e4\uc740 \ubd80\uc871\ud55c \uacf5\uac04\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc5ec\ubd84\uc758 \uacf5\uac04\uc73c\ub85c \ucc44\uc6b0\uac70\ub098 \ucd95\uc18c\ub418\uba70 \ubcc0\ud615\ub429\ub2c8\ub2e4.\",\"breadcrumb\":{\"@id\":\"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#primaryimage\",\"url\":\"https:\/\/sap-learn-more.com\/wp-content\/uploads\/2022\/09\/sapui5-flexbox-justifyContent-SpaceAround-\uc18d\uc131.png\",\"contentUrl\":\"https:\/\/sap-learn-more.com\/wp-content\/uploads\/2022\/09\/sapui5-flexbox-justifyContent-SpaceAround-\uc18d\uc131.png\",\"width\":720,\"height\":276},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sap-learn-more.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SAPUI5 FlexBox \uae30\ubcf8 \uac1c\ub150 – \uc601\ud654 \uc815\ubcf4 api \uc11c\ube44\uc2a4\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sap-learn-more.com\/#website\",\"url\":\"https:\/\/sap-learn-more.com\/\",\"name\":\"SAP Space\",\"description\":\"SAP Knowledge, Tech, News, SAPUI5, ABAP\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sap-learn-more.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/sap-learn-more.com\/#\/schema\/person\/6a9cf36f82ea5867c3f46f766f7d2bfa\",\"name\":\"user\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/sap-learn-more.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b58996c504c5638798eb6b511e6f49af?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b58996c504c5638798eb6b511e6f49af?s=96&d=mm&r=g\",\"caption\":\"user\"},\"sameAs\":[\"http:\/\/127.0.0.1\"],\"url\":\"https:\/\/sap-learn-more.com\/author\/user\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SAPUI5 FlexBox \uae30\ubcf8 \uac1c\ub150 - \uc601\ud654 \uc815\ubcf4 api \uc11c\ube44\uc2a4 - SAP Space","description":"SAPUI5 \uc5d0\ub294 SAPUI5 Flexbox \ud074\ub798\uc2a4\ub85c \ud574\ub2f9 \ud50c\ub809\uc2a4\ubc15\uc2a4 css\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. CSS FlexBox \uc18d\uc131 \uadf8\ub300\ub85c SAPUI5 FlexBox \ucee8\ud14c\uc774\ub108\ub0b4 \uc544\uc774\ud15c\ub4e4\uc740 \ubd80\uc871\ud55c \uacf5\uac04\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc5ec\ubd84\uc758 \uacf5\uac04\uc73c\ub85c \ucc44\uc6b0\uac70\ub098 \ucd95\uc18c\ub418\uba70 \ubcc0\ud615\ub429\ub2c8\ub2e4.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sap-learn-more.com\/sapui5-flexbox-\uae30\ubcf8-\uac1c\ub150-\uc601\ud654-\uc815\ubcf4-api-\uc11c\ube44\uc2a4\/","og_locale":"ko_KR","og_type":"article","og_title":"SAPUI5 FlexBox \uae30\ubcf8 \uac1c\ub150 - \uc601\ud654 \uc815\ubcf4 api \uc11c\ube44\uc2a4 - SAP Space","og_description":"SAPUI5 \uc5d0\ub294 SAPUI5 Flexbox \ud074\ub798\uc2a4\ub85c \ud574\ub2f9 \ud50c\ub809\uc2a4\ubc15\uc2a4 css\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. CSS FlexBox \uc18d\uc131 \uadf8\ub300\ub85c SAPUI5 FlexBox \ucee8\ud14c\uc774\ub108\ub0b4 \uc544\uc774\ud15c\ub4e4\uc740 \ubd80\uc871\ud55c \uacf5\uac04\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc5ec\ubd84\uc758 \uacf5\uac04\uc73c\ub85c \ucc44\uc6b0\uac70\ub098 \ucd95\uc18c\ub418\uba70 \ubcc0\ud615\ub429\ub2c8\ub2e4.","og_url":"https:\/\/sap-learn-more.com\/sapui5-flexbox-\uae30\ubcf8-\uac1c\ub150-\uc601\ud654-\uc815\ubcf4-api-\uc11c\ube44\uc2a4\/","og_site_name":"SAP Space","article_published_time":"2022-09-24T08:05:03+00:00","article_modified_time":"2022-09-24T08:05:07+00:00","og_image":[{"width":720,"height":276,"url":"https:\/\/sap-learn-more.com\/wp-content\/uploads\/2022\/09\/sapui5-flexbox-justifyContent-SpaceAround-\uc18d\uc131.png","type":"image\/png"}],"author":"user","twitter_card":"summary_large_image","twitter_misc":{"Written by":"user","Est. reading time":"6\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/","url":"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/","name":"SAPUI5 FlexBox \uae30\ubcf8 \uac1c\ub150 - \uc601\ud654 \uc815\ubcf4 api \uc11c\ube44\uc2a4 - SAP Space","isPartOf":{"@id":"https:\/\/sap-learn-more.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#primaryimage"},"image":{"@id":"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#primaryimage"},"thumbnailUrl":"https:\/\/sap-learn-more.com\/wp-content\/uploads\/2022\/09\/sapui5-flexbox-justifyContent-SpaceAround-\uc18d\uc131.png","datePublished":"2022-09-24T08:05:03+00:00","dateModified":"2022-09-24T08:05:07+00:00","author":{"@id":"https:\/\/sap-learn-more.com\/#\/schema\/person\/6a9cf36f82ea5867c3f46f766f7d2bfa"},"description":"SAPUI5 \uc5d0\ub294 SAPUI5 Flexbox \ud074\ub798\uc2a4\ub85c \ud574\ub2f9 \ud50c\ub809\uc2a4\ubc15\uc2a4 css\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. CSS FlexBox \uc18d\uc131 \uadf8\ub300\ub85c SAPUI5 FlexBox \ucee8\ud14c\uc774\ub108\ub0b4 \uc544\uc774\ud15c\ub4e4\uc740 \ubd80\uc871\ud55c \uacf5\uac04\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc5ec\ubd84\uc758 \uacf5\uac04\uc73c\ub85c \ucc44\uc6b0\uac70\ub098 \ucd95\uc18c\ub418\uba70 \ubcc0\ud615\ub429\ub2c8\ub2e4.","breadcrumb":{"@id":"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/"]}]},{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#primaryimage","url":"https:\/\/sap-learn-more.com\/wp-content\/uploads\/2022\/09\/sapui5-flexbox-justifyContent-SpaceAround-\uc18d\uc131.png","contentUrl":"https:\/\/sap-learn-more.com\/wp-content\/uploads\/2022\/09\/sapui5-flexbox-justifyContent-SpaceAround-\uc18d\uc131.png","width":720,"height":276},{"@type":"BreadcrumbList","@id":"https:\/\/sap-learn-more.com\/sapui5-flexbox-%ea%b8%b0%eb%b3%b8-%ea%b0%9c%eb%85%90-%ec%98%81%ed%99%94-%ec%a0%95%eb%b3%b4-api-%ec%84%9c%eb%b9%84%ec%8a%a4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sap-learn-more.com\/"},{"@type":"ListItem","position":2,"name":"SAPUI5 FlexBox \uae30\ubcf8 \uac1c\ub150 – \uc601\ud654 \uc815\ubcf4 api \uc11c\ube44\uc2a4"}]},{"@type":"WebSite","@id":"https:\/\/sap-learn-more.com\/#website","url":"https:\/\/sap-learn-more.com\/","name":"SAP Space","description":"SAP Knowledge, Tech, News, SAPUI5, ABAP","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sap-learn-more.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"ko-KR"},{"@type":"Person","@id":"https:\/\/sap-learn-more.com\/#\/schema\/person\/6a9cf36f82ea5867c3f46f766f7d2bfa","name":"user","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/sap-learn-more.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b58996c504c5638798eb6b511e6f49af?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b58996c504c5638798eb6b511e6f49af?s=96&d=mm&r=g","caption":"user"},"sameAs":["http:\/\/127.0.0.1"],"url":"https:\/\/sap-learn-more.com\/author\/user\/"}]}},"_links":{"self":[{"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/posts\/873"}],"collection":[{"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/comments?post=873"}],"version-history":[{"count":4,"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/posts\/873\/revisions"}],"predecessor-version":[{"id":887,"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/posts\/873\/revisions\/887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/media\/881"}],"wp:attachment":[{"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/media?parent=873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/categories?post=873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sap-learn-more.com\/wp-json\/wp\/v2\/tags?post=873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}