** CSS를 작성할 때 개발자 도구를 확인하고 내가 작성한 CSS가 아무것도 변경되지 않는지 확인하십시오. 쓸모없고 아무 것도 하지 않는다면 제거하라!!

박스 모델

CSS의 모든 것은 주위에 상자가 있으며 이러한 상자를 이해하는 것이 CSS로 레이아웃을 만들거나 항목을 다른 항목과 정렬할 수 있는 핵심입니다.

상자 부품

콘텐츠 상자: width 및 height 와 같은 속성을 사용하여 크기를 조정할 수 있는 콘텐츠가 표시되는 곳입니다.
패딩 상자: 패딩은 콘텐츠 주위에 공백으로 배치됩니다. 크기는 padding 및 관련 속성을 사용하여 제어할 수 있습니다.
테두리 상자: 테두리 상자는 콘텐츠와 모든 패딩을 래핑합니다. 크기와 스타일은 border 및 관련 속성을 사용하여 제어할 수 있습니다.
여백 상자: 여백은 이 상자와 다른 요소 사이의 공백으로 콘텐츠, 패딩 및 테두리를 감싸는 가장 바깥쪽 레이어입니다. 크기는 margin 및 관련 속성을 사용하여 제어할 수 있습니다.



(이미지는 http://markusvogl.com/web1/interactive_box_model/css_box_demo.html에서 가져온 것입니다. 박스 모델을 이해하는 데 아주 좋은 예이지만
Adobe Flash Player가 지원되지 않기 때문에 지금 볼 수 없습니다. 이전에 개인 공부를 위해 그 이미지를 캡처한 적이 있습니다.)

/* 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; 
}

여백 붕괴

블록의 상하 여백은 때때로 개별 여백 중 크기가 가장 큰 하나의 여백으로 결합(축소)됩니다(동일한 경우 둘 중 하나만).

부동 및 절대적으로 배치된 요소의 여백은 축소되지 않습니다.

<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 */

부모 요소와 자식 요소가 있을 때 자식 요소의 여백 상단 또는 여백 하단은 부모 요소의 높이에 영향을 미치지 않습니다.

<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 */

Margin collapsing에 대해 자세히 알아보기

박스 크기

Box-sizing은 요소의 전체 너비와 높이를 계산하는 방법을 설정합니다.

content-box: 기본 CSS 상자 크기 조정 동작을 제공합니다. 요소의 너비를 100px로 설정하면 요소의 콘텐츠 상자 너비가 100픽셀이 되고 테두리 또는 패딩의 너비가 최종 렌더링 너비에 추가되어 요소가 100px보다 넓어집니다.

border-box: 요소의 너비와 높이에 대해 지정한 값의 테두리와 안쪽 여백을 고려하도록 브라우저에 지시합니다. 요소의 너비를 100px로 설정하면 해당 100px에는 추가한 테두리나 패딩이 포함되며 콘텐츠 상자는 추가 너비를 흡수하기 위해 축소됩니다. 이렇게 하면 일반적으로 요소의 크기를 훨씬 쉽게 지정할 수 있습니다.

box-sizing: border-box는 브라우저가 <table> , <select> 및 <button> 요소와 유형이 라디오, 확인란, 재설정, 버튼, 제출, 색상 또는 검색인 <input> 요소에 사용하는 기본 스타일입니다.

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는 요소가 블록 또는 인라인 요소로 처리되는지 여부와 흐름 레이아웃, 거드 또는 플렉스와 같은 하위 요소에 사용되는 레이아웃을 설정합니다.

/* 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; 

자세히 알아보기display

배경

/* 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: 

폰트

글꼴은 요소 글꼴의 모든 다른 속성을 설정합니다.

<!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>

웹폰트

Google Font
웹 글꼴을 사용하기 위해 html에 링크를 추가할 수 있지만 CSS에서 가져올 수도 있습니다.

@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

Fontawesome
Bootstrap Icon
Naver Font
Noonnu