linear-gradient 를 사용하여 이미지를 어둡게 보정 할 수 있다.
보통 은은하고 Dark한 느낌을 좋아하다 보니..
background-image: linear-gradient(0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
CSS
복사
linear-gradient 보정 후
division태그 내부의 콘텐츠 (Text, Input, Button 등) 을 가운데 정렬하는 4줄 코드이다.
프로토타입 페이지 구성할때 그냥 외워서(ctrl c+v) 사용할 코드. 자주 사용될 것 같다.
이전에 text-align... block.. 등 생각보다 내 마음대로 움직이지 않던 부분인데 아래 코드로 쉽게 정렬 할 수 있음
display: flex;
flex-direction: column;
/* flex-direction: row; <<- 가로 정렬 시 사용*/align-items: center;
justify-content: center;
CSS
복사
button, input 박스 등이 division 내부에 포함 될 때 해당 요소의 배경색이 뒷 배경을 가리게 된다
이런 상황 자체가 문제되지는 않지만 트렌드에서 벗어난 스타일?(촌스럽다.)
백그라운드 색상 제거 (투명화) transprent를 사용하고 테두리 색상을 주면 좀더 요즘 홈페이지의 느낌을 살릴 수 있다.
/* 버튼의 백그라운드 색상 제거 (투명화) transprent */background-color: transparent;
/* 테두리를 강조하여 꾸미기 */border-radius: 50px;
border: 1px solid white;
CSS
복사
여기에 추가적으로 "hover"(마우스 커서가 올라간 경우) 테두리 강조 이벤트를 추가하면
좀더 세련된 느낌을 줄 수 있다.
/* hover(마우스 커서가 올라간 경우) 테두리 강조 */.mytitle>button:hover {
border: 2px solid white;
}
CSS
복사
이제 아래와 마우스 커서를 올릴 때 테두리가 강조된다.