{"id":2901,"date":"2025-11-27T12:47:41","date_gmt":"2025-11-27T03:47:41","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=2901"},"modified":"2025-11-27T13:36:33","modified_gmt":"2025-11-27T04:36:33","slug":"qt-qml-anchors","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/11\/27\/qt-qml-anchors\/","title":{"rendered":"[QT QML] \uc575\ucee4 \/ Anchor"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb QT QML\uc5d0\uc11c \uc575\ucee4\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.
Here is a description of anchors in QT QML.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb QML\uc5d0\uc11c \uac01 \uc694\uc18c\ub97c \ubc30\uce58\ud558\uae30 \uc704\ud574\uc11c \ub808\uc774\uc544\uc6c3\uacfc \uc575\ucee4\ub97c \uc0ac\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can use layouts and anchors to position each element in QML.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb UI \uc694\uc18c\ub07c\ub9ac \uad00\uacc4 \uae30\ubc18\uc73c\ub85c \ubc30\uce58\ud560 \uacbd\uc6b0\uc5d0 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
Used when arranging UI elements based on their relationships.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb\uc575\ucee4\ub294 \uc544\ub798\uc640 \uac19\uc740 \uc18d\uc131\ub4e4\uc774 \uc788\uc2b5\ub2c8\ub2e4.
Anchors have the following properties:<\/p>\n\n\n\n

\uc18d\uc131 \/ Attribute<\/th>\uc124\uba85 \/ Explanation<\/th><\/tr><\/thead>
anchors.left<\/code><\/td>\uc67c\ucabd \uc815\ub82c \/ left align<\/td><\/tr>
anchors.right<\/code><\/td>\uc624\ub978\ucabd \uc815\ub82c \/ right align<\/td><\/tr>
anchors.top<\/code><\/td>\uc704\ucabd \uc815\ub82c \/ top alignment<\/td><\/tr>
anchors.bottom<\/code><\/td>\uc544\ub798\ucabd \uc815\ub82c \/ bottom alignment<\/td><\/tr>
anchors.horizontalCenter<\/code><\/td>\uc218\ud3c9 \uc911\uc559 \uc815\ub82c \/ horizontal center alignment<\/td><\/tr>
anchors.verticalCenter<\/code><\/td>\uc218\uc9c1 \uc911\uc559 \uc815\ub82c \/ vertical center alignment<\/td><\/tr>
anchors.centerIn<\/code><\/td>\uac00\ub85c+\uc138\ub85c \uc804\uccb4 \uc911\uc559 \uc815\ub82c \/ Center all horizontal and vertical alignment<\/td><\/tr>
anchors.fill<\/code><\/td>\uaf49 \ucc44\uc6b0\uae30 \/ fill up<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc0ac\uc6a9\ubc95 \/ Usage<\/p>\n\n\n\n

\u2714\ufe0f \uc544\uc774\ub514.\uc18d\uc131 \/ id.attribute<\/p>\n\n\n\n

— \uc544\ub798\uc758 \ucf54\ub4dc\ucc98\ub7fc id\ub294 \uac01 \uc694\uc18c\ub97c \uad6c\ubcc4\ud558\uae30 \uc704\ud55c \uc774\ub984\uc73c\ub85c id:”\uc774\ub984”\uc73c\ub85c \uc124\uc815 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
As in the code below, id can be set as id:”name” to distinguish each element.<\/p>\n\n\n\n

— \ub2f9\uc5f0\ud788 id\uc774\ub984\uc740 \uc911\ubcf5\ub418\uc5b4\uc11c\ub294 \uc548\ub418\uba70 \uace0\uc720\ud574\uc57c \ud569\ub2c8\ub2e4.
Of course, the ID name must not be duplicated and must be unique.<\/p>\n\n\n\n

        Text {\n            id:anchorTxt1\n            text: \"Anchor1!\"\n            anchors.centerIn: parent\n            font.pixelSize: 24\n            color: \"black\"\n        }<\/code><\/pre>\n\n\n\n
— \uc704\uc758 \uc544\uc774\ub514\ub97c \uc2e4\uc81c\ub85c\ub294 \uc544\ub798\ucc98\ub7fc \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
The ID above is actually used as follows:<\/p>\n\n\n\n
anchors.top : anchorTxt1.bottom<\/code><\/pre>\n\n\n\n
\u2714\ufe0f\ubd80\ubaa8\uc544\uc774\ud15c.\uc18d\uc131 \/ parent.attribute<\/p>\n\n\n\n
— QML\uc5d0\uc11c parent\ub294 \ud604\uc7ac \uc694\uc18c\ub97c \uac10\uc2f8\uace0 \uc788\ub294 \ubc14\ub85c \uc704 \uc694\uc18c\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4.
In QML, parent means the element immediately above the current element.<\/p>\n\n\n\n
— \uc544\ub798\uc758 \ucf54\ub4dc\uc5d0\uc11c parent\ub780 Rectangle\uc758 id:rt\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4.
In the code below, parent refers to the id:rt of the Rectangle.<\/p>\n\n\n\n
        Text {\n            id:anchorTxt2\n            text: \"Anchor2!\"\n            anchors.left: parent.left\n            anchors.top: parent.top\n            font.pixelSize: 24\n            color: \"black\"\n        }<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc8fc\uc758 \uc0ac\ud56d \/ Caution<\/p>\n\n\n\n
\u2714\ufe0fanchors.horizontalCenter<\/code>\uc640 anchors.verticalCenter<\/code>\ub97c \uc911\uc559 \uc815\ub82c \uc2dc\ud0a4\uba74 
anchors.centerIn\uacfc \uae30\ub2a5\uc774 \uac19\uc2b5\ub2c8\ub2e4.
Centering with anchors.horizontalCenter and anchors.verticalCenter has the same functionality as anchors.centerIn.<\/p>\n\n\n\n
\u2714\ufe0f\uadf8\ub7f0\ub370 anchors.centerIn\uc774 \uc801\uc6a9\ub41c UI\uc694\uc18c\uc5d0 anchors.horizontalCenter<\/code>\uc640 anchors.verticalCenter<\/code>\ub97c \uc801\uc6a9\ud558\uba74 \uc18d\uc131 \ucda9\ub3cc\uc774 \uc77c\uc5b4\ub098\uc11c UI\uc694\uc18c\uac00 \uc81c\ub300\ub85c\ubc30\uce58 \ub418\uc9c0 \uc54a\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
However, if you apply anchors.horizontalCenter and anchors.verticalCenter to a UI element to which anchors.centerIn has been applied, a property conflict may occur, causing the UI element to not be positioned properly.<\/p>\n\n\n\n
\u2714\ufe0f \uc18d\uc131 \ucda9\ub3cc\uc774 \ubc1c\uc0dd\ud558\uc9c0 \uc54a\uac8c \uc704\uc758 \uc0ac\ud56d\uc744 \uace0\ub824\ud574\uc11c \uc0ac\uc6a9\ud558\ub294\uac8c \uc911\uc694\ud569\ub2c8\ub2e4.
It is important to use it while considering the above to avoid attribute conflicts.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ucf54\ub4dc \/ Code<\/p>\n\n\n\n
import QtQuick\n\nWindow {\n    width: 640\n    height: 480\n    visible: true\n    title: qsTr(\"Anchor\") \/\/ window title\n\n    Rectangle {\n        id:rt\n        color: \"lightgreen\"\n\n        \/\/ \ubd80\ubaa8(Window)\uc5d0 \uaf49 \ucc44\uc6b0\uae30\n        \/\/ QML\uc5d0\uc11c parent\ub294 \ud604\uc7ac \uc694\uc18c\ub97c \uac10\uc2f8\uace0 \uc788\ub294 \ubc14\ub85c \uc704 \uc694\uc18c\n\n        \/\/ Fill the parent (Window)\n        \/\/ In QML, parent is the element immediately above the current element.\n\n        anchors.fill: parent\n\n        \/\/ \uac00\uc6b4\ub370 \uc815\ub82c \/ center aligned\n        Text {\n            id:anchorTxt1\n            text: \"Anchor1!\"\n            anchors.centerIn: parent\n            font.pixelSize: 24\n            color: \"black\"\n        }\n        \/\/ \uc88c\uc0c1\ub2e8 \/ Top-Left\n        Text {\n            id:anchorTxt2\n            text: \"Anchor2!\"\n            anchors.left: parent.left\n            anchors.top: parent.top\n            font.pixelSize: 24\n            color: \"black\"\n        }\n        \/\/ \uc6b0\uc0c1\ub2e8 \/ Top-Right\n        Text {\n            id:anchorTxt3\n            text: \"Anchor3!\"\n            anchors.right:parent.right\n            anchors.top:parent.top\n            font.pixelSize: 24\n            color: \"black\"\n        }\n        \/\/ \uc88c\ud558\ub2e8 \/ Bottom-Left\n        Text {\n            id:anchorTxt4\n            text:\"Anchors4!\"\n            anchors.left:parent.left\n            anchors.bottom:parent.bottom\n            font.pixelSize: 24\n            color: \"black\"\n        }\n        \/\/ \uc6b0\ud558\ub2e8 \/ Bottom-Right\n        Text {\n            id:anchorTxt5\n            text:\"Anchor5!\"\n            anchors.right:rt.right \/\/ id\n            anchors.bottom:parent.bottom\n            font.pixelSize: 24\n            color: \"black\"\n        }\n\n        Text {\n            id:anchorTxt6 \/\/ id\n            text:\"Anchor6!\"\n            anchors.top : anchorTxt1.bottom\n\n            \/\/ horizontalCenter : \uc218\ud3c9\uc911\uc2ec\uc120 \/ horizontal center line\n            \/\/ verticalCenter : \uc218\uc9c1 \uc911\uc2ec\uc120 \/ vertical center line\n\n            \/\/ Anchor1 \uae30\uc900 \uc911\uc559 \uc815\ub82c \/ Center alignment based on Anchor1\n            anchors.horizontalCenter: anchorTxt1.horizontalCenter\n            font.pixelSize:24\n            color:\"black\"\n        }\n\n        \/\/ Anchor6\uc758 \uae30\uc900\uc740 Rectangle\uc774 \uc544\ub2c8\ub77c Anchor1 \ud14d\uc2a4\ud2b8(anchorTxt1)\n        \/\/ The reference for Anchor6 is not Rectangle, but Anchor1 text (anchorTxt1)\n        Text {\n            id:anchorTxt7\n            text:\"Anchor7!\"\n            anchors.top : anchorTxt6.bottom\n            anchors.left : anchorTxt6.right\n            font.pixelSize:24\n            color:\"black\"\n        }\n    }\n\n}\n<\/code><\/pre>\n\n\n\n
\ud83d\udc49\ud83c\udffb\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb QT QML\uc5d0\uc11c \uc575\ucee4\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.Here is a description of anchors in QT QML. \ud83d\udc49\ud83c\udffb QML\uc5d0\uc11c \uac01 \uc694\uc18c\ub97c \ubc30\uce58\ud558\uae30 \uc704\ud574\uc11c \ub808\uc774\uc544\uc6c3\uacfc \uc575\ucee4\ub97c \uc0ac\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.You can use layouts and anchors to position each element in QML. \ud83d\udc49\ud83c\udffb UI \uc694\uc18c\ub07c\ub9ac \uad00\uacc4 \uae30\ubc18\uc73c\ub85c \ubc30\uce58\ud560 \uacbd\uc6b0\uc5d0 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.Used when arranging UI elements based on their relationships. \ud83d\udc49\ud83c\udffb\uc575\ucee4\ub294 \uc544\ub798\uc640 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,1],"tags":[],"class_list":["post-2901","post","type-post","status-publish","format-standard","hentry","category-qt","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2901"}],"version-history":[{"count":14,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2901\/revisions"}],"predecessor-version":[{"id":2917,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2901\/revisions\/2917"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}