[React, CSS] CSS + div 커지는 효과 구현, 효과 발생 전에는 div 내용 안보이게 하기

 

여는 글

---

 

재디자인한 메인 페이지에서 가장 어려울 것이라고 예상했던 효과다.

 

div 위에 마우스를 올리면 div가 천천히 커지면서 안의 내용물이 보이게 하고 싶었다.

 

프로젝트 페이지들을 이런식으로 보여주고 싶었는데 생각보다 쉽게 구현해냈다.

 

 

CSS + div 커지는 효과 구현

---

 

먼저 div를 만든다.

 

App.js

export default class Mainpage extends Component {
  render() {
    return (
    
        
   { /* 생략 */ }
        
        
        <div>
          <Project />

        </div>
        
        
  { /* 생략 */ }
  
  
  
  
  class Project extends Component {
  render(){
    return( 
      <div className="project">
        <div className="project1">
          <h1>Capstone Renewal</h1> 
          <img alt= "aws" src={process.env.PUBLIC_URL+"/img/awsicon.png"} /> 
        <img alt= "linux" src={process.env.PUBLIC_URL+"/img/linuxicon.png"} /> 
        {/* 위의 이미지태그는 테스트용 */}
          {/* 추후 따로 클래스 써서 깔끔하게 코드 넣고 이미지, 링크, 소개글 작성 */}

        </div>
        <div className="project2">
          <h1>Showpping Mall</h1>
          {/* 추후 따로 클래스 써서 깔끔하게 코드 넣고 이미지, 링크, 소개글 작성 */}

        </div>
        <div className="project3">
          <h1>Naver Renewal</h1>
          {/* 추후 따로 클래스 써서 깔끔하게 코드 넣고 이미지, 링크, 소개글 작성 */}

        </div>


      </div>

);
  }
}

 

주석때문에 코드가 길어보이는 거지 별 내용도 없다.

 

CSS로 보면 그냥 project 안에 project 1,2,3이 있는 형식이다.

 

나도 처음엔 이렇게 1,2,3 나눌 생각이 없었는데 배경색이 각각 다르다보니 따로 구현해야 했다.

 

 

App.css

.project {
  position: relative;
  width: 80%;
  margin-left: 20%;
  font-size: large;
  margin-bottom: 10%;
}

.project img{
  visibility: hidden; /* 핵심코드 */
}

.project1 {
  width: 70%;
  height: 100px;
  background-color: #fffd9e;
  transition: all 1.5s ease-in-out; /* 핵심코드 */
}


.project1:hover{ /* 핵심코드 */
  width: 90%;
  height: 700px;
  background-color: #fffd9e;
  border-radius: 5%;
}


.project1:hover img{ /* 핵심코드 */
  visibility: visible; /* 핵심코드 */
  transition-delay: 0.5s; /* 핵심코드 */
}


.project2 {
  width: 70%;
  height: 100px;
  background-color: #adbdda;
  transition: all 1.5s ease-in-out;
}


.project2:hover{
  width: 90%;
  height: 700px;
  background-color: #adbdda;
  border-radius: 5%;
}


.project2:hover img{
  visibility: visible;
  transition-delay: 0.5s;
}


.project3 {
  width: 70%;
  height: 100px;
  background-color: #abda8a;
  transition: all 1.5s ease-in-out;
}


.project3:hover{
  width: 90%;
  height: 700px;
  background-color: #abda8a;
  border-radius: 5%;
}


.project3:hover img{
  visibility: visible;
  transition-delay: 0.5s;
}

 

project 1. 2. 3은 백그라운드 컬러만 다르고 똑같기 때문에 핵심코드라고 주석표시 해놓은 project1만 보면 된다.

 

마우스를 올려 div가 커지기 전에는 div 안 내용물이 보이지 않아야한다. 그래서 부모에게 hidden 값을 줘서 전체 기본값이 hidden이 되도록 했다. img 테스트용으로 img를 지정했지만 h1 등 다른 태그를 써도 무방하다.

.project img{
  visibility: hidden; /* 핵심코드 */
}

 

 

 

이해가 쉽도록 아래 코드를 먼저 가져왔으나 위는 project img이고 아래 코드는 project1:hover img인 것을 주의해야 한다.

hover는 마우스 올렸을 때 효과가 발생하도록 하는 코드다.

마우스를 올렸을 때는 다시 이미지가 보여야하므로 hover에서 다시 이미지가 보이도록 한다.

delay를 준이유는 내 코드는 천천히 커지도록 구현했기 때문에 어느정도 커지고 나서 이미지가 보이도록 하기 위해서 delay를 줬다.

.project1:hover img{ /* 핵심코드 */
  visibility: visible; /* 핵심코드 */
  transition-delay: 0.5s; /* 핵심코드 */
}

 

 

 

 

transition을 주지 않으면 마우스 올리거나 내리면 바로 크기가 변한다. 그러면 뚝뚝 끊기는 느낌이 나서 별로이므로 천천히 커지거나 작아지도록 효과를 줬다.

 

여기서 주의할 점은 project1,2,3을 감싸고있는 project에 적용하지 않도록 주의해야한다. project는 그냥 이 3개를 감싸고 있는 틀에 불과하므로 적용하면 제대로 구현되지 않는다. (이거때문에 1시간 날림)

.project1 {
  width: 70%;
  height: 100px;
  background-color: #fffd9e;
  transition: all 1.5s ease-in-out; /* 핵심코드 */
}

 

 

마우스 올리는 효과를 hover라고 한다. 위 코드를 보고 비교해보면 알겠지만 width가 20%, height가 600px이 커지도록 했다. border-radius는 값이 클 수록 모서리가 둥글어진다.

.project1:hover{ /* 핵심코드 */
  width: 90%;
  height: 700px;
  background-color: #fffd9e;
  border-radius: 5%;
}

 

 

 

닫는 글

---

 

이번 포스팅이 마지막이다.

 

나중에도 따로 포스팅하진 않을 것 같지만 모바일 최적화를 위해 CSS @media를 사용했다.

 

 

원래는 메인페이지를 지난주에 끝냈어야하는데 재디자인 한다고 오래걸렸다.

 

 

 

모든 코드(GitHub)와 포트폴리오 주소

웹 애플리케이션 포트폴리오(Full Stack)