어제 만들었던 영화 추천 사이트 업그레이드
어제 만들었던 사이트에 부트스트랩을 빼고 css작업을 했다.
영화카드 html골격은 약간 손봐서 그대로 쓰기로 했다.
일단 첫번째로 손본것이 카드의 사이즈를 줄이고, 나열하는 작업을 했다.
보시다시피.. 카드가 지 맘대로 놀기 때문에 ..
카드 class는 col로 입력되어있었다. 귀찮으니 그냥쓴다..
.col {
width: 350px;
margin: 1rem;
position: relative;
border-radius: 5px;
}카드 사이즈를 좀 적절하게 줄여보았다. margin:1rem은
루트 요소 폰트 사이즈의 상대 단위라고 한다.
rem 단위는 HTML 루트 요소의 폰트 사이즈고,
루트 요소의 폰트 사이즈는 대부분의 웹 브라우저에서 16px로 정한댄다..
그 다음엔 개별 카드들을 감싸고 있는 div(card-box)에
display: inline-flex를 적용해서 카드를 나열했다.
사이트를 뚫고 나갈정도로 나열되는 것을 확인한뒤..
display: inline-flex;
flex-wrap: wrap;
justify-content: center;를 추가해서 적절하게 밑에 카드들이 이어서 나열되게 바꾸는 동시에
카드들을 중앙에 위치하게 만들었다! display는 flex만 있는 줄
알고 있었는데.. 뭐가 다른가 싶어서 검색해보니 flex는 수직으로
정렬하고, inline-flex는 수평으로 정렬을 도와준다고 한다..
영화의 설명이 나열되는 html부분에서 설명을 p테그로 감싼뒤
card-text 라는 class를 지정해줬다.
.card-text {
overflow: auto;
height: 100px;
}overflow:auto를 사용해서 카드 길이보다 길어질때 스크롤이
생겨 밑으로 내려서 확인할 수 있게 만들었다. height를 처음에
주지 않았는데 뭔가 잘못됨을 감지하고 주변에 자문을 구해서
해결했다.
카드안에 영화설명이 왼쪽에 좀 치우쳐져 있기에 설명위 div(card-text)에
.card-body {
height: 200px;
padding: 0.5rem 1rem;
}를 추가하여 간격을 주니 괜찮아졌다.
카드는 줄어들었지만, 이미지 사이즈가 맞질 않았다..
그래서 이미지가 있는 div(card-img-top)에 width 100%를 주었다.
.card-img-top {
width: 100%;
}
이제 좀 볼만해졌다. 이 다음은 지나치게 싸구려틱한 검색창을 꾸며줘야 한다..
검색창과, 검색버튼이 위치한 상위 div(input-group)을 만들어서
헤더랑 아래 카드와의 간격을 주었다.
.input-group {
margin-top: 15px;
margin-right: 100px;
width: 95%;
max-width: 100%;
display: inline-block;
}검색창과 버튼을, 오른쪽에 쭉 밀어서 창을 줄이거나 늘릴때 해당 지점에 있게 설정 해 주었다.
#search-box {
padding: 10px 10px 13.5px 10px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(0, 0, 0);
color: white;
border: none;
float: right;
}
#search-box::placeholder {
color: rgb(255, 255, 255);
padding-left: 10px;
}
.search-btn {
font-size: 1.4rem;
font-family: 'Cherry Bomb One', cursive;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding-bottom: 5px;
background-color: black;
color: tomato;
border: none;
float: right;
}#search-box::placeholder {
color: rgb(255, 255, 255);
padding-left: 10px;
}
이 부분은 검색창에 디폴트값의 색을 바꿔준것이다.
검색 버튼과, 검색창은 float:right로 밀어주었다!
오른쪽에 간격을 좀 주기 위하여 상위 div(input-group)에 margin-right도 주었다.
마지막으로 버튼에 마우스를 올리면 동적으로 색이 바뀌게 구현했다.
.search-btn:hover {
box-shadow: 0 80px 0 0 rgba(255, 255, 255, 0.25) inset,
0 -80px 0 0 rgba(255, 255, 255, 0.25) inset;
}
hover라는걸 사용했고, 만약 클릭했을때도 뭔가 추가하고 싶다면
알아보니 active라는 친구를 사용하면 된다고 한다..
오늘은 이정도로 만족하기로 하였다. .
타이틀과 폰트는 너무나도 쉬운것이였기에 안 적었다.
진짜 마지막이다..
좀 줄이면 이렇게 보인다.
껄껄 나 잔다~
