홍준혁

오늘은 유튜브에서 유튜브 강의를 보면서 유튜브 클론 코딩을 했다.... (...?) www.youtube.com/watch?v=67stn7Pu7s4 css와 레이아웃의 개념을 확실하게 잡을려고 했으며, 결과는 위와 같다. 사실 따라 적으면서 정신이 굉장히 없었는데, 심지어 css전처리기도 사용 안 하고 순수 css로 하시며, 전처리기의 감사함을 느끼라고 하셨다....... 안 그러셔도 되는데... 아무튼 만들어보고 느낀 점은! 생각보다 반응형 만들기가 쉽지 않다는 것이다. 사실 저 위에 움짤을 보면 알겠지만, 글자가 다 깨졌다... 평소에 개발하면서 반응형이라는 거는 개나 줘버리고 개발하는데 이번 개발을 하면서 반응형이 없으면 안 되겠구나...라는 생각을 하고 앞으로 미디어 쿼리에 집중적으로 공부해봐야겠..

이렇게 창을 구현했다. 리액트에서 재사용 가능한 컴포넌트로 만들었으며, 나중에 포트폴리오 사이트를 만들 때에 이 컴포넌트를 재활용할 것이다. JSX는 간단하게 이렇게 작성했으며 props로 children을 받아 article에 children을 display 하는 것이다. .macWindow { border: 3px solid #f1f1f1; border-top-left-radius: 4px; border-top-right-radius: 4px; } .macWindow header { background: #f1f1f1; display: flex; justify-content: space-between; padding: 4px; } .macWindow header .dot { margin-top: 4p..

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

이렇게 화면이 랜더링 될 때 애니메이션이 나오게 하는 것을 해볼 것이다. 이번 예제는 리액트를 사용했으며, Greensock 라는 라이브러리를 사용하였다. greensock.com/ GreenSock GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser. greensock.com 이는 애니메이션을 쉽게 만들어주는 라이브러리이다. 먼저, 컴포넌트가 랜더링 될 때, 즉 useEffect가 실행될 때 애니메이션이 실행돼야 한다. useRef를 사용해서 element에 접근한다. 이제 cssR..

오늘은 스크롤할 때 이러한 효과를 내는 Parallax를 만들어보았다. Parallax를 공부한 이유는 나중에 포트폴리오 사이트를 만들건대, 그 포트폴리오 사이트에 이 기법을 사용할 것이기 때문이다. 만드는 방법은 정말 간단하다. background-attachment: fixed; 정말, 더도말고 덜도 말고 이것만 알고 있으면 된다. 배경이 스크롤해도 함께 스크롤되지 않는다는 점이다. 여기서 우리가 background-image로 이미지를 주고 그 이미지의 이렇게 코드를 작성해주면 이미지가 스크롤해도 이미지가 가만히 있는 효과를 줄 수 있게 되는 것이다. 이미지를 하나의 div에 담고 안에 값을 작성한 다음, 이렇게 해서 사진상에 가운데에 나타나게 해 주었다. 그런데 여기서 주의해야 할 점이 있는데 만..

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