[{"data":1,"prerenderedAt":2298},["ShallowReactive",2],{"blog-ko-nest-row-in-col":3},{"id":4,"title":5,"author":6,"body":10,"date":880,"description":2264,"draft":2265,"extension":2266,"howTo":2267,"image":2288,"meta":2289,"navigation":464,"path":2290,"seo":2291,"stem":2292,"tags":2293,"updated":2288,"__hash__":2297},"blogKo/ko/blog/025.nest-row-in-col.md","gpdf의 Col 안에 Row를 중첩하려면?",{"name":7,"url":8,"avatar":9},"Taiki Noda","https://nadai.dev/ko/about","https://nadai.dev/og-default.png",{"type":11,"value":12,"toc":2251},"minimark",[13,18,50,54,97,101,110,417,440,444,447,1149,1165,1172,1178,1601,1620,1624,1635,1852,1865,1869,1884,1940,1957,1961,1967,2174,2181,2185,2211,2215,2218,2235,2247],[14,15,17],"h2",{"id":16},"질문을-다르게-표현하면","질문을 다르게 표현하면",[19,20,21,22,26,27,30,31,33,34,41,42,45,46,49],"p",{},"Bootstrap이나 Tailwind에서는 ",[23,24,25],"code",{},".row"," 안에 ",[23,28,29],{},".col",", 그 안에 다시 ",[23,32,25],{},"를 자유롭게 중첩할 수 있습니다. ",[35,36,40],"a",{"href":37,"rel":38},"https://github.com/gpdf-dev/gpdf",[39],"nofollow","gpdf","에서도 같은 ",[23,43,44],{},"r.Col(span, fn)"," 패턴이 보이니, 컬럼 콜백 안에서 ",[23,47,48],{},"c.Row(...)","를 찾게 됩니다. 자동완성이 뜨지 않습니다. 빠진 건가요?",[14,51,53],{"id":52},"짧은-답","짧은 답",[19,55,56,57,61,62,65,66,69,70,69,73,69,76,69,79,69,82,85,86,69,89,92,93,96],{},"아닙니다. ",[58,59,60],"strong",{},"gpdf의 12-컬럼 그리드는 의도적으로 평면입니다."," ",[23,63,64],{},"ColBuilder","는 콘텐츠만 받습니다 — ",[23,67,68],{},"Text"," / ",[23,71,72],{},"Image",[23,74,75],{},"Table",[23,77,78],{},"Box",[23,80,81],{},"List",[23,83,84],{},"Spacer"," — ",[23,87,88],{},"Row",[23,90,91],{},"AutoRow","는 ",[23,94,95],{},"PageBuilder"," 쪽에만 있습니다. 문법을 찾으러 왔다면, 그 문법은 없습니다. 아래에서 대체 관용 패턴 세 가지를 설명합니다.",[14,98,100],{"id":99},"api의-실제-모양","API의 실제 모양",[19,102,103,105,106,109],{},[23,104,64],{},"의 메서드 집합 (",[23,107,108],{},"gpdf/template/grid.go"," 출처):",[111,112,117],"pre",{"className":113,"code":114,"language":115,"meta":116,"style":116},"language-go shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","func (c *ColBuilder) Text(text string, opts ...TextOption)\nfunc (c *ColBuilder) Image(src []byte, opts ...ImageOption)\nfunc (c *ColBuilder) Box(fn func(c *ColBuilder), opts ...BoxOption)\nfunc (c *ColBuilder) Table(header []string, rows [][]string, opts ...TableOption)\nfunc (c *ColBuilder) Line(opts ...LineOption)\nfunc (c *ColBuilder) List(items []string, opts ...ListOption)\nfunc (c *ColBuilder) Spacer(height document.Value)\n// …PageNumber, TotalPages, RichText, QRCode, Barcode\n","go","",[23,118,119,173,213,259,308,338,376,410],{"__ignoreMap":116},[120,121,124,128,131,135,138,141,144,148,151,154,158,161,164,167,170],"span",{"class":122,"line":123},"line",1,[120,125,127],{"class":126},"sMK4o","func",[120,129,130],{"class":126}," (",[120,132,134],{"class":133},"sHdIc","c ",[120,136,137],{"class":126},"*",[120,139,64],{"class":140},"sBMFI",[120,142,143],{"class":126},")",[120,145,147],{"class":146},"s2Zo4"," Text",[120,149,150],{"class":126},"(",[120,152,153],{"class":133},"text",[120,155,157],{"class":156},"spNyl"," string",[120,159,160],{"class":126},",",[120,162,163],{"class":133}," opts",[120,165,166],{"class":126}," ...",[120,168,169],{"class":140},"TextOption",[120,171,172],{"class":126},")\n",[120,174,176,178,180,182,184,186,188,191,193,196,199,202,204,206,208,211],{"class":122,"line":175},2,[120,177,127],{"class":126},[120,179,130],{"class":126},[120,181,134],{"class":133},[120,183,137],{"class":126},[120,185,64],{"class":140},[120,187,143],{"class":126},[120,189,190],{"class":146}," Image",[120,192,150],{"class":126},[120,194,195],{"class":133},"src",[120,197,198],{"class":126}," []",[120,200,201],{"class":156},"byte",[120,203,160],{"class":126},[120,205,163],{"class":133},[120,207,166],{"class":126},[120,209,210],{"class":140},"ImageOption",[120,212,172],{"class":126},[120,214,216,218,220,222,224,226,228,231,233,236,239,242,245,247,250,252,254,257],{"class":122,"line":215},3,[120,217,127],{"class":126},[120,219,130],{"class":126},[120,221,134],{"class":133},[120,223,137],{"class":126},[120,225,64],{"class":140},[120,227,143],{"class":126},[120,229,230],{"class":146}," Box",[120,232,150],{"class":126},[120,234,235],{"class":133},"fn",[120,237,238],{"class":126}," func(",[120,240,241],{"class":133},"c",[120,243,244],{"class":126}," *",[120,246,64],{"class":140},[120,248,249],{"class":126},"),",[120,251,163],{"class":133},[120,253,166],{"class":126},[120,255,256],{"class":140},"BoxOption",[120,258,172],{"class":126},[120,260,262,264,266,268,270,272,274,277,279,282,284,287,289,292,295,297,299,301,303,306],{"class":122,"line":261},4,[120,263,127],{"class":126},[120,265,130],{"class":126},[120,267,134],{"class":133},[120,269,137],{"class":126},[120,271,64],{"class":140},[120,273,143],{"class":126},[120,275,276],{"class":146}," Table",[120,278,150],{"class":126},[120,280,281],{"class":133},"header",[120,283,198],{"class":126},[120,285,286],{"class":156},"string",[120,288,160],{"class":126},[120,290,291],{"class":133}," rows",[120,293,294],{"class":126}," [][]",[120,296,286],{"class":156},[120,298,160],{"class":126},[120,300,163],{"class":133},[120,302,166],{"class":126},[120,304,305],{"class":140},"TableOption",[120,307,172],{"class":126},[120,309,311,313,315,317,319,321,323,326,328,331,333,336],{"class":122,"line":310},5,[120,312,127],{"class":126},[120,314,130],{"class":126},[120,316,134],{"class":133},[120,318,137],{"class":126},[120,320,64],{"class":140},[120,322,143],{"class":126},[120,324,325],{"class":146}," Line",[120,327,150],{"class":126},[120,329,330],{"class":133},"opts",[120,332,166],{"class":126},[120,334,335],{"class":140},"LineOption",[120,337,172],{"class":126},[120,339,341,343,345,347,349,351,353,356,358,361,363,365,367,369,371,374],{"class":122,"line":340},6,[120,342,127],{"class":126},[120,344,130],{"class":126},[120,346,134],{"class":133},[120,348,137],{"class":126},[120,350,64],{"class":140},[120,352,143],{"class":126},[120,354,355],{"class":146}," List",[120,357,150],{"class":126},[120,359,360],{"class":133},"items",[120,362,198],{"class":126},[120,364,286],{"class":156},[120,366,160],{"class":126},[120,368,163],{"class":133},[120,370,166],{"class":126},[120,372,373],{"class":140},"ListOption",[120,375,172],{"class":126},[120,377,379,381,383,385,387,389,391,394,396,399,402,405,408],{"class":122,"line":378},7,[120,380,127],{"class":126},[120,382,130],{"class":126},[120,384,134],{"class":133},[120,386,137],{"class":126},[120,388,64],{"class":140},[120,390,143],{"class":126},[120,392,393],{"class":146}," Spacer",[120,395,150],{"class":126},[120,397,398],{"class":133},"height",[120,400,401],{"class":140}," document",[120,403,404],{"class":126},".",[120,406,407],{"class":140},"Value",[120,409,172],{"class":126},[120,411,413],{"class":122,"line":412},8,[120,414,416],{"class":415},"sHwdD","// …PageNumber, TotalPages, RichText, QRCode, Barcode\n",[19,418,419,421,422,421,424,427,428,431,432,435,436,439],{},[23,420,88],{},"도, ",[23,423,91],{},[23,425,426],{},"Col","도 없습니다. Col → Row로 가는 메서드 경로 자체가 없고, 가장 가까운 건 ",[23,429,430],{},"c.Box(fn, ...)","인데 이것도 또 다른 ",[23,433,434],{},"*ColBuilder","를 받지 Row를 받지 않습니다. ",[58,437,438],{},"컬럼을 컬럼 안에","(Box로 흉내내서) 넣을 수는 있지만, 컬럼 안에 새로운 가로 행을 열 수는 없습니다. 이게 제약입니다.",[14,441,443],{"id":442},"관용-패턴-1-페이지-레벨의-형제-row","관용 패턴 1 — 페이지 레벨의 형제 Row",[19,445,446],{},"\"중첩 Row\"라고 쓰고 싶어지는 경우의 90%가 사실 이걸 원합니다.",[111,448,450],{"className":113,"code":449,"language":115,"meta":116,"style":116},"package main\n\nimport (\n    \"log\"\n    \"os\"\n\n    \"github.com/gpdf-dev/gpdf\"\n    \"github.com/gpdf-dev/gpdf/document\"\n    \"github.com/gpdf-dev/gpdf/template\"\n)\n\nfunc main() {\n    doc := gpdf.NewDocument(\n        gpdf.WithPageSize(document.A4),\n        gpdf.WithMargins(document.UniformEdges(document.Mm(15))),\n    )\n    page := doc.AddPage()\n\n    // 쓰고 싶지만 쓸 수 없는 코드:\n    //\n    //   page.AutoRow(func(r *template.RowBuilder) {\n    //       r.Col(8, func(c *template.ColBuilder) {\n    //           c.Row(...) ❌ 존재하지 않음\n    //       })\n    //   })\n\n    // 실제로 쓰는 코드:\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(8, func(c *template.ColBuilder) {\n            c.Text(\"기사 제목\", template.FontSize(18), template.Bold())\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"2026-05-16\")\n        })\n    })\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(8, func(c *template.ColBuilder) {\n            c.Text(\"리드 문단은 같은 8 폭 컬럼을 사용합니다.\")\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"저자: Taiki Noda\")\n        })\n    })\n\n    data, err := doc.Generate()\n    if err != nil {\n        log.Fatal(err)\n    }\n    _ = os.WriteFile(\"flat.pdf\", data, 0o644)\n}\n",[23,451,452,460,466,475,486,495,499,508,517,527,532,537,551,572,596,633,639,658,663,669,675,681,687,693,699,705,710,716,746,779,827,833,865,885,890,896,921,952,972,977,1008,1028,1033,1038,1043,1065,1081,1099,1105,1143],{"__ignoreMap":116},[120,453,454,457],{"class":122,"line":123},[120,455,456],{"class":126},"package",[120,458,459],{"class":140}," main\n",[120,461,462],{"class":122,"line":175},[120,463,465],{"emptyLinePlaceholder":464},true,"\n",[120,467,468,472],{"class":122,"line":215},[120,469,471],{"class":470},"s7zQu","import",[120,473,474],{"class":126}," (\n",[120,476,477,480,483],{"class":122,"line":261},[120,478,479],{"class":126},"    \"",[120,481,482],{"class":140},"log",[120,484,485],{"class":126},"\"\n",[120,487,488,490,493],{"class":122,"line":310},[120,489,479],{"class":126},[120,491,492],{"class":140},"os",[120,494,485],{"class":126},[120,496,497],{"class":122,"line":340},[120,498,465],{"emptyLinePlaceholder":464},[120,500,501,503,506],{"class":122,"line":378},[120,502,479],{"class":126},[120,504,505],{"class":140},"github.com/gpdf-dev/gpdf",[120,507,485],{"class":126},[120,509,510,512,515],{"class":122,"line":412},[120,511,479],{"class":126},[120,513,514],{"class":140},"github.com/gpdf-dev/gpdf/document",[120,516,485],{"class":126},[120,518,520,522,525],{"class":122,"line":519},9,[120,521,479],{"class":126},[120,523,524],{"class":140},"github.com/gpdf-dev/gpdf/template",[120,526,485],{"class":126},[120,528,530],{"class":122,"line":529},10,[120,531,172],{"class":126},[120,533,535],{"class":122,"line":534},11,[120,536,465],{"emptyLinePlaceholder":464},[120,538,540,542,545,548],{"class":122,"line":539},12,[120,541,127],{"class":126},[120,543,544],{"class":146}," main",[120,546,547],{"class":126},"()",[120,549,550],{"class":126}," {\n",[120,552,554,558,561,564,566,569],{"class":122,"line":553},13,[120,555,557],{"class":556},"sTEyZ","    doc ",[120,559,560],{"class":126},":=",[120,562,563],{"class":556}," gpdf",[120,565,404],{"class":126},[120,567,568],{"class":146},"NewDocument",[120,570,571],{"class":126},"(\n",[120,573,575,578,580,583,585,588,590,593],{"class":122,"line":574},14,[120,576,577],{"class":556},"        gpdf",[120,579,404],{"class":126},[120,581,582],{"class":146},"WithPageSize",[120,584,150],{"class":126},[120,586,587],{"class":556},"document",[120,589,404],{"class":126},[120,591,592],{"class":556},"A4",[120,594,595],{"class":126},"),\n",[120,597,599,601,603,606,608,610,612,615,617,619,621,624,626,630],{"class":122,"line":598},15,[120,600,577],{"class":556},[120,602,404],{"class":126},[120,604,605],{"class":146},"WithMargins",[120,607,150],{"class":126},[120,609,587],{"class":556},[120,611,404],{"class":126},[120,613,614],{"class":146},"UniformEdges",[120,616,150],{"class":126},[120,618,587],{"class":556},[120,620,404],{"class":126},[120,622,623],{"class":146},"Mm",[120,625,150],{"class":126},[120,627,629],{"class":628},"sbssI","15",[120,631,632],{"class":126},"))),\n",[120,634,636],{"class":122,"line":635},16,[120,637,638],{"class":126},"    )\n",[120,640,642,645,647,650,652,655],{"class":122,"line":641},17,[120,643,644],{"class":556},"    page ",[120,646,560],{"class":126},[120,648,649],{"class":556}," doc",[120,651,404],{"class":126},[120,653,654],{"class":146},"AddPage",[120,656,657],{"class":126},"()\n",[120,659,661],{"class":122,"line":660},18,[120,662,465],{"emptyLinePlaceholder":464},[120,664,666],{"class":122,"line":665},19,[120,667,668],{"class":415},"    // 쓰고 싶지만 쓸 수 없는 코드:\n",[120,670,672],{"class":122,"line":671},20,[120,673,674],{"class":415},"    //\n",[120,676,678],{"class":122,"line":677},21,[120,679,680],{"class":415},"    //   page.AutoRow(func(r *template.RowBuilder) {\n",[120,682,684],{"class":122,"line":683},22,[120,685,686],{"class":415},"    //       r.Col(8, func(c *template.ColBuilder) {\n",[120,688,690],{"class":122,"line":689},23,[120,691,692],{"class":415},"    //           c.Row(...) ❌ 존재하지 않음\n",[120,694,696],{"class":122,"line":695},24,[120,697,698],{"class":415},"    //       })\n",[120,700,702],{"class":122,"line":701},25,[120,703,704],{"class":415},"    //   })\n",[120,706,708],{"class":122,"line":707},26,[120,709,465],{"emptyLinePlaceholder":464},[120,711,713],{"class":122,"line":712},27,[120,714,715],{"class":415},"    // 실제로 쓰는 코드:\n",[120,717,719,722,724,726,729,732,734,737,739,742,744],{"class":122,"line":718},28,[120,720,721],{"class":556},"    page",[120,723,404],{"class":126},[120,725,91],{"class":146},[120,727,728],{"class":126},"(func(",[120,730,731],{"class":133},"r",[120,733,244],{"class":126},[120,735,736],{"class":140},"template",[120,738,404],{"class":126},[120,740,741],{"class":140},"RowBuilder",[120,743,143],{"class":126},[120,745,550],{"class":126},[120,747,749,752,754,756,758,761,763,765,767,769,771,773,775,777],{"class":122,"line":748},29,[120,750,751],{"class":556},"        r",[120,753,404],{"class":126},[120,755,426],{"class":146},[120,757,150],{"class":126},[120,759,760],{"class":628},"8",[120,762,160],{"class":126},[120,764,238],{"class":126},[120,766,241],{"class":133},[120,768,244],{"class":126},[120,770,736],{"class":140},[120,772,404],{"class":126},[120,774,64],{"class":140},[120,776,143],{"class":126},[120,778,550],{"class":126},[120,780,782,785,787,789,791,794,798,800,802,805,807,810,812,815,817,819,821,824],{"class":122,"line":781},30,[120,783,784],{"class":556},"            c",[120,786,404],{"class":126},[120,788,68],{"class":146},[120,790,150],{"class":126},[120,792,793],{"class":126},"\"",[120,795,797],{"class":796},"sfazB","기사 제목",[120,799,793],{"class":126},[120,801,160],{"class":126},[120,803,804],{"class":556}," template",[120,806,404],{"class":126},[120,808,809],{"class":146},"FontSize",[120,811,150],{"class":126},[120,813,814],{"class":628},"18",[120,816,249],{"class":126},[120,818,804],{"class":556},[120,820,404],{"class":126},[120,822,823],{"class":146},"Bold",[120,825,826],{"class":126},"())\n",[120,828,830],{"class":122,"line":829},31,[120,831,832],{"class":126},"        })\n",[120,834,836,838,840,842,844,847,849,851,853,855,857,859,861,863],{"class":122,"line":835},32,[120,837,751],{"class":556},[120,839,404],{"class":126},[120,841,426],{"class":146},[120,843,150],{"class":126},[120,845,846],{"class":628},"4",[120,848,160],{"class":126},[120,850,238],{"class":126},[120,852,241],{"class":133},[120,854,244],{"class":126},[120,856,736],{"class":140},[120,858,404],{"class":126},[120,860,64],{"class":140},[120,862,143],{"class":126},[120,864,550],{"class":126},[120,866,868,870,872,874,876,878,881,883],{"class":122,"line":867},33,[120,869,784],{"class":556},[120,871,404],{"class":126},[120,873,68],{"class":146},[120,875,150],{"class":126},[120,877,793],{"class":126},[120,879,880],{"class":796},"2026-05-16",[120,882,793],{"class":126},[120,884,172],{"class":126},[120,886,888],{"class":122,"line":887},34,[120,889,832],{"class":126},[120,891,893],{"class":122,"line":892},35,[120,894,895],{"class":126},"    })\n",[120,897,899,901,903,905,907,909,911,913,915,917,919],{"class":122,"line":898},36,[120,900,721],{"class":556},[120,902,404],{"class":126},[120,904,91],{"class":146},[120,906,728],{"class":126},[120,908,731],{"class":133},[120,910,244],{"class":126},[120,912,736],{"class":140},[120,914,404],{"class":126},[120,916,741],{"class":140},[120,918,143],{"class":126},[120,920,550],{"class":126},[120,922,924,926,928,930,932,934,936,938,940,942,944,946,948,950],{"class":122,"line":923},37,[120,925,751],{"class":556},[120,927,404],{"class":126},[120,929,426],{"class":146},[120,931,150],{"class":126},[120,933,760],{"class":628},[120,935,160],{"class":126},[120,937,238],{"class":126},[120,939,241],{"class":133},[120,941,244],{"class":126},[120,943,736],{"class":140},[120,945,404],{"class":126},[120,947,64],{"class":140},[120,949,143],{"class":126},[120,951,550],{"class":126},[120,953,955,957,959,961,963,965,968,970],{"class":122,"line":954},38,[120,956,784],{"class":556},[120,958,404],{"class":126},[120,960,68],{"class":146},[120,962,150],{"class":126},[120,964,793],{"class":126},[120,966,967],{"class":796},"리드 문단은 같은 8 폭 컬럼을 사용합니다.",[120,969,793],{"class":126},[120,971,172],{"class":126},[120,973,975],{"class":122,"line":974},39,[120,976,832],{"class":126},[120,978,980,982,984,986,988,990,992,994,996,998,1000,1002,1004,1006],{"class":122,"line":979},40,[120,981,751],{"class":556},[120,983,404],{"class":126},[120,985,426],{"class":146},[120,987,150],{"class":126},[120,989,846],{"class":628},[120,991,160],{"class":126},[120,993,238],{"class":126},[120,995,241],{"class":133},[120,997,244],{"class":126},[120,999,736],{"class":140},[120,1001,404],{"class":126},[120,1003,64],{"class":140},[120,1005,143],{"class":126},[120,1007,550],{"class":126},[120,1009,1011,1013,1015,1017,1019,1021,1024,1026],{"class":122,"line":1010},41,[120,1012,784],{"class":556},[120,1014,404],{"class":126},[120,1016,68],{"class":146},[120,1018,150],{"class":126},[120,1020,793],{"class":126},[120,1022,1023],{"class":796},"저자: Taiki Noda",[120,1025,793],{"class":126},[120,1027,172],{"class":126},[120,1029,1031],{"class":122,"line":1030},42,[120,1032,832],{"class":126},[120,1034,1036],{"class":122,"line":1035},43,[120,1037,895],{"class":126},[120,1039,1041],{"class":122,"line":1040},44,[120,1042,465],{"emptyLinePlaceholder":464},[120,1044,1046,1049,1051,1054,1056,1058,1060,1063],{"class":122,"line":1045},45,[120,1047,1048],{"class":556},"    data",[120,1050,160],{"class":126},[120,1052,1053],{"class":556}," err ",[120,1055,560],{"class":126},[120,1057,649],{"class":556},[120,1059,404],{"class":126},[120,1061,1062],{"class":146},"Generate",[120,1064,657],{"class":126},[120,1066,1068,1071,1073,1076,1079],{"class":122,"line":1067},46,[120,1069,1070],{"class":470},"    if",[120,1072,1053],{"class":556},[120,1074,1075],{"class":126},"!=",[120,1077,1078],{"class":126}," nil",[120,1080,550],{"class":126},[120,1082,1084,1087,1089,1092,1094,1097],{"class":122,"line":1083},47,[120,1085,1086],{"class":556},"        log",[120,1088,404],{"class":126},[120,1090,1091],{"class":146},"Fatal",[120,1093,150],{"class":126},[120,1095,1096],{"class":556},"err",[120,1098,172],{"class":126},[120,1100,1102],{"class":122,"line":1101},48,[120,1103,1104],{"class":126},"    }\n",[120,1106,1108,1111,1114,1117,1119,1122,1124,1126,1129,1131,1133,1136,1138,1141],{"class":122,"line":1107},49,[120,1109,1110],{"class":556},"    _ ",[120,1112,1113],{"class":126},"=",[120,1115,1116],{"class":556}," os",[120,1118,404],{"class":126},[120,1120,1121],{"class":146},"WriteFile",[120,1123,150],{"class":126},[120,1125,793],{"class":126},[120,1127,1128],{"class":796},"flat.pdf",[120,1130,793],{"class":126},[120,1132,160],{"class":126},[120,1134,1135],{"class":556}," data",[120,1137,160],{"class":126},[120,1139,1140],{"class":628}," 0o644",[120,1142,172],{"class":126},[120,1144,1146],{"class":122,"line":1145},50,[120,1147,1148],{"class":126},"}\n",[19,1150,1151,1152,1154,1155,1158,1159,26,1162,1164],{},"두 ",[23,1153,91],{},"가 같은 ",[23,1156,1157],{},"8+4"," 스팬을 공유하므로 시각적으로 컬럼이 정렬됩니다. 서브 그리드가 아니라, 같은 컬럼 분할을 쓰는 평면 Row 두 개입니다. CSS에서 ",[23,1160,1161],{},".col-8",[23,1163,25],{},"를 중첩한 출력과 동일합니다 — 중첩이 사주는 건 결국 문법적 지역성뿐이고, gpdf는 그 예산을 \"컬럼 폭 일관성\"에 다시 씁니다.",[14,1166,1168,1169],{"id":1167},"관용-패턴-2-시각적-그룹화는-cbox","관용 패턴 2 — 시각적 그룹화는 ",[23,1170,1171],{},"c.Box",[19,1173,1174,1175,1177],{},"진짜 동기가 \"이 컬럼 안에 테두리 있는 카드를 그리고 안에 두 줄을 쌓고 싶다\"였다면 원하는 건 ",[23,1176,78],{},"이지 서브 Row가 아닙니다:",[111,1179,1181],{"className":113,"code":1180,"language":115,"meta":116,"style":116},"page.AutoRow(func(r *template.RowBuilder) {\n    r.Col(6, func(c *template.ColBuilder) {\n        c.Box(func(c *template.ColBuilder) {\n            c.Text(\"청구지\", template.Bold())\n            c.Text(\"애크미 주식회사\")\n            c.Text(\"서울시 강남구\")\n        },\n            template.WithBoxBorder(template.Border(\n                template.BorderWidth(document.Pt(1)),\n                template.BorderColor(pdf.RGBHex(0xBDBDBD)),\n            )),\n            template.WithBoxPadding(document.UniformEdges(document.Mm(4))),\n        )\n    })\n    r.Col(6, func(c *template.ColBuilder) {\n        c.Box(func(c *template.ColBuilder) {\n            c.Text(\"배송지\", template.Bold())\n            c.Text(\"청구지와 동일\")\n        },\n            template.WithBoxPadding(document.UniformEdges(document.Mm(4))),\n        )\n    })\n})\n",[23,1182,1183,1208,1240,1265,1292,1311,1330,1335,1356,1383,1409,1414,1445,1450,1454,1484,1508,1535,1554,1558,1588,1592,1596],{"__ignoreMap":116},[120,1184,1185,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206],{"class":122,"line":123},[120,1186,1187],{"class":556},"page",[120,1189,404],{"class":126},[120,1191,91],{"class":146},[120,1193,728],{"class":126},[120,1195,731],{"class":133},[120,1197,244],{"class":126},[120,1199,736],{"class":140},[120,1201,404],{"class":126},[120,1203,741],{"class":140},[120,1205,143],{"class":126},[120,1207,550],{"class":126},[120,1209,1210,1213,1215,1217,1219,1222,1224,1226,1228,1230,1232,1234,1236,1238],{"class":122,"line":175},[120,1211,1212],{"class":556},"    r",[120,1214,404],{"class":126},[120,1216,426],{"class":146},[120,1218,150],{"class":126},[120,1220,1221],{"class":628},"6",[120,1223,160],{"class":126},[120,1225,238],{"class":126},[120,1227,241],{"class":133},[120,1229,244],{"class":126},[120,1231,736],{"class":140},[120,1233,404],{"class":126},[120,1235,64],{"class":140},[120,1237,143],{"class":126},[120,1239,550],{"class":126},[120,1241,1242,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263],{"class":122,"line":215},[120,1243,1244],{"class":556},"        c",[120,1246,404],{"class":126},[120,1248,78],{"class":146},[120,1250,728],{"class":126},[120,1252,241],{"class":133},[120,1254,244],{"class":126},[120,1256,736],{"class":140},[120,1258,404],{"class":126},[120,1260,64],{"class":140},[120,1262,143],{"class":126},[120,1264,550],{"class":126},[120,1266,1267,1269,1271,1273,1275,1277,1280,1282,1284,1286,1288,1290],{"class":122,"line":261},[120,1268,784],{"class":556},[120,1270,404],{"class":126},[120,1272,68],{"class":146},[120,1274,150],{"class":126},[120,1276,793],{"class":126},[120,1278,1279],{"class":796},"청구지",[120,1281,793],{"class":126},[120,1283,160],{"class":126},[120,1285,804],{"class":556},[120,1287,404],{"class":126},[120,1289,823],{"class":146},[120,1291,826],{"class":126},[120,1293,1294,1296,1298,1300,1302,1304,1307,1309],{"class":122,"line":310},[120,1295,784],{"class":556},[120,1297,404],{"class":126},[120,1299,68],{"class":146},[120,1301,150],{"class":126},[120,1303,793],{"class":126},[120,1305,1306],{"class":796},"애크미 주식회사",[120,1308,793],{"class":126},[120,1310,172],{"class":126},[120,1312,1313,1315,1317,1319,1321,1323,1326,1328],{"class":122,"line":340},[120,1314,784],{"class":556},[120,1316,404],{"class":126},[120,1318,68],{"class":146},[120,1320,150],{"class":126},[120,1322,793],{"class":126},[120,1324,1325],{"class":796},"서울시 강남구",[120,1327,793],{"class":126},[120,1329,172],{"class":126},[120,1331,1332],{"class":122,"line":378},[120,1333,1334],{"class":126},"        },\n",[120,1336,1337,1340,1342,1345,1347,1349,1351,1354],{"class":122,"line":412},[120,1338,1339],{"class":556},"            template",[120,1341,404],{"class":126},[120,1343,1344],{"class":146},"WithBoxBorder",[120,1346,150],{"class":126},[120,1348,736],{"class":556},[120,1350,404],{"class":126},[120,1352,1353],{"class":146},"Border",[120,1355,571],{"class":126},[120,1357,1358,1361,1363,1366,1368,1370,1372,1375,1377,1380],{"class":122,"line":519},[120,1359,1360],{"class":556},"                template",[120,1362,404],{"class":126},[120,1364,1365],{"class":146},"BorderWidth",[120,1367,150],{"class":126},[120,1369,587],{"class":556},[120,1371,404],{"class":126},[120,1373,1374],{"class":146},"Pt",[120,1376,150],{"class":126},[120,1378,1379],{"class":628},"1",[120,1381,1382],{"class":126},")),\n",[120,1384,1385,1387,1389,1392,1394,1397,1399,1402,1404,1407],{"class":122,"line":529},[120,1386,1360],{"class":556},[120,1388,404],{"class":126},[120,1390,1391],{"class":146},"BorderColor",[120,1393,150],{"class":126},[120,1395,1396],{"class":556},"pdf",[120,1398,404],{"class":126},[120,1400,1401],{"class":146},"RGBHex",[120,1403,150],{"class":126},[120,1405,1406],{"class":628},"0xBDBDBD",[120,1408,1382],{"class":126},[120,1410,1411],{"class":122,"line":534},[120,1412,1413],{"class":126},"            )),\n",[120,1415,1416,1418,1420,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443],{"class":122,"line":539},[120,1417,1339],{"class":556},[120,1419,404],{"class":126},[120,1421,1422],{"class":146},"WithBoxPadding",[120,1424,150],{"class":126},[120,1426,587],{"class":556},[120,1428,404],{"class":126},[120,1430,614],{"class":146},[120,1432,150],{"class":126},[120,1434,587],{"class":556},[120,1436,404],{"class":126},[120,1438,623],{"class":146},[120,1440,150],{"class":126},[120,1442,846],{"class":628},[120,1444,632],{"class":126},[120,1446,1447],{"class":122,"line":553},[120,1448,1449],{"class":126},"        )\n",[120,1451,1452],{"class":122,"line":574},[120,1453,895],{"class":126},[120,1455,1456,1458,1460,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480,1482],{"class":122,"line":598},[120,1457,1212],{"class":556},[120,1459,404],{"class":126},[120,1461,426],{"class":146},[120,1463,150],{"class":126},[120,1465,1221],{"class":628},[120,1467,160],{"class":126},[120,1469,238],{"class":126},[120,1471,241],{"class":133},[120,1473,244],{"class":126},[120,1475,736],{"class":140},[120,1477,404],{"class":126},[120,1479,64],{"class":140},[120,1481,143],{"class":126},[120,1483,550],{"class":126},[120,1485,1486,1488,1490,1492,1494,1496,1498,1500,1502,1504,1506],{"class":122,"line":635},[120,1487,1244],{"class":556},[120,1489,404],{"class":126},[120,1491,78],{"class":146},[120,1493,728],{"class":126},[120,1495,241],{"class":133},[120,1497,244],{"class":126},[120,1499,736],{"class":140},[120,1501,404],{"class":126},[120,1503,64],{"class":140},[120,1505,143],{"class":126},[120,1507,550],{"class":126},[120,1509,1510,1512,1514,1516,1518,1520,1523,1525,1527,1529,1531,1533],{"class":122,"line":641},[120,1511,784],{"class":556},[120,1513,404],{"class":126},[120,1515,68],{"class":146},[120,1517,150],{"class":126},[120,1519,793],{"class":126},[120,1521,1522],{"class":796},"배송지",[120,1524,793],{"class":126},[120,1526,160],{"class":126},[120,1528,804],{"class":556},[120,1530,404],{"class":126},[120,1532,823],{"class":146},[120,1534,826],{"class":126},[120,1536,1537,1539,1541,1543,1545,1547,1550,1552],{"class":122,"line":660},[120,1538,784],{"class":556},[120,1540,404],{"class":126},[120,1542,68],{"class":146},[120,1544,150],{"class":126},[120,1546,793],{"class":126},[120,1548,1549],{"class":796},"청구지와 동일",[120,1551,793],{"class":126},[120,1553,172],{"class":126},[120,1555,1556],{"class":122,"line":665},[120,1557,1334],{"class":126},[120,1559,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586],{"class":122,"line":671},[120,1561,1339],{"class":556},[120,1563,404],{"class":126},[120,1565,1422],{"class":146},[120,1567,150],{"class":126},[120,1569,587],{"class":556},[120,1571,404],{"class":126},[120,1573,614],{"class":146},[120,1575,150],{"class":126},[120,1577,587],{"class":556},[120,1579,404],{"class":126},[120,1581,623],{"class":146},[120,1583,150],{"class":126},[120,1585,846],{"class":628},[120,1587,632],{"class":126},[120,1589,1590],{"class":122,"line":677},[120,1591,1449],{"class":126},[120,1593,1594],{"class":122,"line":683},[120,1595,895],{"class":126},[120,1597,1598],{"class":122,"line":689},[120,1599,1600],{"class":126},"})\n",[19,1602,1603,1605,1606,1608,1609,1612,1613,1616,1617,1619],{},[23,1604,78],{},"가 받는 ",[23,1607,434],{}," 내부는 ",[58,1610,1611],{},"세로 스택","입니다. Box를 가로로 쪼갤 수도 없습니다 — 가로가 필요하면 패턴 1로 돌아갑니다. 다만 \"카드\" 패턴을 만들고 싶어서 중첩 Row를 찾았다면, 정답은 이것입니다. ",[23,1614,1615],{},"grid.go:246","의 ",[23,1618,1171],{},"가 그리드가 허용하는 유일한 중첩이며, 그건 의도적으로 1차원입니다.",[14,1621,1623],{"id":1622},"관용-패턴-3-서브-그리드는-12-컬럼으로-직접-표현","관용 패턴 3 — 서브 그리드는 12 컬럼으로 직접 표현",[19,1625,1626,1627,1630,1631,1634],{},"\"페이지 왼쪽 절반 안에서 2 컬럼이 필요해 — 썸네일과 캡션을 왼쪽에 나란히, 본문을 오른쪽에\" 같은 경우. 직관은 ",[23,1628,1629],{},"Col(6) > Row > Col(6) + Col(6)","이지만, 평면 등가물은 그냥 ",[23,1632,1633],{},"Col(3) + Col(3) + Col(6)","입니다:",[111,1636,1638],{"className":113,"code":1637,"language":115,"meta":116,"style":116},"page.AutoRow(func(r *template.RowBuilder) {\n    r.Col(3, func(c *template.ColBuilder) {\n        c.Image(thumbBytes)\n    })\n    r.Col(3, func(c *template.ColBuilder) {\n        c.Text(\"Photo by Ansel Adams\", template.Italic())\n        c.Text(\"1942\")\n    })\n    r.Col(6, func(c *template.ColBuilder) {\n        c.Text(\"본문 문단이 페이지의 오른쪽 절반을 차지합니다.\")\n    })\n})\n",[23,1639,1640,1664,1695,1710,1714,1744,1772,1791,1795,1825,1844,1848],{"__ignoreMap":116},[120,1641,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662],{"class":122,"line":123},[120,1643,1187],{"class":556},[120,1645,404],{"class":126},[120,1647,91],{"class":146},[120,1649,728],{"class":126},[120,1651,731],{"class":133},[120,1653,244],{"class":126},[120,1655,736],{"class":140},[120,1657,404],{"class":126},[120,1659,741],{"class":140},[120,1661,143],{"class":126},[120,1663,550],{"class":126},[120,1665,1666,1668,1670,1672,1674,1677,1679,1681,1683,1685,1687,1689,1691,1693],{"class":122,"line":175},[120,1667,1212],{"class":556},[120,1669,404],{"class":126},[120,1671,426],{"class":146},[120,1673,150],{"class":126},[120,1675,1676],{"class":628},"3",[120,1678,160],{"class":126},[120,1680,238],{"class":126},[120,1682,241],{"class":133},[120,1684,244],{"class":126},[120,1686,736],{"class":140},[120,1688,404],{"class":126},[120,1690,64],{"class":140},[120,1692,143],{"class":126},[120,1694,550],{"class":126},[120,1696,1697,1699,1701,1703,1705,1708],{"class":122,"line":215},[120,1698,1244],{"class":556},[120,1700,404],{"class":126},[120,1702,72],{"class":146},[120,1704,150],{"class":126},[120,1706,1707],{"class":556},"thumbBytes",[120,1709,172],{"class":126},[120,1711,1712],{"class":122,"line":261},[120,1713,895],{"class":126},[120,1715,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742],{"class":122,"line":310},[120,1717,1212],{"class":556},[120,1719,404],{"class":126},[120,1721,426],{"class":146},[120,1723,150],{"class":126},[120,1725,1676],{"class":628},[120,1727,160],{"class":126},[120,1729,238],{"class":126},[120,1731,241],{"class":133},[120,1733,244],{"class":126},[120,1735,736],{"class":140},[120,1737,404],{"class":126},[120,1739,64],{"class":140},[120,1741,143],{"class":126},[120,1743,550],{"class":126},[120,1745,1746,1748,1750,1752,1754,1756,1759,1761,1763,1765,1767,1770],{"class":122,"line":340},[120,1747,1244],{"class":556},[120,1749,404],{"class":126},[120,1751,68],{"class":146},[120,1753,150],{"class":126},[120,1755,793],{"class":126},[120,1757,1758],{"class":796},"Photo by Ansel Adams",[120,1760,793],{"class":126},[120,1762,160],{"class":126},[120,1764,804],{"class":556},[120,1766,404],{"class":126},[120,1768,1769],{"class":146},"Italic",[120,1771,826],{"class":126},[120,1773,1774,1776,1778,1780,1782,1784,1787,1789],{"class":122,"line":378},[120,1775,1244],{"class":556},[120,1777,404],{"class":126},[120,1779,68],{"class":146},[120,1781,150],{"class":126},[120,1783,793],{"class":126},[120,1785,1786],{"class":796},"1942",[120,1788,793],{"class":126},[120,1790,172],{"class":126},[120,1792,1793],{"class":122,"line":412},[120,1794,895],{"class":126},[120,1796,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821,1823],{"class":122,"line":519},[120,1798,1212],{"class":556},[120,1800,404],{"class":126},[120,1802,426],{"class":146},[120,1804,150],{"class":126},[120,1806,1221],{"class":628},[120,1808,160],{"class":126},[120,1810,238],{"class":126},[120,1812,241],{"class":133},[120,1814,244],{"class":126},[120,1816,736],{"class":140},[120,1818,404],{"class":126},[120,1820,64],{"class":140},[120,1822,143],{"class":126},[120,1824,550],{"class":126},[120,1826,1827,1829,1831,1833,1835,1837,1840,1842],{"class":122,"line":529},[120,1828,1244],{"class":556},[120,1830,404],{"class":126},[120,1832,68],{"class":146},[120,1834,150],{"class":126},[120,1836,793],{"class":126},[120,1838,1839],{"class":796},"본문 문단이 페이지의 오른쪽 절반을 차지합니다.",[120,1841,793],{"class":126},[120,1843,172],{"class":126},[120,1845,1846],{"class":122,"line":534},[120,1847,895],{"class":126},[120,1849,1850],{"class":122,"line":539},[120,1851,1600],{"class":126},[19,1853,1854,1857,1858,1860,1861,1864],{},[23,1855,1856],{},"3 + 3","은 합쳐서 ",[23,1859,1221],{},"이므로, 썸네일 + 캡션 쌍이 왼쪽 절반에 정확히 자리잡습니다. 12는 2, 3, 4, 6으로 나누어떨어지므로 중첩 그리드는 거의 항상 평면으로 깔끔히 풀립니다. 중첩이 ",[23,1862,1863],{},"Col(8) > Row > Col(7) + Col(5)","였다면 풀리지 않지만 — 그 숫자들은 실제 종이 위에서도 의미가 없습니다. 풀 수 있는 평면 버전을 고르세요.",[14,1866,1868],{"id":1867},"왜-중첩이-없는가","왜 중첩이 없는가",[19,1870,1871,1872,1875,1876,1879,1880,1883],{},"평면 그리드는 폭을 한 번에 해결합니다. Row는 (페이지 폭 − 마진)의 백분율, 각 ",[23,1873,1874],{},"Col(span)","은 그 ",[23,1877,1878],{},"span / 12",". 끝. 재귀 없음, 폭-속-폭-속-폭 없음, 레이아웃 엔진에 부모 컨텍스트를 끌고 다니지 않습니다. ",[23,1881,1882],{},"grid.go","에서 컬럼 폭을 계산하는 줄은 말 그대로 한 줄입니다:",[111,1885,1887],{"className":113,"code":1886,"language":115,"meta":116,"style":116},"Width: document.Pct(float64(col.span) / float64(gridColumns) * 100),\n",[23,1888,1889],{"__ignoreMap":116},[120,1890,1891,1894,1897,1899,1901,1904,1906,1909,1911,1914,1916,1918,1920,1923,1926,1928,1931,1933,1935,1938],{"class":122,"line":123},[120,1892,1893],{"class":556},"Width",[120,1895,1896],{"class":126},":",[120,1898,401],{"class":556},[120,1900,404],{"class":126},[120,1902,1903],{"class":146},"Pct",[120,1905,150],{"class":126},[120,1907,1908],{"class":156},"float64",[120,1910,150],{"class":126},[120,1912,1913],{"class":556},"col",[120,1915,404],{"class":126},[120,1917,120],{"class":556},[120,1919,143],{"class":126},[120,1921,1922],{"class":126}," /",[120,1924,1925],{"class":156}," float64",[120,1927,150],{"class":126},[120,1929,1930],{"class":556},"gridColumns",[120,1932,143],{"class":126},[120,1934,244],{"class":126},[120,1936,1937],{"class":628}," 100",[120,1939,595],{"class":126},[19,1941,1942,1943,1946,1947,1946,1950,1953,1954,1956],{},"중첩을 허용하면 이 줄이 트리 탐색이 됩니다. ",[23,1944,1945],{},"Col(12)"," 안의 ",[23,1948,1949],{},"Col(8)",[23,1951,1952],{},"Col(6)","에서 그 ",[23,1955,1221],{},"이 부모 컬럼의 50%인지, Row의 50%인지, 페이지의 50%인지 결정해야 합니다. Bootstrap은 \"부모의 50%\"를 골랐고, 그걸 견딜 만하게 만들기 위해 브레이크포인트와 거터(gutter)를 더했습니다. PDF에는 브레이크포인트가 없습니다. PDF에는 유동 컨테이너도 없습니다. 중첩 문법을 빌려오면 풀 필요 없는 문제 셋을 들여오면서, 안 필요한 문법 설탕을 받는 셈입니다.",[14,1958,1960],{"id":1959},"그래도-문법적-지역성이-필요해요","\"그래도 문법적 지역성이 필요해요\"",[19,1962,1963,1964,1966],{},"이해합니다. 평면화의 단점은 개념적으로 한 묶음인 두 ",[23,1965,91],{},"가 편집을 거치며 소스에서 멀어진다는 점입니다. 작은 헬퍼로 메울 수 있습니다:",[111,1968,1970],{"className":113,"code":1969,"language":115,"meta":116,"style":116},"func card(page *template.PageBuilder, title, body string) {\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(12, func(c *template.ColBuilder) {\n            c.Text(title, template.Bold())\n        })\n    })\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(12, func(c *template.ColBuilder) {\n            c.Text(body)\n        })\n    })\n}\n",[23,1971,1972,2007,2031,2062,2085,2089,2093,2117,2147,2162,2166,2170],{"__ignoreMap":116},[120,1973,1974,1976,1979,1981,1983,1985,1987,1989,1991,1993,1996,1998,2001,2003,2005],{"class":122,"line":123},[120,1975,127],{"class":126},[120,1977,1978],{"class":146}," card",[120,1980,150],{"class":126},[120,1982,1187],{"class":133},[120,1984,244],{"class":126},[120,1986,736],{"class":140},[120,1988,404],{"class":126},[120,1990,95],{"class":140},[120,1992,160],{"class":126},[120,1994,1995],{"class":133}," title",[120,1997,160],{"class":126},[120,1999,2000],{"class":133}," body",[120,2002,157],{"class":156},[120,2004,143],{"class":126},[120,2006,550],{"class":126},[120,2008,2009,2011,2013,2015,2017,2019,2021,2023,2025,2027,2029],{"class":122,"line":175},[120,2010,721],{"class":556},[120,2012,404],{"class":126},[120,2014,91],{"class":146},[120,2016,728],{"class":126},[120,2018,731],{"class":133},[120,2020,244],{"class":126},[120,2022,736],{"class":140},[120,2024,404],{"class":126},[120,2026,741],{"class":140},[120,2028,143],{"class":126},[120,2030,550],{"class":126},[120,2032,2033,2035,2037,2039,2041,2044,2046,2048,2050,2052,2054,2056,2058,2060],{"class":122,"line":215},[120,2034,751],{"class":556},[120,2036,404],{"class":126},[120,2038,426],{"class":146},[120,2040,150],{"class":126},[120,2042,2043],{"class":628},"12",[120,2045,160],{"class":126},[120,2047,238],{"class":126},[120,2049,241],{"class":133},[120,2051,244],{"class":126},[120,2053,736],{"class":140},[120,2055,404],{"class":126},[120,2057,64],{"class":140},[120,2059,143],{"class":126},[120,2061,550],{"class":126},[120,2063,2064,2066,2068,2070,2072,2075,2077,2079,2081,2083],{"class":122,"line":261},[120,2065,784],{"class":556},[120,2067,404],{"class":126},[120,2069,68],{"class":146},[120,2071,150],{"class":126},[120,2073,2074],{"class":556},"title",[120,2076,160],{"class":126},[120,2078,804],{"class":556},[120,2080,404],{"class":126},[120,2082,823],{"class":146},[120,2084,826],{"class":126},[120,2086,2087],{"class":122,"line":310},[120,2088,832],{"class":126},[120,2090,2091],{"class":122,"line":340},[120,2092,895],{"class":126},[120,2094,2095,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115],{"class":122,"line":378},[120,2096,721],{"class":556},[120,2098,404],{"class":126},[120,2100,91],{"class":146},[120,2102,728],{"class":126},[120,2104,731],{"class":133},[120,2106,244],{"class":126},[120,2108,736],{"class":140},[120,2110,404],{"class":126},[120,2112,741],{"class":140},[120,2114,143],{"class":126},[120,2116,550],{"class":126},[120,2118,2119,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143,2145],{"class":122,"line":412},[120,2120,751],{"class":556},[120,2122,404],{"class":126},[120,2124,426],{"class":146},[120,2126,150],{"class":126},[120,2128,2043],{"class":628},[120,2130,160],{"class":126},[120,2132,238],{"class":126},[120,2134,241],{"class":133},[120,2136,244],{"class":126},[120,2138,736],{"class":140},[120,2140,404],{"class":126},[120,2142,64],{"class":140},[120,2144,143],{"class":126},[120,2146,550],{"class":126},[120,2148,2149,2151,2153,2155,2157,2160],{"class":122,"line":519},[120,2150,784],{"class":556},[120,2152,404],{"class":126},[120,2154,68],{"class":146},[120,2156,150],{"class":126},[120,2158,2159],{"class":556},"body",[120,2161,172],{"class":126},[120,2163,2164],{"class":122,"line":529},[120,2165,832],{"class":126},[120,2167,2168],{"class":122,"line":534},[120,2169,895],{"class":126},[120,2171,2172],{"class":122,"line":539},[120,2173,1148],{"class":126},[19,2175,2176,2177,2180],{},"지역성은 당신의 함수 안에 있지, API 안에 있지 않습니다. gpdf가 ",[23,2178,2179],{},"card","를 내장하지 않는 이유는, 세 줄이면 되고 당신이 직접 쓴 버전이 우리가 준비한 버전보다 당신의 문서에 더 잘 맞을 것이기 때문입니다.",[14,2182,2184],{"id":2183},"관련-레시피","관련 레시피",[2186,2187,2188,2196,2203],"ul",{},[2189,2190,2191,2195],"li",{},[35,2192,2194],{"href":2193},"/ko/blog/12-column-grid","gpdf의 12-컬럼 그리드는 어떻게 동작하는가?"," — 그리드 자체의 자세한 설명",[2189,2197,2198,2202],{},[35,2199,2201],{"href":2200},"/ko/blog/invoice-pdf-go-under-50-lines","Go로 50줄 안에 청구서 PDF 만들기"," — 평면 그리드로 문서 한 장 구성",[2189,2204,2205,2210],{},[35,2206,2209],{"href":2207,"rel":2208},"https://gpdf.dev/docs/guide/layout",[39],"Layout guide"," — Row / Col / Box 레퍼런스",[14,2212,2214],{"id":2213},"gpdf-써보기","gpdf 써보기",[19,2216,2217],{},"gpdf는 Go용 PDF 생성 라이브러리입니다. MIT 라이선스, 외부 의존성 없음, CJK 네이티브 지원.",[111,2219,2223],{"className":2220,"code":2221,"language":2222,"meta":116,"style":116},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","go get github.com/gpdf-dev/gpdf\n","bash",[23,2224,2225],{"__ignoreMap":116},[120,2226,2227,2229,2232],{"class":122,"line":123},[120,2228,115],{"class":140},[120,2230,2231],{"class":796}," get",[120,2233,2234],{"class":796}," github.com/gpdf-dev/gpdf\n",[19,2236,2237,2241,2242],{},[35,2238,2240],{"href":37,"rel":2239},[39],"⭐ GitHub에서 Star"," · ",[35,2243,2246],{"href":2244,"rel":2245},"https://gpdf.dev/ko/docs/quickstart",[39],"문서 읽기",[2248,2249,2250],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":116,"searchDepth":175,"depth":175,"links":2252},[2253,2254,2255,2256,2257,2259,2260,2261,2262,2263],{"id":16,"depth":175,"text":17},{"id":52,"depth":175,"text":53},{"id":99,"depth":175,"text":100},{"id":442,"depth":175,"text":443},{"id":1167,"depth":175,"text":2258},"관용 패턴 2 — 시각적 그룹화는 c.Box",{"id":1622,"depth":175,"text":1623},{"id":1867,"depth":175,"text":1868},{"id":1959,"depth":175,"text":1960},{"id":2183,"depth":175,"text":2184},{"id":2213,"depth":175,"text":2214},"할 수 없습니다. ColBuilder에 Row 메서드가 없고 gpdf의 12-컬럼 그리드는 의도적으로 평면입니다. 대체할 세 가지 관용 패턴을 소개합니다.",false,"md",{"name":2268,"totalTime":2269,"tools":2270,"steps":2272},"gpdf에서 중첩 Row-in-Col 레이아웃을 평면 그리드 관용 패턴으로 바꾸기","PT10M",[2271,505],"Go 1.22+",[2273,2276,2279,2282,2285],{"name":2274,"text":2275},"c.Row를 포기하기","ColBuilder에는 Row도 AutoRow도 없습니다. page.AutoRow와 page.Row는 PageBuilder 전용입니다. 에디터 자동완성에 c.Row가 보이지 않는다면 import 누락이 아니라 API의 대답입니다.",{"name":2277,"text":2278},"정말로 원하던 것을 분류하기","세 가지 경우가 거의 전부입니다. (1) 컬럼 경계를 공유하는 두 행 — 서브 레이아웃. (2) 카드 안의 헤더와 본문 — 시각적 그룹화. (3) 한 컬럼 안의 2×2 — 서브 그리드.",{"name":2280,"text":2281},"서브 레이아웃은 형제 AutoRow로","같은 Col 스팬을 가진 page.AutoRow를 두 개 쌓으면 행 폭이 같으므로 컬럼이 시각적으로 정렬됩니다. Row는 원래 독립 단위이기 때문에 평면화로 잃는 것은 없습니다.",{"name":2283,"text":2284},"그룹화는 c.Box로","c.Box(fn, WithBoxBorder, WithBoxBackground, WithBoxPadding)는 스타일이 적용된 컨테이너로 내부의 세로 스택을 감쌉니다. 서브 그리드가 아니라 Text / Image / Table을 세로로 쌓는 도구지만, 중첩 Row 요구의 80%는 이걸로 해결됩니다.",{"name":2286,"text":2287},"진짜 서브 그리드는 12 컬럼을 더 잘게 자르기","Col(6) 안에 6+6을 넣는 대신 처음부터 3+3+6으로 씁니다. 12는 2, 3, 4, 6으로 나누어떨어지므로 대부분의 중첩 패턴은 평면 한 줄로 깔끔하게 펼쳐집니다.",null,{},"/ko/blog/nest-row-in-col",{"title":5,"description":2264},"ko/blog/025.nest-row-in-col",[2294,2295,2296],"recipe","tutorial","templates","heCSam8tjGz-DkLVp2JWWBuCOogImK4nSaZVpDDu040",1779199026586]