반응형 SMALL HTML511 물흐르듯 왼쪽에서 오른쪽으로 움직이는 디자인 이번에 소개해드릴 디자인은 물 흐르듯 왼쪽에서 오른쪽으로 움직이는 디자인을 소개, 공유해드리려고 합니다.움직이는 디자인을 만들려면 애니메이션을 사용해야 합니다. 밑에는 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 /> 웹페이지 - 제작 상황(3) 1. 로고문제로고를 저번에 바꿨지만 다크모드를 켜보니 배경색이 있는 문제가 있었다. 그래서 직접 로고를 유튜브를 보면서 만들기로 했다. 배경은 투명색으로 교체하였다. 뭔가 급하게 만든감이 있어서.. 다시 시간 날 때 제대로!2. 헤더 문제 태그를 이동했을 때 왼쪽 헤더 내비게이션이 닫히는 문제를 항상 열려있게 변경시켰다. const [open, setOpen] = useState(true); const [openSubMenu, setOpenSubMenu] = useState({}); useEffect(() => { ~~~ setOpenSubMenu(openMenu); }, [location.pathname]); const handleDrawerOpen = () => { .. 2024. 8. 1. HTML5 - 멀티미디어 멀티미디어(웹과 멀티미디어 / 오디오, 비디오 재생하기) 알아두면 좋은 속성값과 정보 비디오 태그 속성 속성 값(예) 설명 autoplay autoplay 동영상이 바로 재생 buffered buffered 동영상이 버퍼링 시간을 읽을 수 있는 속성 controls controls 비디오 컨트롤이 표시되도록 설정 loop loop 비디오 재생이 끝나면 다시 시작하도록 설정 muted muted 비디오의 오디오 출력을 음소거로 설정합니다 poster poster="URL" 비디오를 다운하는 동안 또는 시작버튼을 누르기 전까지 이미지를 설정 preload preload= "auto" preload="metadata" preload="none" 페이지가 로드되고 비디오 로드 여부를 서정 src src="URL.. 2023. 9. 19. HTML5 - 피규어 태그 태그 태그 : 이미지, 동영상 등 멀티미디어를 넣을 때 태그 : 피겨 태그 안에 이미지 넣기 ~ 태그 : 피규어 태그 안에 이미지에 대한 제목글 넣기 태그 : 피규어 태그 안에 이미지에 대한 설명글 넣기 HTML 삽입 미리보기할 수 없는 소스 2023. 9. 19. 이전 1 2 다음 반응형 LIST
