Web/CSS10 [CSS] Specificity Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors. Calculating Universal Selectors, Combinators, and Negation Selector : No points Universal selector (*), combinators (+, >, ~, ' ', ||) and negation psuedo.. 2021. 12. 7. [CSS] SASS/SCSS SASS is a Syntactically Awesome Style Sheets. It makes CSS to a programming language. SCSS is a Sassy CSS. Currently, the SCSS's syntax is mainly used. Although there are other projects with similar functions, SCSS is recently a trend to use as a standard. In this posting, I will explain the usage of the SCSS. I'll post how to compile SCSS and use it in the projects next time. You can use it in .. 2020. 9. 6. [CSS] Gridbox Grid layout enables an author to align elements into columns and rows. Sometimes flexbox is hard to construct the layout we want. If you use a gridbox, you can easily make a layout like a table. Let's make a default code. 1 2 3 4 5 .container { width: 600px; height: 600px; border: 3px solid black; display: grid; } .box { width: 100px; height: 100px; font-size: 30px; display: flex; justify-conten.. 2020. 9. 3. [CSS] Margin / Border / Padding About 22 years ago, when I first learned CSS, this concept was difficult to me. I will explain this for someone who is unfamiliar with this concept like me at that time. Overview First of all, I will show you a figure. This is a concept figure of margin, border and padding. The inner area including the border is the size of the element. However the size of element expand with border width, so yo.. 2020. 8. 30. [CSS] Flexbox Flexbox is the commonly-used name for the CSS flexible box layout model. Flexbox displays a single dimension as a row or a column. flex is a new value added to the CSS display property. Along with inline-flex it causes the elements that it applies to become a flex container, and the element's children to each become a flex item. I will explain the flexbox through the example. This is a default c.. 2020. 8. 28. [CSS] BEM (Block Element Modifier) Overview BEM is a methodology that helps you to create reusable components and code sharing in web FE development. CSS codes developed without any structure or naming conventions leads to an unmaintainable in the long term. The advantages of BEM are modularity, reusability, and structure. So if we follow the BEM method, it allows us to solve these problems. Block A standalone entity that is mean.. 2020. 8. 28. [CSS] Pseudo Classes and Pseudo Elements Not all elements have a pseudo classes and pseudo elements. Therefore, you have to carefully use it. Pseudo Classes :active This represents an element that is being activated by the user. :checked This represents any radio, checkbox, or option element that is checked or toggled to an on state. :first-child This represents the first element among a group of sibling elements. :focus This represent.. 2020. 8. 27. [CSS] Combinators Descendant Combinator The descendant combinator uses space. It selects nodes that are descendants of the first selected element. This is a usage example. div span { color: teal; } Child Combinator The child combinator uses >. It selects a node that is direct children of the first element. This is a usage example. ul > li { font-weight: 700; } Adjacent Sibling Combinator The adjacent sibling comb.. 2020. 8. 26. [CSS] Basic / Grouping Selector Basic Selectors Universal Selector The * selects all elements. We use this selector for applying some property globally. Here is the usage. * { margin: 0; } Type Selector The type selector selects all elements that have the specified HTML tag name. Here is the usage. div { width: 10px; } span { font-size: 12px; } h1 { color: teal; } ID Selector The ID selector selects an element that has the id .. 2020. 8. 24. [CSS] Syntax The basic syntax of CSS is like below. selector { property: value; } The selector selects which element of HTML tag. The CSS block is specified by { }. The property means which property is applied to the selected tag. The value means what value is applied to the specified property. The : has to be located between property and value. The ; has to be located after the value. This is the example. d.. 2020. 8. 24. 이전 1 다음
