반응형 SMALL 전체 글26 물흐르듯 왼쪽에서 오른쪽으로 움직이는 디자인 이번에 소개해드릴 디자인은 물 흐르듯 왼쪽에서 오른쪽으로 움직이는 디자인을 소개, 공유해드리려고 합니다.움직이는 디자인을 만들려면 애니메이션을 사용해야 합니다. 밑에는 weddinglery 홈페이지에서 사용했던 디자인을 보여드립니다. 왼쪽에서 오른쪽으로 흐르는 css입니다. 제 생각에는 글자로 하나로만 지정하고 움직이게 시키는 게 제일 무난한 디자인이지 않을까 싶습니다. See the Pen Untitled by 박상훈 (@yvksigii-the-typescripter) on CodePen.">See the Pen Untitled by 박상훈 (@yvksigii-the-typescripter) on CodePen.// weddinglery: 애니메이션의 이름입니다. 이는 이전에 정의한 애니메이션.. 2024. 12. 17. 퍼블리싱 하면서 좋은 UI 디자인 퍼블리싱퍼블리싱(Publishing)은 웹사이트나 애플리케이션을 사용자에게 제공할 수 있도록 콘텐츠를 준비하고 배포하는 작업을 의미합니다. 웹 퍼블리싱은 주로 웹페이지를 만들고, 디자인을 적용하며, 웹 서버에 이를 올려 실제로 인터넷에서 접근 가능하게 만드는 과정을 포함합니다. 이 과정에서 다음과 같은 주요 작업이 포함됩니다: 퍼블리싱 작업하면서 좋은 디자인을 공유하려고 합니다. 오랜만에 글을 작성하네요.첫 번째 리스트식 See the Pen Untitled by 박상훈 (@yvksigii-the-typescripter) on CodePen.">See the Pen Untitled by 박상훈 (@yvksigii-the-typescripter) on CodePen. 깔끔하면서도 리스트식으로 뭐 .. 2024. 12. 17. <HtmlStudy /> 웹페이지 - 제작 상황 도메인 연결 완료 1.0.0 배포 - 도메인 설정gitgub pages 커스텀 도메인 설정 호스팅 kr 도메인 구매 완료- 1.0.0 버전 배포html5 태그 css3 태그 (미완성)모바일 태블릿 반응형 미제작홈페이지 배포홈페이지를 항상 깃허브를 통해서 배포를 해왔기 때문에 도메인을 사서 홈페이지를 열어보는 경험도 중요하다 생각해 호스팅 kr을 통해서 도메인을 구매한 후 깃허브 dns을 연결해 줬다.이후 계획홈페이지 상단에 htmlstudy 이미지 추가반응형 웹페이지 모바일 패드 추가인스타그램 연동 아이콘 추가css 가상태그 미완성 완성홈페이지 테스트밑에 홈페이지입니다. 아직 버그가 많은 홈페이지 입니다.https://htmlstudy.co.kr/ HtmlStudy htmlstudy.co.kr 2024. 8. 22. <HtmlStudy /> 웹페이지 - 제작 상황(4) 홈페이지 제작 상황을 오랜만에 작성하게 됐다..사이드바 헤더 문제material-ui 헤더 때문이었는데 홈페이지가 하단 아이템으로 이동하게 되면 스크롤이 고정이 되어야 하는데 자꾸 최상단으로 이동하게 돼서 사용자 경험이나 내가 봐도 자꾸 최상단으로 움직이면 짜증 날 것 같았다. 결국 해결을 하지 못했다.사이드바 해결 다른 프레임워크를 하기로 했다.https://ant.design/ 사용하기로 했다.디자인도 깔끔하고 material-ui 는 구버전 리액트 코드를 사용하지만 and-design은 신버전 코드를 제공해서 이해하기 쉬웠다.코드 설명 페이지 전부 width : 100% 를 사용하게 되면서 반응형 제작도 쉬워졌다고 생각합니다..(아마도?) Ant-Designhttps://ant.design/comp.. 2024. 8. 19. <HtmlStudy /> 웹페이지 - 제작 상황(3) 1. 로고문제로고를 저번에 바꿨지만 다크모드를 켜보니 배경색이 있는 문제가 있었다. 그래서 직접 로고를 유튜브를 보면서 만들기로 했다. 배경은 투명색으로 교체하였다. 뭔가 급하게 만든감이 있어서.. 다시 시간 날 때 제대로!2. 헤더 문제 태그를 이동했을 때 왼쪽 헤더 내비게이션이 닫히는 문제를 항상 열려있게 변경시켰다. const [open, setOpen] = useState(true); const [openSubMenu, setOpenSubMenu] = useState({}); useEffect(() => { ~~~ setOpenSubMenu(openMenu); }, [location.pathname]); const handleDrawerOpen = () => { .. 2024. 8. 1. <HtmlStudy /> 웹페이지 - 제작 상황(2) 오랜만에 홈페이지 작업을 진행해 남겨놓기로 했다.1. 홈페이지 상황목록 태그피규어 태그표 만들기폼 요소로고 추가2. 문제점 Material UI를 임포트해 사용하다 보니 문제점이 발생했다.태그를 눌러 이동하면 왼쪽의 내비게이션 탭이 닫히게 된다.다른 태그들을 보고 싶다면 또 왼쪽의 화살표 모양을 다시 눌러 이동해야 한다.내가 만들고 사용해도 불편했다. 그래서 이전글 다음글 버튼을 만들기로 했다.3. 해결책import { NavLink } from "react-router-dom";...const prevPage = { path: "/devtools/vscode" };const nextPage = { path: "/html/paragraph" };.... {prevPage && ( .. 2024. 7. 30. 이전 1 2 3 4 5 다음 반응형 LIST
