[Web] Spartapedia - ( week 1 )

지금까지 배운 내용들을 사용해서 영화를 모아서 볼 수 있는 페이지를 만들어본다.

우선 영역을 정의하고 그 안에 텍스트와 버튼을 넣어준다.

    <div>

        <h1>Best movies in my life</h1>

        <button>Add Movie</button>

    </div>

div영역의 높이를 조절해 주고 안에 있는 요소들을 가운데로 정렬시켜 주도록 한다.

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

위 코드는 일반적으로 붙어 다니는 코드로 자주 사용된다.

display : flex를 사용하면 해당 요소는 Flexbox 컨테이너가 되고 그 안에 있는 자식들은 아이템이 된다.

flex-direction은 정렬시킬 방향을 정할 수 있다.

align-items를 통해서 플렉스박스 내부의 자식을 컨트롤 한다.

justify-content : center를 통해서 아이템들이 수평 중앙에 위치하게 된다.

이제 버튼을 꾸며준다.

둥근 테두리에 배경이 없는 버튼과 내부의 텍스트 색은 흰색으로 변경한다.

.mytitle > button {

            width: 250px;

            height: 50px;

            background-color: transparent;

            border: 1px solid white;

            color: white;

            border-radius: 50px;

            margin-top: 20px;

        }

        .mytitle > button:hover {

            border: 2px solid white;

        }

 

.mytitle > button을 사용하면 .mytitle 하위의 button을 특정시킬 수 있다.

크기와 높이를 지정하고

background-color : transparent : 버튼의 배경 색상을 투명하게 한다.

border : 1px solid white : 버튼의 테두리는 1px의 두께로 실선을 흰색으로 그려준다.

color : white : 내부의 텍스트 색상은 흰색으로 한다.

border-radius : 50px : 테두리를 50px 만큼 둥글게 한다.

margin-top : 20px : h1 영역과 여백을 준다.

 

그리고 hover를 사용하면 마우스를 올렸을 때 특정 동작을 하게 만들 수 있다.

.mytitle > button : hover {~} : 버튼에 마우스를 올리면 테두리를 진하게 바꾼다.

 

이제 배경에 이미지만 추가해 주면 된다.

            background-image: url('URL');

            background-position: center;

            background-size: cover;

로그인 때 사용했던 이미지 넣은 코드를 그대로 사용할 수 있다. 여기서 이미지 URL만 변경해 주면 된다.

그리고 이미지를 어둡게 해 주도록 하는 코드를 추가한다.

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('URL');

 

 

마지막으로 폰트도 변경해 준다. 폰트는 구글 웹 폰트를 사용해서 적용한다.

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

        * {

            font-family: 'Gowun Dodum', sans-serif;

        }