반응형
반응형
- 도메인 설정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 = () => { ..
오랜만에 홈페이지 작업을 진행해 남겨놓기로 했다.1. 홈페이지 상황목록 태그피규어 태그표 만들기폼 요소로고 추가2. 문제점 Material UI를 임포트해 사용하다 보니 문제점이 발생했다.태그를 눌러 이동하면 왼쪽의 내비게이션 탭이 닫히게 된다.다른 태그들을 보고 싶다면 또 왼쪽의 화살표 모양을 다시 눌러 이동해야 한다.내가 만들고 사용해도 불편했다. 그래서 이전글 다음글 버튼을 만들기로 했다.3. 해결책import { NavLink } from "react-router-dom";...const prevPage = { path: "/devtools/vscode" };const nextPage = { path: "/html/paragraph" };.... {prevPage && ( ..
1. React UI 라이브러리 적용곰곰이 생각해 보니깐 react 라이브러리를 한 번도 사용해 본 적도 없고 적용하면 내가 만든 것보다 편하게 사용하기 위해 왼쪽 nav 바를 React UI 라이브러리 material-ui 적용시켜 봤다.엄청나게 간단하게 적용된 줄 알았던 라이브러리는 엄청난 대작업을 가져왔다.내가 원래 만든 것도 있고 라이브러리는 구 리액트버전이라 적용시키는데 애를 먹었다. 하나하나 찾아보면서 2시간 정도 걸렸던 거 같다. 역시 사용할 때는 먼저 찾아보고 적용시키고 진행하는 게 베스트다. 기획의 중요성을 다시 한번 깨닫는다.내비게이션의 아이콘들도 Material UI를 사용했으니 한번 React 라이브러리를 사용할 때 참고 사이트로 좋은 거 같다.https://mui.com/m..
https://frontdevpark.tistory.com/entry/HmtlTeacher-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0%EB%82%98%EC%9E%90%EC%8B%A0%EA%B3%BC%EC%9D%98%EC%95%BD%EC%86%8D HmtlTeacher 홈페이지 만들기(나자신과의약속)React를 통해 Tistory에 공유한 HTML5 코드들의 특징들과 제가 알고 있는 CSS나 지식들을 웹페이지를 만들기를 올리겠습니다.이거 떄문에 로스트아크 api를 급하게 마무리.. 내일부터 시작!1. 작업한것frontdevpark.tistory.com 콘셉트를 많이 뒤집었기에 원래는 다음날 작성하려고 했으나. 이름이 결정했지만 내..