css6 [TIL] 20201124 CSS Frameworks: Bootstrap Bootstrap CSS Framework Framework : Helps speed up the process. Bootstrap It helps developers quickly create nice looking, responsive modern websites so we don't have to write a smuch CSS. Has components(ex. nav bar, buttons...) and Grid System(responsive pre-set grid). Including Bootstrap Can be included using CDN (no download needed) In real production application, it would be more stable to d.. 2020. 11. 24. [TIL] 20201123 Responsive CSS & Flexbox Flexbox A one-dimensional layout method for laying out items in rows or columns. Recent addition to CSS, included to address common layout frustrations. Flebox allows us to distribute space dynamically across elements of an unknown size, hence the term "flex". To Start Using Flexbox Include 'display: flex'. The Flex Model default: flex-direction Values row(default, left to right) row-reverse(rig.. 2020. 11. 23. [TIL] 20201121 Other Assorted Useful CSS Properties Opacity & The Alpha Channel Alpha Channel rgba (r, g, b, a) r, g, b : value from 0 to 255 a : value from 0 to 1 (0 is transparent, 1 is opique) Hex color #rrggbbaa a : value from 00 to ff (0 is transparent, ff is opique) Affects only the background-color, when applied. opacity value from 0 to 1 Applys to the entire element, including text and button. The Position Property Sets how an element is .. 2020. 11. 21. [TIL] 20201116 The CSS Box Model Box Model Every element in CSS is a box. Width & Height /*example*/ div { width: 200px; height: 200px; } Border Properties Individual Properties border-width: controls the thickness of the border. border-color: controls the color of the border. border-style: controls the line style - dashed, solid, etc. border (shorthand) #one { border-width: 5px; border-color: black; border-style: solid; box-si.. 2020. 11. 16. [TIL] 20201113 The World of CSS Selectors Universal Selectors Selects every possible element on the page * { color: black; } Element Selectors Selects a specific kind of elements on the page button { font-size: 30px; } // choose both h1 and h2 h1, h2 { color: olive; } ID Selectors ID attributes can be used as selectors to single out an element ID is a unique identifier for a single element. #id { color: olive; } Class Selectors Class : .. 2020. 11. 13. [TIL] 20201109 CSS: The Very Basics What is CSS? CSS Cascading Style Sheets A language for describing how documents are presented visually - how they are arranged and styled. Allows us to style and manipulate the visual representation of the HTML content on the page. CSS Rules Almost everything done in CSS follows the basic pattern: selector { property: value; } //examples h1 { color: purple; } img { width: 100px; height: 200px; }.. 2020. 11. 9. 이전 1 다음
