Codecademy front-end engineer course
DAY10
- Learn CSS: The Box model [Lesson1) The box model]
- 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. |
-Width & Height [너비, 높이]
p {
height: 80px;
width: 240px;
}*픽셀로 지정하면, it will be the same size on all devices - an element that fills a laptop screen will overflow a mobile screen.
- Border [테두리]
p {
border: 3px solid coral;
}| width | - The thickness of the border - px 또는 다음 표현법으로 표현 가능: thin, medium, or thick. |
| style | - The design of the border. - ex)none, dotted, and solid. - Web browsers can render any of 10 different styles |
| color | - The color of the border - Web browsers can render colors using a few different formats, including 140 built-in color keywords |
-Border radius [테두리 지름]
div.container {
border: 3px solid rgb(22, 77, 100);
border-radius: 5px;
}->set all four corners of the border to a radius of 5 pixels (i.e. the same curvature that a circle with a radius of 5 pixels would have)
*50%로 하면 원으로 테두리 만들 수 있음. (setting the radius equal to the distance between the center of the circle and the width of the box, which is 50%)
-Padding [패딩]
*The space between the contents of a box and the borders of a box is known as padding
(to expand the background color and make content look less cramped)
-It can be represented in one line, or the following types:
- padding-top
- padding-bottom
- padding-left
- padding-right
p.content-header {
border: 3px solid coral;
padding: 10px;
}
p.content-header {
border: 3px solid fuschia;
padding-bottom: 10px;
}- 아래 3가지 표현법 모두 같다.
/*1*/
padding: 20px 30px;
/*2*/
padding: 20px 30px 20px 30px;
/*3*/
padding-top: 20px;
padding-bottom: 20px;
padding-right: 30px;
padding-left: 30px;1. if the top and bottom values for padding will equal each other, and the left and right values for padding will also equal each other
2. the four values correspond to the amount of padding in a clockwise rotation.
(top부터 시계방향 순서)
-Margin [마진]
:Margin refers to the space directly outside of the box
p {
border: 1px solid aquamarine;
margin: 20px;
}->This means that other HTML elements on the page cannot come within 20 pixels of the paragraph’s border
p {
border: 3px solid DarkSlateGrey;
margin-right: 15px;
}->more specific about the amount of margin on each side of a box
/*1*/
p {
margin: 6px 12px 6px 12px;
}
/*2*/
p {
margin: 6px 12px;
}
1. the four values refer to the amount of margin around the box in a clockwise rotation
*the margin value must be specified for all four sides of the box.
2. when you’re certain that the top and bottom values for margin will equal each other, and that the left and right values for margin will also equal each other, you can use the following shortcut
- Auto [가운데 정렬하는 법]
div {
width: 400px;
margin: 0 auto;
}->The 0 sets the top and bottom margins to 0 pixels.
The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element.
+ 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.
(In order to center an element, 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.)
- Margin collapse [마진 상쇄]
* top and bottom margins, also called vertical margins, collapse, while top and bottom padding does not
- Unlike horizontal margins, vertical margins do not add. Instead, the larger of the two vertical margins sets the distance between adjacent elements.
#img-one {
margin-bottom: 30px;
}
#img-two {
margin-top: 20px;
}-> #img-one #img-two가 붙어 있다고 가정해보자. 그러면 더 큰 value를 가진 margin-bottom의 값이 collapse로 인정됨.
- 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.
-> 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. |
| 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. |
p {
color: grey;
font-size: 16px;
line-height: 48px;
margin-top: 60px;
padding: 10px 20px;
min-width: 200px;
max-width: 800px;
min-height:200px;
max-height:300px;
}
-Overflow [내용 넘쳐 흘렀을 때]
:when components result in an element that is larger than the parent’s containing area
| 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. (default value) |
p {
overflow: scroll;
}-> if the contents overflow, then a new scroll will appear.
-Resetting Defaults [디폴트 설정]
:a default stylesheet they use in the absence of an external stylesheet
->User agent stylesheets often have default CSS rules that set default values for padding and margin
* {
margin: 0;
padding: 0;
}
-Visibility [내용 숨기기]
: 내용만을 숨길 뿐, source code나 space는 남아있다.
| hidden | hides an element. |
| visible | displays an element. |
.future {
visibility: hidden;
}*What’s the difference between display: none and visibility: hidden?
- display: none -> completely removed from the webpage
- visibility: hidden -> 웹페이지에서 보이진 않지만 공간 차지하고 있음
'Web' 카테고리의 다른 글
| [CSS] 12) 디스플레이, 위치 (#inline, #inline-block, #clear) (0) | 2021.01.28 |
|---|---|
| [CSS] 11)박스 모델 변경 (#content-box #border-box) (0) | 2021.01.26 |
| [Front-end] 9) 프로젝트 - 정리노트 웹페이지 만들기 (0) | 2021.01.24 |
| [CSS] 8) 웹 페이지 폰트 설정, 연결하는 법 (#typography #font-family) (0) | 2021.01.24 |
| [CSS] 7) 색 표현법, 색 넣기 (#HSLA # RGB) (0) | 2021.01.19 |
