post
-
1) study(project)
CI / CD 를 통한 Github Action, Netlify
프론트엔드 페이지를 배포하기 위해 Netlify를 사용해보게 되었습니다. 정말 간단하게 배포가 가능하며, git에 push만 해도 자동으로 build와 배포가 이루어지는 프로그램입니다. 이걸 사용해보니, 이렇게 간단히 CI/CD가 이루어지나? 싶더라구요. 그래서 이 사이트를 소개할 겸, CI/CD와 Github Action에 대해 알아보겠습니다. 💡 CI/CD가 뭔가요? 꼭 해야하는 건가요? → 개발부터 배포까지의 단계를 자동화하여 빠르고 효율적이게 배포할 수 있게 하는 것입니다. 하지 않으면 배포가 불가한 것은 아니지만, 배포 후 업데이트를 하거나 수정을 하는 경우 빌드부터 배포를 다시 하는 것이 아닌 자동으로 진행시키기 때문에 따로 시간을 낼 필요가 없습니다. 따라서 빠르게 수정본의 테스트가 가능하며..
-
TIL
HTML 리스트 (+ 태그들의 관계성)
HTML 의 목록태그 리스트 데이터들을 정리하여 카테고리 형식으로 만들어 줄 수 있어, 시각화하여 페이지를 꾸미기 위해서도, 비슷한 데이터끼리 정렬할 때에도 사용되어 자주 사용하는 태그입니다. 1. Unordered List : 정렬되지 않은 목록 (순서없이 나열되는 리스트) 리스트1 리스트2 리스트3 HTML 삽입 미리보기할 수 없는 소스 => 순서표시는 없고, 점으로 리스트의 목록이 나열된 형태가 된다. (ul의 기본으로 설정되어있는 점은 css를 통해 list-style : none 으로 없애거나 다른 모습으로 변경이 가능하다) *정렬되지 않은 목록이라고 하여, 랜덤으로 리스트가 나오는 것은 아니다. 리스트의 모습은 html 상에서 적었던 순서 대로 나온다. 2. Ordered List : 정렬된 ..
-
2) project
position:fixed 고정 후, 스크롤
페이지의 헤더를 꾸미다 보니, position : fixed 를 쓰게 되었다. 말풍선 안에 글을 넣은 모습을 하고싶었는데, 다른 영역을 침범해야 원하는 위치로 갈 수 있어서 사용했다. 그 후, 메인 UI를 다듬고 스크롤을 하는데, 말풍선이 계속 따라다닌것을 알게 되었다. 💡 따라다니는 말풍선은 fixed인데 어떻게 스크롤 시 화면에서 없앨 수 있을까? → 스크롤 했을 때, 헤더를 없애면 말풍선도 자연스럽게 사라질 것. useEffect(() => { const handleScroll = () => { const scrollThreshold = 50; // 스크롤 50px 을 임계값으로 설정 const currentScrollY = window.scrollY; // 현재 스크롤 // 현재가 50px 이하일..
