The Box Model
-
Width and height — specifies the width and height of the content area.
-
Padding — specifies the amount of space between the content area and the border.
-
Border — specifies the thickness and style of the border surrounding the content area and padding.
-
Margin — specifies the amount of space between the border and the outside edge of the element.
Height and Width
Borders
A border is a line that surrounds an element, like a frame around a painting.
Borders can be set with a specific width, style, and color.
- width — The thickness of the border. A border’s thickness can be set in pixels or with one of the following keywords: thin, medium, or thick.
- style — The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid.
- color — The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords.
In the example above, the border has a width of 3 pixels, a style of solid and a color of coral.
All three properties are set in one line of code.
The default border is medium none color
In this example, the border style is set to solid and the color is set to coral.
The width is not set, so it defaults to medium.
Border Radius
*둥글게 만들기
Thanks to CSS, a border doesn’t have to be square.
You can modify the corners of an element’s border box with the border-radius property.
You can create a border that is a perfect circle by setting the radius equal to the height of the box, or to 100%.
Padding I
The space between the contents of a box and the borders of a box is known as padding.
The padding property is often used to expand the background color and make content look less cramped.
p.content-header { border: 3px solid coral; padding: 10px; }
텍스트와 경계선 사이의 간격을 10px로 설정한 것
- padding-top
- padding-right
- padding-bottom
- padding-left
Each property affects the padding on only one side of the box’s content, giving you more flexibility in customization.
p.content-header { border: 3px solid fuschia; padding-bottom: 10px; }
이 경우에는, 아래 부분만 컨텐츠와 경계선 사이의 간격을 10px로 준 것
Padding II
how much padding there should be on each side of the content in a single declaration?
In the example above, the four values 6px 11px 4px 9px correspond to the amount of padding in a clockwise rotation.
In order, it specifies the amount of padding on the top (6 pixels), right (11 pixels), bottom (4 pixels), and left (9 pixels) sides of the content.
When using this implementation of the padding property,
we must specify a padding value for all four sides of the element.
The first value, 5px, sets the padding value for the top and bottom sides of the content.
The second value, 10px, sets the padding value for the left and right sides of the content.
Margins I
Margin refers to the space directly outside of the box.
The margin property is used to specify the size of this space.
The code in the example above will place 20 pixels of space on the outside of the paragraph’s box on all four sides. This means that other HTML elements on the page cannot come within 20 pixels of the paragraph’s border.
- rgin-top
- margin-right
- margin-bottom
- margin-left
(이건 padding 때와 마찬가지로 customization ~)
Margins II
Auto
The margin property also lets you center content. However, you must follow a few syntax requirements
margin의 기능으로 '가운데 정렬'을 해주는게 있는데~ 따라야할 규칙이 존재!
margin: 0 auto;
cf) padding: 0 autio; 는 가운데 정렬 안 됨!
a width must be set for that element.
Otherwise, the width of the div will be automatically set to the full width of its containing element, like the <body>, for example. It’s not possible to center an element that takes up the full width of the page.
In the example above, the width of the div is set to 400 pixels, which is less than the width of most screens. This will cause the div to center within a containing element that is greater than 400 pixels wide.
Margin Collapse
(마진 상쇄/마진 겹침 현상 : 마진이 겹치게되면 상쇄 현상이 일어난다는 것)
CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해
마진 상쇄는 흔히 '마진 겹침 현상'이라고도 불립니다. (혹자는 '마진 빡침 현상'이라고도 합니다) 하지만 인과관계로 볼 때, 마진이 겹치게 되면 상쇄가 일어나기 때문에 영미권에서는 '마진 상쇄(Margin collapsing)'로 부르고 있습니다. 다음은 MDN과 W
velog.io
horizontal 은 위에 보면 알겠지만 10 + 10으로 add가 되는데,
vertical 은 위에서 보듯 10 + 30 = 40이 아니라 다른 규칙이 적용됨.
Unlike horizontal margins, vertical margins do not add. I
nstead, the larger of the two vertical margins sets the distance between adjacent elements.
It may be helpful to think of collapsing vertical margins as a short person trying to push a taller person. The tall person has longer arms and can easily push the short person, while the person with short arms cannot reach the person with long arms.
Minimum and Maximum Height and Width
Because a web page can be viewed through displays of differing screen size, the content on the web page can suffer from those changes in size.
To avoid this problem, CSS offers two properties that can limit how narrow or how wide an element’s box can be sized to.
- min-width — this property ensures a minimum width of an element’s box.
- max-width — this property ensures a maximum width of an element’s box.
In the example above,
the width of all paragraphs will not shrink below 300 pixels, nor will the width exceed 600 pixels.
You can also limit the minimum and maximum height of an element.
- min-height — this property ensures a minimum height for an element’s box.
- max-height — this property ensures a maximum height of an element’s box.
Overflow
Sometimes, (these) components result in an element that is larger than the parent’s containing area.
The overflow property controls what happens to content that spills, or overflows, outside its box.
It can be set to one of the following values:
- hidden - when set to this value, any content that overflows will be hidden from view.
- scroll - when set to this value, a scrollbar will be added to the element’s box so that the rest of the content can be viewed by scrolling.
- visible - when set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value.
Resetting Defaults
All major web browsers have a default stylesheet they use in the absence of an external stylesheet.
These default stylesheets are known as user agent stylesheets. In this case, the term “user agent“ is a technical term for the browser.
User agent stylesheets often have default CSS rules that set default values for padding and margin.
This affects how the browser displays HTML elements, which can make it difficult for a developer to design or style a web page.
Many developers choose to reset these default values so that they can truly work with a clean slate.
The code in the example above resets the default margin and padding values of all HTML elements.
It is often the first CSS rule in an external stylesheet.
Visibility
Elements can be hidden from view with the visibility property.
The visibility property can be set to one of the following values:
- hidden — hides an element.
- visible — displays an element.
In the example above, the list item with a class of future will be hidden from view in the browser.
Keep in mind, however, that users can still view the contents of the list item (e.g., Donate) by viewing the source code in their browser.
Furthermore, the web page will only hide the contents of the element. It will still leave an empty space where the element is intended to display.
Note: What’s the difference between display: none and visibility: hidden? An element with display: none will be completely removed from the web page. An element with visibility: hidden, however, will not be visible on the web page, but the space reserved for it will.
cf) 여기서 .donate 한 이유는 html에 class="donate"라고 연결되어 있어서지 공식 아니고~!
'2020 > css (codecademy)' 카테고리의 다른 글
| CSS Display and Positioning (0) | 2020.04.12 |
|---|---|
| Changing The Box Model (이건 통째로 다시 공부감) (0) | 2020.04.12 |
| CSS Visual Rules (0) | 2020.04.11 |
| CSS setup & sellectors (0) | 2020.04.11 |