flex-flow: flex-direction flex-wrap ; Q20. The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of the two properties separated by a space. For example, you can use flex-flow: row wrap to set rows and wrap them. Try using flex-flow to repeat the previous level. #pond..
/* I found it should be written my post what I learned for fully understanding so I am going to talk about the box model of CSS in Korean. Hope you can also get my point. 😎 */ HTML웹페이지 문서의 골격을 만들고, CSS로 스타일링을 줄 때 우리는 박스모델이라는 개념을 접하게 된다. 하나의 콘텐츠가 웹 페이지 내부에 위치하게 될때, 하나의 콘텐츠는 박스모델을 갖는다. 박스모델은 4개의 박스로 구성이 되어있는데, 콘텐츠박스 > 패딩박스 > 보더박스 > 마진박스로 감싸진다. 박스를 만들 때 주의점이 하나 있다면, 원래 div박스에 width 값을 주면 패딩과 보더를 고려..
In CSS we broadly have two types of boxes - block boxes and inline boxes. These characteristics refer to how the box behaves in terms of page flow and in relation to other boxes on the page. Boxes also have an inner display type and an outer display type. First, we will explain what we mean by block box and inline box. We will then explain what is meant by an inner and outer display type. If a b..
7 different folders for partial Sass files, and 1 main Sass file to import all other files into a compiled CSS stylesheet. The 7 folders base/ basic product definitions components/ one file for each component layout/ define the overall layout of the project pages/ styles for specific pages of the project themes/ want to implement different visual themes abstract/ put code that doesn't output any..
To set the font-size to pixels is very bad. body { font-size:10px; } /*very bad*/ for example, when they have bad sight and cannot see so good, then some people actually increase the default font size of their browser. The problem is that by doing so we actually override the browser font size setting that the user can manually change in the settings, and many people actually do that. Now if we s..
Every CSS property must have a value. Is there a cascaded value? -if yes, Specified value == Cascaded value -if not, Is the property inherited?(specific to each property) and if yes, Specified value == Computed value of parent element ∴ This is Inheritance! if not, Specified value == Initial value(specific to each property) like padding and margin -> not inherited. be extremely impracticable. In..
#1 Declaration ① Declared value ② Cascaded value ③ Specified value ④ Computed value ⑤ Used value (final calculation) ⑥ Actual value root font-size -> 16px(Browser default) section font-size -> 1.5rem -> computed: 16px * 1.5 = 24px(Inheritance) #2 Inheritance Example(x) How to convert to pixels Result on pixels % (font) 150% x% * parent's computed font-size(16px) 24px % (length) 10% x% * parent's..
This is so extremely important because getting started with CSS is actually very easy but really knowing what's going on behind scenes is completely different, and it's really not as easy as getting started. [Specificity] 1. inline styles 2. IDs 3. classes, pseudo-classes, attribute 4. Elements, pseudo-elements (Inline, IDs, Classes, Elements) CSS declarations marked with !important have the hig..
그동안 헷갈렸던 px, %, rem, em에 대해, 각 단위들이 어떻게 픽셀(px)로 변환되는지 살펴본다. See the Pen px, %, em, rem by shinhyejin (@clara-shin) on CodePen. # 단위변환 (단, x(%)는 px로 변환하려는 현재 값) font(%) = 부모의 font-size(px) * x(%) lengths(%) = 부모의 lengths(width or height)(px) * x(%) font(em) = 부모의 font-size(px) * x(em) lengths(em) = 스타일을 지정한 해당요소의 font-size(px)[각주:1] * x(em) rem = root(html)의 font-size(px) * x(rem) font(em), lengt..
