내가 보려고 만들어놓은 CSS

## 박스 가운데로 정렬

.loginBox {
    width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px;
    background-color: white;
}

 

## <a> 버튼으로 바꾸기

a.btn {
    display: block;
    text-decoration: none;
    border: 1px solid;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
    padding: 13px;
    margin-bottom: 10px;
    color: gray;
    opacity: 0.8;
    position: relative;
}

a.btn:hover {
    opacity: 1;
}

 

## 심플한 버튼 만들기

.controls__btns button {
    all: unset;
    cursor: pointer;
    background-color: white;
    padding: 5px 0px;
    width: 80px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 12px;
}

.controls__btns button:active {
    transform: scale(0.98);
}

 

## 그림자 만들기

box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);

 

 

 

 

CSS의 각각의 요소에 대해서는 공부할 필요가 있지만

확실히 CSS는 센스가 필요한 부분은 확실한 것 같습니다.

이것저것 나만의 페이지를 만들면서 CSS와 HTML을 공부하는게 맞는 것 같습니다.