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