[HTML, CSS] 생각보다 쓸만한 CSS 응용편!

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");

linear-gradient 보정 전

 

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;

button, input 박스 등이 division 내부에 포함 될 때 해당 요소의 배경색이 뒷 배경을 가리게 된다

이런 상황 자체가 문제되지는 않지만 트렌드에서 벗어난 스타일?(촌스럽다.)

백그라운드 색상 제거 (투명화) transprent를 사용하고 테두리 색상을 주면 좀더 요즘 홈페이지의 느낌을 살릴 수 있다.

    /* 버튼의 백그라운드 색상 제거 (투명화) transprent */
    background-color: transparent;

    /* 테두리를 강조하여 꾸미기 */
    border-radius: 50px;
    border: 1px solid white;

여기에 추가적으로 "hover"(마우스 커서가 올라간 경우) 테두리 강조 이벤트를 추가하면

좀더 세련된 느낌을 줄 수 있다. 

/* hover(마우스 커서가 올라간 경우) 테두리 강조 */
.mytitle>button:hover {
    border: 2px solid white;
}

 

이제 아래와 같이 마우스 커서를 올릴 때 

테두리가 강조된다.

 

 

해당 스터디는 아래 깃을 통해 업데이트 되고 있습니다.

https://github.com/yzpocket/Sparta99training

GitHub - yzpocket/Sparta99training