{"id":45583,"date":"2021-11-11T20:46:36","date_gmt":"2021-11-11T11:46:36","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45583"},"modified":"2021-11-12T16:31:21","modified_gmt":"2021-11-12T07:31:21","slug":"layouts-in-jetpack-compose-%eb%b3%b5%ec%9e%a1%ed%95%9c-%ec%bb%a4%ec%8a%a4%ed%85%80-%eb%a0%88%ec%9d%b4%ec%95%84%ec%9b%83-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45583","title":{"rendered":"Layouts in Jetpack Compose – \ubcf5\uc7a1\ud55c \ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3 \ub9cc\ub4e4\uae30"},"content":{"rendered":"\n

Layout\uc758 \uae30\ucd08\ub97c \ub2e4\ub904 \ubcf4\uc558\ub2e4\uba74, API\uc758 \uc720\uc5f0\uc131\uc744 \ubcf4\uc5ec\uc904\ub9cc\ud55c \ub354 \ubcf5\uc7a1\ud55c \uc608\uc81c\ub97c \ub9cc\ub4e4\uc790. \ub2e4\uc74c \ub098\uc624\ub294 \uc0ac\uc9c4\uc758 \uc911\uc559\uc5d0 \uc788\ub294 Material Study Owl<\/a>\uc758 \ucee4\uc2a4\ud140 staggered grid\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uc790.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Owl\uc758 staggered grid\ub294 \uc544\uc774\ud15c\uc744 \uc218\uc9c1\uc801\uc73c\ub85c \uc804\uac1c\ud558\uace0, \ud558\ub098\uc758 \uc5f4\uc5d0 \uc8fc\uc5b4\uc9c4 n\uac1c\uc758 \ud589\uc744 \ucc44\uc6cc \ub123\ub294\ub2e4. Row\uc5d0 Column\ub4e4\uc744 \ucc44\uc6b0\ub294 \ubc29\uc2dd\uc73c\ub85c\ub294 staggered grid \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud560 \uc218 \uc5c6\ub2e4. \ub9cc\uc57d \uc900\ube44\ub41c \ub370\uc774\ud130\ub97c \uc218\uc9c1\uc801\uc73c\ub85c \ud45c\ud604\ud574\uc57c \ud55c\ub2e4\uace0 \uac00\uc815\ud558\uba74, Column\uc5d0 Row\ub4e4\uc744 \ucc44\uc6b0\ub294 \uc2dd\uc73c\ub85c \ub9cc\ub4e4 \uc218\ub294 \uc788\ub2e4.<\/p>\n\n\n\n

\ud558\uc9c0\ub9cc, \ucee4\uc2a4\ud140 \ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4e4\uba74 staggered grid \ub0b4\uc758 \ubaa8\ub4e0 \ud56d\ubaa9\ub4e4\uc758 \ub192\uc774\ub97c \uc81c\ud55c\ud560 \uc218 \uc788\ub3c4\ub85d \ud560 \uc218 \uc788\ub2e4. \uadf8\ub798\uc11c \ub354 \ub808\uc774\uc544\uc6c3\uc5d0 \ub300\ud574 \uc880 \ub354 \uc81c\uc5b4\ub97c \uc798 \ud558\uace0, \ucee4\uc2a4\ud140\uc744 \ud558\ub294 \ubc95\uc5d0 \ub300\ud574\uc11c \ubc30\uc6b8 \uc218 \uc788\ub2e4. \uc6b0\ub9ac\ub294 StaggeredGrid\ub97c \ub9cc\ub4e4\uace0 \ud558\uc704 \uc694\uc18c\ub97c \uce21\uc815\ud558\uace0 \ubc30\uce58\ud574\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n

\ub9cc\uc57d \ud654\uba74\ubc29\ud5a5\uc5d0 \ub530\ub77c grid\ub97c \uc7ac\uc0ac\uc6a9\ud558\uace0 \uc2f6\uac8c \ub9cc\ub4e4\uace0 \uc2f6\ub2e4\uba74, \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc8fc\uace0 \uc2f6\uc740 \ud589\uc758 \uac2f\uc218\ub97c \ub9e4\uac1c\ubcc0\uc218\ub85c \ubc1b\uc744 \uc218 \uc788\ub2e4. \ud574\ub2f9 \uc815\ubcf4\ub294 \ub808\uc774\uc544\uc6c3\uc774 \ud638\ucd9c\ub420 \ub54c \uc640\uc57c \ud558\ubbc0\ub85c \ub9e4\uac1c\ubcc0\uc218\ub85c \ub2e4\uc74c\uacfc \uac19\uc774 \uc804\ub2ec\ud55c\ub2e4.<\/p>\n\n\n\n

@Composable\nfun StaggeredGrid(\n\u00a0 \u00a0 modifier: Modifier = Modifier,\n\u00a0 \u00a0 rows: Int = 3,\n<\/strong>\u00a0 \u00a0 content: @Composable () -> Unit\n) {\n\u00a0 \u00a0 Layout(\n\u00a0 \u00a0 \u00a0 \u00a0 modifier = modifier,\n\u00a0 \u00a0 \u00a0 \u00a0 content = content\n\u00a0 \u00a0 ) { measurables, constraints ->\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uc5ec\uae30\uc11c \uc8fc\uc5b4\uc9c4 \uc81c\uc57d\uc870\uac74\uc744 \uc0ac\uc6a9\ud558\uc5ec \uce21\uc815\ud558\uace0 \ubc30\uce58\ud55c\ub2e4.\u00a0 \u00a0 \n    }\n}<\/code><\/pre>\n\n\n\n
\uc774\uc804\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c \uba3c\uc800 \ud574\uc57c\ud560 \uc77c\uc740 \ud558\uc704\uc694\uc18c\ub4e4\uc744 \uce21\uc815\ud558\ub294 \uac83\uc774\ub2e4. \uba85\uc2ec\ud558\uc790, \ud558\uc704\uc694\uc18c\ub4e4\uc740 \ud55c\ubc88\ub9cc \uce21\uc815\ud560 \uc218 \uc788\ub2e4.<\/strong><\/p>\n\n\n\n
\uc9c0\uae08 \ub9cc\ub4dc\ub824\uace0 \ud558\ub294 \uc720\uc988\ucf00\uc774\uc2a4\uc758 \uacbd\uc6b0, \ud558\uc704 view\ub4e4\uc744 \uc81c\ud55c\ud558\uc9c0\ub294 \uc54a\uc744 \uac83\uc774\ub2e4. \ud558\uc704 \uc694\uc18c\ub4e4\uc744 \uce21\uc815\ud560 \ub54c, \uac01 \ud589\uc758 \ub108\ube44\uc640 \ucd5c\ub300 \ub192\uc774\ub3c4 \ucd94\uc801\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
Layout(\n\u00a0 \u00a0 modifier = modifier,\n\u00a0 \u00a0 content = content\n) { measurables, constraints ->\n\n\u00a0 \u00a0 \/\/ \uac01 \ud589\uc5d0 \ub300\ud55c \ub108\ube44\ub97c \ucd94\uc801\ud55c\ub2e4.\n\u00a0 \u00a0 val rowWidths = IntArray(rows) { 0 }\n\n\u00a0 \u00a0 \/\/ \uac01 \ud589\uc5d0 \ub300\ud55c \ucd5c\ub300 \ub192\uc774\ub97c \ucd94\uc801\ud55c\ub2e4.\n\u00a0 \u00a0 val rowHeights = IntArray(rows) { 0 }\n\n\u00a0 \u00a0 \/\/ \ud558\uc704 view\ub4e4\uc744 \uc81c\ud55c\ud558\uc9c0 \uc54a\uace0, \uc8fc\uc5b4\uc9c4 \uc81c\uc57d\uc870\uac74\ub4e4\uacfc \ud568\uaed8 \uce21\uc815\ud55c\ub2e4.\n\u00a0 \u00a0 \/\/ List of measured children\n\u00a0 \u00a0 val placeables = measurables.mapIndexed { index, measurable ->\n\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uac01 \ud558\uc704 \uc694\uc18c\ub97c \uce21\uc815 \ud55c\ub2e4.\n\u00a0 \u00a0 \u00a0 \u00a0 val placeable = measurable.measure(constraints)\n\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Track the width and max height of each row\n\u00a0 \u00a0 \u00a0 \u00a0 val row = index % rows\n\u00a0 \u00a0 \u00a0 \u00a0 rowWidths[row] += placeable.width\n\u00a0 \u00a0 \u00a0 \u00a0 rowHeights[row] = Math.max(rowHeights[row], placeable.height)\n\n\u00a0 \u00a0 \u00a0 \u00a0 placeable\n\u00a0 \u00a0 }\n\u00a0 \u00a0 ...\n}<\/code><\/pre>\n\n\n\n
\ucf54\ub4dc\ub97c \ubcf4\uba74  \uce21\uc815\ub41c \ud558\uc704\uc694\uc18c \ubaa9\ub85d\ub4e4\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4. \ud654\uba74\uc0c1\uc5d0 \ubc30\uce58\ub418\uae30 \uc804\uc5d0 grid\uc758 \uc804\uccb4 \uc0ac\uc774\uc988\ub97c \uacc4\uc0b0\ud574\uc57c \ud55c\ub2e4. \ub610\ud55c, \uac01 \ud589\uc758 \ucd5c\ub300 \ub192\uc774\ub97c \uc774\ubbf8 \uc54c\uae30 \ub54c\ubb38\uc5d0, \uac01 \ud589\uc758 Y \ud3ec\uc9c0\uc158\uc5d0\uc11c \uac01 \ud589\uc758 \uc694\uc18c\ub97c \ubc30\uce58\ud560 \uc704\uce58\ub97c \uacc4\uc0b0\ud560 \uc218 \uc788\ub2e4. Y \ud3ec\uc9c0\uc158\ub4e4\uc744 rowY \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud55c\ub2e4.<\/p>\n\n\n\n
Layout(\n\u00a0 \u00a0 content = content,\n\u00a0 \u00a0 modifier = modifier\n) { measurables, constraints ->\n\u00a0 \u00a0 ... \n\n\u00a0 \u00a0 \/\/ Grid\uc758 \ub108\ube44\ub294 \uac00\uc7a5 \ub113\uc740 \ud589\uc774\ub2e4.\n\u00a0 \u00a0 val width = rowWidths.maxOrNull()\n\u00a0 \u00a0 \u00a0 \u00a0 ?.coerceIn(constraints.minWidth.rangeTo(constraints.maxWidth)) ?: constraints.minWidth\n\n\u00a0 \u00a0 \/\/ Grid\uc758 \ub192\uc774\ub294 \ub192\uc774 \uc81c\uc57d\uc870\uac74\uc73c\ub85c \uc778\ud574 \uac15\uc81c\ub85c \ubcc0\ud55c\ub41c \uac01 \ud589\uc758 \uac00\uc7a5 \ub192\uc740 \uc694\uc18c\uc758 \ud569\uc774\ub2e4.\n\u00a0 \u00a0 val height = rowHeights.sumOf { it }\n\u00a0 \u00a0 \u00a0 \u00a0 .coerceIn(constraints.minHeight.rangeTo(constraints.maxHeight))\n\n\u00a0 \u00a0 \/\/ \uc774\uc804 \ud589\ub4e4\uc758 \ub204\uc801\ub41c \ub192\uc774\ub97c \uae30\ubc18\ud55c, \uac01 \ud589\uc758 Y\n\u00a0 \u00a0 val rowY = IntArray(rows) { 0 }\n\u00a0 \u00a0 for (i in 1 until rows) {\n\u00a0 \u00a0 \u00a0 \u00a0 rowY[i] = rowY[i-1] + rowHeights[i-1]\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 ...\n}<\/code><\/pre>\n\n\n\n
\ub9c8\uce68\ub0b4 placeable.placeRelative(x, y)\ub97c \ud638\ucd9c\ud558\uc5ec \uc790\uc2dd\uc694\uc18c\ub4e4\uc744 \ud654\uba74\uc0c1\uc5d0 \ubc30\uce58\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\ub2e4. \uc774\ub7ec\ud55c \uc720\uc988\ucf00\uc774\uc2a4\uc758 \uacbd\uc6b0, rowX \ubcc0\uc218\ub85c \uac01 \ud589\uc5d0 \ub300\ud55c X \uc88c\ud45c \ub610\ud55c \ucd94\uc801\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
Layout(\n\u00a0 \u00a0 content = content,\n\u00a0 \u00a0 modifier = modifier\n) { measurables, constraints ->\n\u00a0 \u00a0 ... \n\n\u00a0 \u00a0 \/\/ \uc0c1\uc704 \ub808\uc774\uc544\uc6c3\uc758 \uc0ac\uc774\uc988\ub97c \uc124\uc815\ud558\uc790.\n\u00a0 \u00a0 layout(width, height) {\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ \uac01 \ud589\ub9c8\ub2e4, \ubc30\uce58\ud574\uc57c\ud560 x\uc88c\ud45c\n\u00a0 \u00a0 \u00a0 \u00a0 val rowX = IntArray(rows) { 0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 placeables.forEachIndexed { index, placeable ->\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 val row = index % rows\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 placeable.placeRelative(\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 x = rowX[row],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 y = rowY[row]\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 )\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 rowX[row] += placeable.width\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n}<\/code><\/pre>\n\n\n\n
\ucee4\uc2a4\ud140 StaggeredGrid \uc0ac\uc6a9\ud558\uae30<\/h2>\n\n\n\n
\uc790 \uc774\uc81c, \ud558\uc704\uc694\uc18c\ub97c \uce21\uc815\ud558\uace0 \ubc30\uce58\ud560 \uc904 \uc544\ub294 \ucee4\uc2a4\ud140 grid \ub808\uc774\uc544\uc6c3\uc744 \uac16\uac8c \ub418\uc5c8\ub2e4. \uc571\uc5d0\uc11c \uc774\uac78 \ud55c\ubc88 \uc0ac\uc6a9\ud574\ubcf4\uc790. grid\uc5d0\uc11c Owl\uc758 Chip\ub4e4\uc744 \uc2dc\ubbac\ub808\uc774\uc158 \ud574\ubcf4\uae30 \uc704\ud574, \uc720\uc0ac\ud55c \uc791\uc5c5\uc744 \uc218\ud589\ud558\ub294 \ucef4\ud3ec\uc800\ube14\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
@Composable
fun Chip(modifier: Modifier = Modifier, text: String) {
    Card(
        modifier = modifier,
        border = BorderStroke(color = Color.Black, width = Dp.Hairline),
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(
            modifier = Modifier.padding(start = 8.dp, top = 4.dp, end = 8.dp, bottom = 4.dp), 
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier.size(16.dp, 16.dp)
                    .background(color = MaterialTheme.colors.secondary)
            )
            Spacer(Modifier.width(4.dp))
            Text(text = text)
        }
    }
}

@Preview
@Composable
fun ChipPreview() {
    LayoutsCodelabTheme {
        Chip(text = \"Hi there\")
    }
}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\ub85c \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc774\uc81c BodyContent\uc5d0 \ub098\ud0c0\ub0bc \uc218 \uc788\uace0, StaggeredGrid\uc5d0 \ubcf4\uc5ec\uc904 \uc218 \uc788\ub294 \ud1a0\ud53d \ubaa9\ub85d\uc744 \uc0dd\uc131\ud574\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\n
val topics = listOf(
    \"Arts & Crafts\", \"Beauty\", \"Books\", \"Business\", \"Comics\", \"Culinary\",
    \"Design\", \"Fashion\", \"Film\", \"History\", \"Maths\", \"Music\", \"People\", \"Philosophy\",
    \"Religion\", \"Social sciences\", \"Technology\", \"TV\", \"Writing\"
)


@Composable
fun BodyContent(modifier: Modifier = Modifier) {
    StaggeredGrid(modifier = modifier) {
        for (topic in topics) {
            Chip(modifier = Modifier.padding(8.dp), text = topic)
        }
    }
}

@Preview
@Composable
fun LayoutsCodelabPreview() {
    LayoutsCodelabTheme {
        BodyContent()
    }
}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\ub85c \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
grid\uc758 \ud589 \uac2f\uc218\ub97c \ubcc0\uacbd\ud560 \uc218 \uc788\uace0, \uae30\ub300\ud55c\ub300\ub85c \uc798 \ub3d9\uc791\ud55c\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
@Composable
fun BodyContent(modifier: Modifier = Modifier) {
    StaggeredGrid(modifier = modifier, rows = 5) {
        for (topic in topics) {
            Chip(modifier = Modifier.padding(8.dp), text = topic)
        }
    }
}<\/code><\/pre>\n\n\n\n
\ubbf8\ub9ac\ubcf4\uae30\ub85c\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ud589\ub4e4\uc758 \uac2f\uc218\uc5d0 \uc758\uc874\ud558\uae30 \ub54c\ubb38\uc5d0, \ud1a0\ud53d\ub4e4\uc774 \ud654\uba74 \ubc16\uc73c\ub85c \ub098\uac08 \uc218 \uc788\ub2e4. \ub2e8\uc9c0, \uc2a4\ud06c\ub864 \uac00\ub2a5\ud55c Row\ub85c StaggeredGrid\ub97c \uac10\uc2f8\uace0 StaggeredGrid \ub300\uc2e0\uc5d0 Row\uc5d0 modifier\ub97c \uc801\uc6a9\ud558\uc5ec, \uc2a4\ud06c\ub864 \uac00\ub2a5\ud55c BodyContent \ub9cc\ub4e4\uc5b4\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
@Composable
fun BodyContent(modifier: Modifier = Modifier) {
    Row(modifier = modifier.horizontalScroll(rememberScrollState())) {
        StaggeredGrid {
            for (topic in topics) {
                Chip(modifier = Modifier.padding(8.dp), text = topic)
            }
        }
    }
}<\/code><\/pre>\n\n\n\n
\ub9cc\uc57d \uc548\ub4dc\ub85c\uc774\ub4dc \uc2a4\ud29c\ub514\uc624\uc5d0 \uc788\ub294 Interactive Preview \ubc84\ud2bc\uc744 \uc0ac\uc6a9\ud558\uac70\ub098 \uc2e4\uae30\uae30\uc5d0\uc11c \uc571\uc744 \uc2e4\ud589\ud558\uba74, \uc218\ud3c9\uc801\uc73c\ub85c \ucee8\ud150\uce20\ub97c \uc2a4\ud06c\ub864 \ud560 \uc218 \uc788\ub294 \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
StaggeredGrid\uc758 \uc804\uccb4 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
@Composable
fun StaggeredGrid(
    modifier: Modifier = Modifier,
    rows: Int = 3,
    content: @Composable () -> Unit
) {
    Layout<\/em>(
        modifier = modifier,
        content = content
    ) { <\/strong>measurables, constraints ->
<\/strong>
<\/strong>        <\/strong>\/\/ Keep track of the width of each row
        val rowWidths = IntArray(rows) { <\/strong>0 }
<\/strong>
<\/strong>        <\/strong>\/\/ Keep track of the max height of each row
        val rowHeights = IntArray(rows) { <\/strong>0 }
<\/strong>
<\/strong>        <\/strong>\/\/ Don't constrain child views further, measure them with given constraints
        \/\/ List of measured children
        val placeables = measurables.mapIndexed <\/em>{ <\/strong>index, measurable ->
<\/strong>
<\/strong>            <\/strong>\/\/ Measure each child
            val placeable = measurable.measure(constraints)

            \/\/ Track the width and max height of each row
            val row = index % rows
            rowWidths[row] += placeable.width
            rowHeights[row] = Math.max(rowHeights[row], placeable.height)

            placeable
        }
<\/strong>        <\/strong>\/\/ Grid's width is the widest row
        val width = rowWidths.maxOrNull<\/em>()
            ?.coerceIn<\/em>(constraints.minWidth.rangeTo(constraints.maxWidth)) ?: constraints.minWidth

        \/\/ Grid's height is the sum of the tallest element of each row
        \/\/ coerced to the height constraints
        val height = rowHeights.sumOf <\/em>{ it }
<\/strong>            <\/strong>.coerceIn<\/em>(constraints.minHeight.rangeTo(constraints.maxHeight))

        \/\/ Y of each row, based on the height accumulation of previous rows
        val rowY = IntArray(rows) { <\/strong>0 }
<\/strong>        <\/strong>for (i in 1 until <\/em>rows) {
            rowY[i] = rowY[i-1] + rowHeights[i-1]
        }

        \/\/ Set the size of the parent layout
        layout(width, height) {
<\/strong>            <\/strong>\/\/ x cord we have placed up to, per row
            val rowX = IntArray(rows) { <\/strong>0 }
<\/strong>
<\/strong>            <\/strong>placeables.forEachIndexed <\/em>{ <\/strong>index, placeable ->
<\/strong>                <\/strong>val row = index % rows
                placeable.placeRelative<\/em>(
                    x = rowX[row],
                    y = rowY[row]
                )
                rowX[row] += placeable.width
            }
<\/strong>        }
<\/strong>    }
<\/strong>}<\/pre>\n","protected":false},"excerpt":{"rendered":"
Layout\uc758 \uae30\ucd08\ub97c \ub2e4\ub904 \ubcf4\uc558\ub2e4\uba74, API\uc758 \uc720\uc5f0\uc131\uc744 \ubcf4\uc5ec\uc904\ub9cc\ud55c \ub354 \ubcf5\uc7a1\ud55c \uc608\uc81c\ub97c \ub9cc\ub4e4\uc790. \ub2e4\uc74c \ub098\uc624\ub294 \uc0ac\uc9c4\uc758 \uc911\uc559\uc5d0 \uc788\ub294 Material Study Owl\uc758 \ucee4\uc2a4\ud140 staggered grid\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uc790. Owl\uc758 staggered grid\ub294 \uc544\uc774\ud15c\uc744 \uc218\uc9c1\uc801\uc73c\ub85c \uc804\uac1c\ud558\uace0, \ud558\ub098\uc758 \uc5f4\uc5d0 \uc8fc\uc5b4\uc9c4 n\uac1c\uc758 \ud589\uc744 \ucc44\uc6cc \ub123\ub294\ub2e4. Row\uc5d0 Column\ub4e4\uc744 \ucc44\uc6b0\ub294 \ubc29\uc2dd\uc73c\ub85c\ub294 staggered grid \ub808\uc774\uc544\uc6c3\uc744 \uad6c\uc131\ud560 \uc218 \uc5c6\ub2e4. \ub9cc\uc57d \uc900\ube44\ub41c \ub370\uc774\ud130\ub97c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[38],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45583"}],"collection":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45583"}],"version-history":[{"count":1,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45583\/revisions"}],"predecessor-version":[{"id":45588,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45583\/revisions\/45588"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}