style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Montserrat', sans-serif;
}

body, h1, h2 {
    margin: 0px;
    padding: 0px;
}

/* 브라우저에서 기본적으로 margin과 padding의 값을 가지고 있는데, 이를 0px로 각각 초기화 시킨 것이다. */

.title-box {
    text-align: right;
}

h1 {
    font-size: 36px;
    font-weight: bold;
    font-style: italic;
}

h2 {
    font-size: 20px;
    font-weight: lighter;
    color: #282828;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 5px;
    margin-bottom: 16px;

}

.name-text {
    font-size: 16px;
    color: #7c7c7c;
    font-weight: bold;
}


.mainbox {
    border: 1px solid #ededed; 
    /* 선 두께, 선 스타일, 선 색 */
    width: 610px;
    margin: 30px auto;
    padding: 30px;
    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
}




footer {
    text-align: center;
    background-color: #3f3f3f;
    color: #c6c6c6;
    font-size: 12px;
    padding: 20px;
 
} 

section {
    margin-bottom: 24px;
}

.about-me-text {
    font-size: 10px;
    line-height: 16px;
    /* 보통 line-height는 폰트 사이즈의 160%를 주면 적절하다고 한다. */
}

.title-text {
    font-size: 11px;
    font-weight: bold;
    columns: #282828;
    /* text-align: left; 이렇게 쓰면 개행이 되어 배열된다. */
    float: left;
    /* float: left; 이렇게 쓰면 한 줄에 title-text와 year-text가 정렬된다. */
}

.year-text {
    font-size: 11px;
    font-weight: bold;
    columns: #282828;
    /* text-align: right; */
    float: right;
}

.float-wrap {
    overflow: hidden;
    /* overflow: hidden의 경우 해당 영역(예컨데 div영역의 height만큼만 보여준다. 그런데 height가 정해지지 않은 경우는 자르지 않고 내용에 맞춰 늘어난다.)*/
}


.desc-text {
    font-size: 9px;
}

.desc-subtext {
    font-size: 9px;
    color: #282828;
    padding-left: 16px;
}

.sns-img {
    width: 12px;
    height: 12px;
}
.sns-wrap {
    text-align: right;
}