홍준혁

우리가 웹사이트를 만들 때 화면이 작아지면 구성요소가 깨지는 현상을 많이 겪어봤을 것이다. 나 또한 그랬고 이를 해결하기 위해서는 반응형 웹페이지로 만들어야 한다는 설루션이 있었다. 또, 모바일 , 테블릿 등에서 웹페이지를 접속할 때, 각기 다른 페이지를 보여줘야 하는데, 반응형을 사용하지 않는다면 각 페이지마다 새로운 파일을 만들어서 각기 다른 버전으로 관리해야 하는데, 그렇게 되면 번거로울 수 있기 때문에 한 파일에서 pc , 모바일 , 태블릿 등을 고려한 웹사이트를 만들 수 있게 반응형 웹페이지를 만드는 것이다. 우리는 미디어 쿼리 라는것을 사용해서 반응형 웹페이지를 만들어 볼 것이다. 미디어 쿼리의 개념은, 각 화면의 비율마다 각각 다른 화면을 보여주자 라는 개념이다. 스타일 시트 내에서 @med..

오늘은 CSS에서 마우스가 호버 될 시, 간단한 애니메이션과 함께 멋있는 버튼을 디자인해볼 것이다. 어떤 방식으로 버튼을 만들 거냐면 이런 식으로 구성이 되어있고, 버튼에 호버가 될 때, span의 콘텐츠에 애니메이션을 주는 효과를 줄 것이다. 우선, className이랑 class랑 같다고 생각하자. (리액트로 예제를 해서 그렇다. 차이는 없다) 그렇게 하면 이런 버튼이 생길 것이다. 이제 간단한 버튼 디자인을 해보자. 이런 식으로 해주었다. button안에 span값은 마우스가 올라갔을 때 pointer속성을 주었고, display : inline-block을 주게 되면 :after가상 클래스가 span값 옆에 생기게 된다. position: relative는 위치 조정을 위해서, transition..