** When writing CSS, check developer's tool and see if there is any css I wrote that doesn't change anything. If it's useless and doesn't do anything, Remove them!!
Box model
Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items.
Parts of a box
Content box: The are where your content is displayed, which can be sized using properties like width and height.
Padding box: The padding sits around the content as white space. Its size can be controlled using padding and related properties.
Border box: The border box wraps the content and any padding. Its size and style can be controlled using border and related properties.
Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements. Its size can be controlled using margin and related properties.
(images are from http://markusvogl.com/web1/interactive_box_model/css_box_demo.html it's vert good example to understand box model but
not available to see now since adobe flash player is not supported. I've captured those images before for personal study.)
/* border, padding, margin have separated properties for each side.
*/
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
/* top, left, bottom, right (clockwise) */
div {
margin: 10px 15px 20px 25px;
}
/* top, left, bottom, right (clockwise) */
/* top,bottom - right,left */
div {
padding: 10px 30px
}
/* top, right,left, bottom */
div {
padding: 10px 25px 25px;
}
Margin collapsing
The top and bottom margins of blocks are sometimes combined(collapsed) into a single margin whose size is the largest of the individual margins(or just one of them if they are equal)
- Note that margin of floating and absolutely positioned elements never collapse.
<div class="first"></div>
<div class="second"></div>
div{
width:100px;
height:100px;
border:1px solid black;
}
.first{
margin-bottom:30px;
}
.second{
margin-top:60px;
}
/* the largest margin apply in this case for the first's margin-bottom and second's margin-top */
When there are parent element and child element, margin top or margin bottom of child element does not affect parent element's height
<div class="parent">
<div class="child"></div>
</div>
.parent{
background-color: yellow;
}
.child{
width: 100px;
height: 100px;
margin-top: 50px;
background-color: red;
}
/* if you don't specify height of parent element, parent's height will be set as height of child element's
But margin of child won't affect height of parent's element like above */
Find out more about Margin collapsing
Box-sizing
Box-sizing sets how the total width and height of an element is calculated.
- content-box: gives you the default CSS box-sizing behaviour. If you set an element's width to 100px, then the element's content box will be 100 pixels wide and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
- border-box: tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set and element's width to 100px, that 100px will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements, and for <input> elements whose type is radio, checkbox, reset, button, submit, color, or search.
div1 {
box-sizing: content-box;
width: 100%;
}
div2 {
box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}
div3 {
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
}
Display
Display sets whether an element is treated as block or inline element and the layout used for its children, such as flow layout, gird or flex.
/* The element generates a block element box, generating line breaks both before and after the element when in the normal flow. */
display: block;
/* The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. This doesn't allow you to set width, height, margin-top, margin-bottom */
display: inline;
/* The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). This allows you to set width, height, margin, padding. */
display: inline-block;
/* Makes the container disappear, making the child elements children of the element the next level up in the DOM */
display: contents;
display: flex;
display: grid;
display: inline-flex;
display: inline-grid;
display: flow-root;
/* this makes the element invisible */
display: none;
More about display
Background
/* difference between background and background-color */
/* You can specify other values not only colour in background */
background: #color url("image url") no-repeat;
/* background-color only can specify the colour of background */
background-color: #color;
background-image: url()
background-repeat: repeat
background-repeat: no-repeat
background-repeat: repeat-x
background-repeat: repeat-y
/* 이미지 짤리지 않게, 이미지 크기 변화를 줘서 간격 없이 반복*/
background-repeat: round
/* 이미지 짤리지 않게 반복, 이미지 크기는 유지한채로 간격 없이 반복*/
background-repeat: space
background-position:
background-attachment:
Font
Font sets all the different properties of an element's font.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font</title>
<!--reset.css는 여기쯤 -->
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel=" preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
p {
font-size: 20px;
font-weight: 700; /* also can use normal, light, medium, bold */
font-style: italic; /* oblique; */
/* left, right, center, justify */
text-align: center;
font-family: 'Nanum Pen Script', cursive;
/* uppercase: 대문자, lowercase:소문자 */
text-transform: uppercase;
/* none, underline, overline */
text-decoration: underline dotted red;
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Webfont
Google Font
You can add link on html to use web font but also can import in CSS
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
Top comments (0)