[HTML,CSS,JS] 메인 영역 만들기

앞서 작성한 헤더 영역은 position 속성을 absolute로 지정해서 화면에 고정되어있는상태
-> 다른 요소의 레이아웃에 간섭하지 않는 상태

메인 영역

웹 브라우저의 높이만큼 기본 높이를 지정

메인 영역안에 텍스트는 수평과 수직방향에서 중앙에 위치

<main id="main">
        <div class=""container">
            <h4>Welcome</h4>
            <h2>I`M A <span> Back-End Developer</span></h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Praesentium dolor quas nulla unde ea officiis?
            </p>
            <button class="download">DOWNLOAD CV</button>
            <button class="mouse"><i class="fa-solid fa-computer-mouse"></i></button>
        </div>
</main>

헤더 영역의 position이 absolute라서 메인영역과 헤더 영역이 겹쳐 보임

CSS

main{
    width:100%;
    height :100vh;
    color:white;
    background:linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0,0)),
    url('img.jpg') center center;
    background-size:cover;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align : center;
}

배경이미지 지정을 위해 url() 사용
-> linear-gradient() 함수를 사용하면 배경색이 이미지를 덮는 효과를 줄수 있음
-> 수직 방향에서 요소를 중앙에 위치시키기 위해 display를 flex로 지정하고, 텍스트도 중앙에 정렬하기 위해 text-align:center 지정

main h4{
    font-size:2rem;
}

main h2{
    font-size:3.5rem;
    margin:2rem 0;
    letter-spacing: 3px;
}

main p{
    max-width:500px;
    margin:0 auto;
    font-size:1.25rem;
}

글자 폰트및 간격 조절

main button.download{
    background-color:transparent;
    border:3px solid white;
    border-radius:20px;
    padding:1rem 2rem;
    margin-top:3rem;
    color:white;
    font-weight:bold;
    cursor:pointer;
}

버튼 꾸미는 코드
-> 보통 버튼은 배경 색을 transparent로 지정한 것이 좋으며 요소 내부 외부에 간격을 주기 위해 padding,margin 속성 지정

main button.mouse{
    background-color:transparent;
    border:none;
    color:white;
    font-size:2rem;
    position:absolute;
    bottom:1rem;
    left:50%;
    transform:translateX(-50%);
    animation:upDown 1s ease-in-out infinite;
    cursor:pointer;
}

@keyframes upDown{
    0%{
        bottom:1rem;
    }
    50%{
        bottom:1.5rem;
    }
    100%{
        bottom:1rem;
    }
}

마우스 버튼 애니메이션 구현

main h2 span::after{
  content:"";
  height:40px;
  width:3px;
  background-color:#fff;
  display:inline-block;
  animation:blink .7s ease-in-out infinite;
}

@keyframes blink{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

깜빡이는 커서 만들기

위 경우 헤더가 잘 안보임
-> 텍스트 색상을 white로 하고 absolute를 fixed로 수정