[CSS] #1-2 박스모델과 box-sizing
·
Frontend/HTML, CSS
/* 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 값을 주면 패딩과 보더를 고려..
[CSS] #1 The box model
·
Frontend/HTML, CSS
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..
[HTML] #1 Hypertext Markup Language
·
Frontend/HTML, CSS
- 자료의 구조를 표현하기 위한 언어, 자료, Document- 세상에 존재하는 모든 웹 페이지는 HTML로 작성    더보기더보기What is HTML?HTML (Hypertext Markup Language) is a markup language that defines the structure of your content.
Web APIs 란?
·
Frontend/JavaScript
APIs란? Application Programming Interface 이 중에서 WebAPIs는. Javascript 언어 자체에 포함되어 있는 아이가 아니고, 브라우저가 제공하는, 브라우저가 이해할 수 있는 함수들 이다. 예를 들어, console API (MDN) Front-end ------요청(req)-----> Back-end (Server)
[Sass] Architect : the 7 - 1 pattern
·
Frontend/HTML, CSS
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 definitionscomponents/one file for each componentlayout/define the overall layout of the projectpages/styles for specific pages of the projectthemes/want to implement different visual themesabstract/put code that doesn't output any CSS such ..
[css] the problem of setting the font-size to pixels of body element
·
Frontend/HTML, CSS
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..
[css] Inheritance In CSS
·
Frontend/HTML, CSS
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..
[css] How UNITS are converted from relative to absolute(px)
·
Frontend/HTML, CSS
#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..
[css] How CSS Works? and what is Specificity?
·
Frontend/HTML, CSS
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..