{"id":39230,"date":"2024-11-02T03:38:41","date_gmt":"2024-11-02T03:38:41","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39230"},"modified":"2024-11-26T06:42:05","modified_gmt":"2024-11-26T06:42:05","slug":"pyqt%ea%b0%9c%eb%b0%9c%ea%b0%95%ec%a2%8c-css-%ec%8a%a4%ed%83%80%ec%9d%bc-%ec%8b%9c%ed%8a%b8%eb%a1%9c-%ec%9c%84%ec%a0%af-%ec%bb%a4%ec%8a%a4%ed%84%b0%eb%a7%88%ec%9d%b4%ec%a7%95","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39230\/","title":{"rendered":"PyQt\uac1c\ubc1c\uac15\uc88c, CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub85c \uc704\uc82f \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5"},"content":{"rendered":"

<\/p>\n

\uc624\ub298\ub0a0\uc758 GUI \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub514\uc790\uc778\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8(UI\/UX)\uc740 \uc810\uc810 \ub354 \uc911\uc694\ud574\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 PyQt \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c\ub294 \uc704\uc82f\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc27d\uac8c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 PyQt \uc704\uc82f\uc5d0 CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \uc801\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\uc758 \uc678\uad00\uc744 \uac1c\uc120\ud558\ub294 \ubc29\ubc95\uc744 \uc790\uc138\ud788 \uc124\uba85\ud558\uace0, \uc2e4\uc81c \uc608\uc81c\ub97c \ud1b5\ud574 \uc774\ub97c \uad6c\ud604\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub780?<\/h2>\n

CSS(\uce90\uc2a4\ucf00\uc774\ub529 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8)\ub294 \uc6f9 \ud398\uc774\uc9c0\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc815\uc758\ud558\ub294 \ub370 \uc0ac\uc6a9\ud558\ub294 \uc5b8\uc5b4\uc785\ub2c8\ub2e4. PyQt\uc5d0\uc11c\ub294 \uc774\ub7ec\ud55c CSS \uac1c\ub150\uc744 \uc801\uc6a9\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc704\uc82f\uc744 \uc2a4\ud0c0\uc77c\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \uc0ac\uc6a9\ud558\uba74 \uc0c9\uc0c1, \uae00\uaf34, \uc5ec\ubc31, \ud14c\ub450\ub9ac\uc640 \uac19\uc740 \ub2e4\uc591\ud55c \uc18d\uc131\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc73c\uba70, \uc704\uc82f\uc774\ub098 \ub808\uc774\uc544\uc6c3\uc758 \uc678\ud615\uc744 \uc27d\uac8c \ubcc0\uacbd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

PyQt\uc5d0\uc11c CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95<\/h2>\n

PyQt\uc5d0\uc11c CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 `setStyleSheet()` \uba54\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\uc5ec \uc704\uc82f\uc5d0 \uc801\uc6a9\ud560 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \ubb38\uc790\uc5f4 \ud615\ud0dc\ub85c \uc804\ub2ec\ud558\uba74 \ub429\ub2c8\ub2e4. \uc774 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub294 PyQt \uc704\uc82f\uc758 \uc5ec\ub7ec \uc18d\uc131\uc744 \uc124\uc815\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uae30\ubcf8\uc801\uc778 \uc0ac\uc6a9 \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/p>\n

\uc2a4\ud0c0\uc77c \uc2dc\ud2b8\uc758 \uae30\ubcf8 \uad6c\uc870<\/h3>\n
\n#widgetName {\n    property1: value1;\n    property2: value2;\n}\n    <\/code><\/pre>\n
\uc5ec\uae30\uc11c `#widgetName`\uc740 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc704\uc82f\uc758 \uc774\ub984\uc774\uace0, `property1`, `property2`\ub294 \uc801\uc6a9\ud560 \uc18d\uc131\uc785\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, QPushButton \uc704\uc82f\uc758 \ubc30\uacbd\uc0c9\uacfc \uae00\uc790\uc0c9\uc744 \ubcc0\uacbd\ud558\ub824\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uc791\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\nbutton {\n    background-color: #3498db;\n    color: white;\n}\n    <\/code><\/pre>\n
\uc608\uc81c 1: \uae30\ubcf8 PyQt \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/h2>\n
\uba3c\uc800, \uae30\ubcf8\uc801\uc778 PyQt \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud558\uace0, CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \uc801\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 PyQt \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uae30\ubcf8 \uad6c\uc870 \ubc0f \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \uc801\uc6a9\ud55c \uc608\uc81c\uc785\ub2c8\ub2e4.<\/p>\n
\nimport sys\nfrom PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout\n\nclass MyApp(QWidget):\n    def __init__(self):\n        super().__init__()\n        self.initUI()\n\n    def initUI(self):\n        self.setWindowTitle('\uae30\ubcf8 PyQt \uc560\ud50c\ub9ac\ucf00\uc774\uc158')\n        self.setGeometry(100, 100, 300, 200)\n\n        layout = QVBoxLayout()\n\n        button = QPushButton('\ud074\ub9ad\ud558\uc138\uc694!')\n        layout.addWidget(button)\n\n        self.setLayout(layout)\n\n        # CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8 \uc801\uc6a9\n        self.setStyleSheet('''\n            QWidget {\n                background-color: #f5f5f5;\n            }\n            QPushButton {\n                background-color: #3498db;\n                color: white;\n                font-size: 18px;\n                padding: 10px;\n                border-radius: 5px;\n            }\n            QPushButton:hover {\n                background-color: #2980b9;\n            }\n        ''')\n\nif __name__ == '__main__':\n    app = QApplication(sys.argv)\n    ex = MyApp()\n    ex.show()\n    sys.exit(app.exec_())\n    <\/code><\/pre>\n
\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c\ub294 PyQt5\ub97c \uc0ac\uc6a9\ud558\uc5ec \uae30\ubcf8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uace0, CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \uc801\uc6a9\ud558\uc5ec \uc704\uc82f\uc758 \uc678\uad00\uc744 \ubcc0\uacbd\ud558\uc600\uc2b5\ub2c8\ub2e4. \uc704\uc82f\uc758 \ubc30\uacbd\uc0c9, \ubc84\ud2bc\uc758 \uc0c9\uc0c1, \ud3f0\ud2b8 \ud06c\uae30, \ud328\ub529, \ud14c\ub450\ub9ac \ubc18\uacbd \ub4f1\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc704\uc82f \uc2a4\ud0c0\uc77c\uc758 \uc138\ubd80 \uc870\uc815<\/h2>\n
\uac01 \uc704\uc82f\uc5d0\uc11c \uc5b4\ub5bb\uac8c CSS \uc18d\uc131\uc744 \ud65c\uc6a9\ud558\uc5ec \ub354\uc6b1 \uc138\ubd80\uc801\uc73c\ub85c \uc2a4\ud0c0\uc77c\uc744 \uc870\uc815\ud560 \uc218 \uc788\ub294\uc9c0 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uc608\uc81c\uc5d0\uc11c\ub294 QPushButton \uc678\uc5d0\ub3c4 QLabel, QLineEdit\uacfc \uac19\uc740 \uc5ec\ub7ec \uc704\uc82f\uc5d0 CSS \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc608\uc81c 2: \ub2e4\uc591\ud55c \uc704\uc82f \uc2a4\ud0c0\uc77c \uc801\uc6a9<\/h3>\n
\nfrom PyQt5.QtWidgets import QApplication, QWidget, QLabel, QLineEdit, QVBoxLayout\n\nclass CustomStyleApp(QWidget):\n    def __init__(self):\n        super().__init__()\n        self.initUI()\n\n    def initUI(self):\n        self.setWindowTitle('\ub2e4\uc591\ud55c \uc704\uc82f \uc2a4\ud0c0\uc77c \uc801\uc6a9')\n        self.setGeometry(100, 100, 400, 300)\n\n        layout = QVBoxLayout()\n\n        label = QLabel('\uc774\uba54\uc77c \uc8fc\uc18c\ub97c \uc785\ub825\ud558\uc138\uc694:')\n        line_edit = QLineEdit()\n        button = QPushButton('\uc81c\ucd9c')\n\n        layout.addWidget(label)\n        layout.addWidget(line_edit)\n        layout.addWidget(button)\n\n        self.setLayout(layout)\n\n        # CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8 \uc801\uc6a9\n        self.setStyleSheet('''\n            QWidget {\n                background-color: #ffffff;\n                font-family: 'Arial';\n            }\n            QLabel {\n                font-size: 16px;\n                color: #34495e;\n            }\n            QLineEdit {\n                border: 2px solid #3498db;\n                padding: 5px;\n                border-radius: 4px;\n            }\n            QLineEdit:focus {\n                border: 2px solid #2980b9;\n            }\n            QPushButton {\n                background-color: #3498db;\n                color: white;\n                font-size: 18px;\n                border-radius: 4px;\n            }\n            QPushButton:hover {\n                background-color: #2980b9;\n            }\n        ''')\n\nif __name__ == '__main__':\n    app = QApplication(sys.argv)\n    ex = CustomStyleApp()\n    ex.show()\n    sys.exit(app.exec_())\n    <\/code><\/pre>\n
\uc704 \ucf54\ub4dc\uc5d0\uc11c \ubcf4\ub4ef\uc774, QLabel, QLineEdit \ubc0f QPushButton\uc758 \uc2a4\ud0c0\uc77c\uc744 \uac01\uac01 \uc9c0\uc815\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub354\uc6b1 \ub9e4\ub825\uc801\uc73c\ub85c \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. \ud2b9\ud788 QLineEdit\uc758 \ud3ec\ucee4\uc2a4 \uc0c1\ud0dc\uc5d0 \ub530\ub77c \ud14c\ub450\ub9ac \uc0c9\uc0c1\uc744 \ubcc0\ud654\uc2dc\ud0a4\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc2a4\ud0c0\uc77c \uc2dc\ud2b8\uc758 \uc0c1\uc18d\uacfc \uad6c\ubd84<\/h2>\n
\uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub294 \uc0c1\uc18d \uac1c\ub150\uc774 \uc801\uc6a9\ub418\uc5b4, \ubd80\ubaa8 \uc704\uc82f\uc5d0\uc11c \uc124\uc815\ud55c \uc2a4\ud0c0\uc77c\uc774 \uc790\uc2dd \uc704\uc82f\uc5d0\uc11c\ub3c4 \uc801\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \ud6a8\uc728\uc801\uc73c\ub85c \uc2a4\ud0c0\uc77c\uc744 \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ub54c\ub85c\ub294 \ud2b9\uc815 \uc704\uc82f\uc5d0\ub9cc \uc801\uc6a9\ub418\ub294 \uac1c\ubcc4\uc801\uc778 \uc2a4\ud0c0\uc77c\uc744 \uc815\uc758\ud574\uc57c\ud560 \ud544\uc694\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc0c1\uc18d \uc608\uc81c<\/h3>\n
\nclass InheritedStyleApp(QWidget):\n    def __init__(self):\n        super().__init__()\n        self.initUI()\n\n    def initUI(self):\n        self.setWindowTitle('\uc2a4\ud0c0\uc77c \uc0c1\uc18d \uc608\uc81c')\n        self.setGeometry(100, 100, 400, 300)\n\n        outer_layout = QVBoxLayout()\n        inner_widget = QWidget()\n        inner_layout = QVBoxLayout()\n\n        label = QLabel('\uc544\ub798\ub294 \uc790\uc2dd \uc704\uc82f\uc785\ub2c8\ub2e4:')\n        button = QPushButton('\uc790\uc2dd \ubc84\ud2bc')\n\n        inner_layout.addWidget(label)\n        inner_layout.addWidget(button)\n        inner_widget.setLayout(inner_layout)\n\n        outer_layout.addWidget(inner_widget)\n        self.setLayout(outer_layout)\n\n        # \ubd80\ubaa8 \uc704\uc82f \uc2a4\ud0c0\uc77c\n        self.setStyleSheet('''\n            QWidget {\n                background-color: #eaeaea;\n                font-family: 'Arial';\n                border: 1px solid #ccc;\n            }\n            QPushButton {\n                background-color: #3498db;\n                color: white;\n                border-radius: 4px;\n            }\n        ''')\n        # \uc790\uc2dd \uc704\uc82f \uc2a4\ud0c0\uc77c\n        inner_widget.setStyleSheet('''\n            QWidget {\n                background-color: #ffffff;\n                border: 1px solid #3498db; \/* \uc790\uc2dd \uc704\uc82f\uc758 \ud14c\ub450\ub9ac *\/\n            }\n            QLabel {\n                font-size: 14px;\n                color: #555;\n            }\n        ''')\n\nif __name__ == '__main__':\n    app = QApplication(sys.argv)\n    ex = InheritedStyleApp()\n    ex.show()\n    sys.exit(app.exec_())\n    <\/code><\/pre>\n
\uc774 \uc608\uc81c\uc5d0\uc11c\ub294 \ubd80\ubaa8 \uc704\uc82f\uacfc \uc790\uc2dd \uc704\uc82f\uc5d0 \uc11c\ub85c \ub2e4\ub978 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\uc600\uc2b5\ub2c8\ub2e4. \uc790\uc2dd \uc704\uc82f\uc740 \ubd80\ubaa8 \uc704\uc82f\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc0c1\uc18d \ubc1b\uc9c0\ub9cc, \ub0b4\ubd80\uc5d0\uc11c \ubcc4\ub3c4\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc801\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ubd80\uac00\uc801\uc778 \uc2a4\ud0c0\uc77c \uc18d\uc131\ub4e4<\/h2>\n
PyQt\uc758 CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub294 \ub2e4\uc591\ud55c \uc18d\uc131\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucd94\uac00 \uc18d\uc131\ub4e4\uc785\ub2c8\ub2e4.<\/p>\n
\ubc84\ud2bc\uacfc \ub9c1\ud06c\uc758 \uc2a4\ud0c0\uc77c<\/h3>\n
\nQPushButton {\n    padding: 10px; \/* \uc5ec\ubc31 \uc124\uc815 *\/\n    border: none; \/* \ud14c\ub450\ub9ac \uc5c6\uc560\uae30 *\/\n}\n\nQPushButton:pressed {\n    background-color: #2980b9; \/* \ud074\ub9ad \uc0c1\ud0dc \uc0c9\uc0c1 *\/\n}\n\na {\n    color: #3498db; \/* \ub9c1\ud06c \uc0c9\uc0c1 *\/\n    text-decoration: none; \/* \ubc11\uc904 \uc5c6\uc560\uae30 *\/\n}\na:hover {\n    text-decoration: underline; \/* \ub9c8\uc6b0\uc2a4 \uc624\ubc84 \uc2dc \ubc11\uc904 *\/\n}\n    <\/code><\/pre>\n
\uc704\uc640 \uac19\uc774 \ubc84\ud2bc\uc758 \uc0c1\ud0dc\uc5d0 \ub530\ub77c \ub2e4\ub974\uac8c \uc2a4\ud0c0\uc77c\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ub2e4\uc591\ud55c \uc18d\uc131\uc744 \uc870\ud569\ud558\uc5ec \ud6e8\uc52c \ub354 \uc138\ub828\ub41c UI\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uacb0\ub860<\/h2>\n
CSS \uc2a4\ud0c0\uc77c \uc2dc\ud2b8\ub97c \ud1b5\ud574 PyQt \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc704\uc82f\uc744 \uc190\uc27d\uac8c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc624\ub298 \ubc30\uc6b0\uc2e0 \ub0b4\uc6a9\ub4e4\uc744 \ud1b5\ud574 \ub354\uc6b1 \ub9e4\ub825\uc801\uc774\uace0 \uc0ac\uc6a9\ud558\uae30 \ud3b8\ub9ac\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9cc\ub4e4 \uc218 \uc788\ub294 \ub2a5\ub825\uc744 \ud0a4\uc6b0\uc2dc\uae38 \ubc14\ub78d\ub2c8\ub2e4. PyQt\uc758 \ubb34\ud55c\ud55c \uac00\ub2a5\uc131\uc744 \ud65c\uc6a9\ud558\uc5ec \ub3c5\ucc3d\uc801\uc778 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uc138\uc694!<\/p>\n
\ucd94\uac00 \uc790\ub8cc<\/h2>\n
PyQt \uad00\ub828 \uc790\ub8cc\ub294 \uacf5\uc2dd \ubb38\uc11c \ubc0f \ucee4\ubba4\ub2c8\ud2f0\uc5d0\uc11c \ucc3e\uc544\ubcf4\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucd94\uac00\uc801\uc778 \uc608\uc81c\ub098 \uc2a4\ud0c0\uc77c \uc2dc\ud2b8 \ubb38\ubc95\uc5d0 \ub300\ud55c \uad6c\uccb4\uc801\uc778 \ub0b4\uc6a9\uc740 \ub2e4\uc74c \ub9c1\ud06c\ub97c \ud1b5\ud574 \ud655\uc778\ud558\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n