html5메뉴

페이지 정보

profile_image
작성자태양신 조회 14회 작성일 2020-10-20 16:17:17 댓글 0

본문

동부센트레빌 홈페이지 헤더영역 메뉴 제작 - HTML5 + CSS3 + Animation 웹퍼블리싱 강의

안녕하세요. 리베하얀입니다.
HTML5, CSS3를 활용한 사이트 동부센트레빌 홈페이지 헤더영역 메뉴 만들기입니다.

이 영상은 PSD없이 사이트 캡처만으로 따라만들어 보았습니다.

영상의 53분~55분 사이에 약간의 실수가 있습니다. ㅠㅠ
너그러히 이해해주세요~~


- 사이트안내 -
개인사이트 : http://rebehayan.com
개인블로그 : http://blog.naver.com/rebehayan
장애인차별금지법 대응을 위한 웹접근성과 품질인증 저자 : http://www.acornpub.co.kr/book/beyond-web-accessibility
디자이너경준아빠 : 이 동영상으로 처음 유튜브보고 연습했던게 엊그제 같은데 벌써 1년 2개월이나 지났네요~^^ 제가 독학으로 여기까지 왔다는게 정말로 믿기지 않아요~ http://rdh6327.dothome.co.kr 제 홈페이지에 오시면 제가 처음 리베하얀님 유튜브 동영상으로 시작해서 그동안 디비컷보고 따라 만든 홈페이지 96개가 있어요~ 이제는 닷홈 용량 500M가 다 찼네요~ 이제는 그만 홈페이지를 만들고 부족한 스크립트를 공부해볼려고 생각하고 있어요~ 리베하얀님께 너무나도 감사드리고 독학으로 시작하시는 분들은 리베하얀님의 동부센트레빌 대메뉴를 무작정따라 만들어보시라고 권해드리고 싶네요~ 저는 예전에 이 동영상만 20번도 넘게 보았습니다~ 언제나 항상 건강하세요~ 그럼이만~! ^^
지금은4시23분 : 질문 드립니다. 제가 기존 배경은 파랑 글자는 흰색이고 마우스 hover시 height 330px은 흰색 글자는 파랑으로 바꾸고 싶은데 현재 보여지는 분양안내,현장안내 등은 hover시에만 글자가 바뀌어서 바탕이 흰색이더라도 파랑으로 글씨가 계속 남아있게 하고 싶은데 어떻게 해야할까요 ??
장예림 : 포트폴리오 준비 중에 항상 궁금했던 점이 있어서 질문드립니다ᅲᅲ꼭 제가 리뉴얼한 디자인의 홈페이지가 아닌 현재 운영되고 있는 사이트를 올려주신 영상처럼 그대로 재작업해서 포트폴리오에 넣어도 괜찮을까요? 디자이너가 아닌 퍼블리셔로 취업시에 문제가 되는지 궁금합니다!
lastname firstname : 안녕하세요, z-index 에대해 질문이 있습니다.
본 동영상 55:48 초 쯤에 header #lnb nav 에 z-index 줄 떄 position:relative 를 부여하는데 왜 그런지 궁금합니다.
position: relative를 주지 않으면, 아무리 z-index를 100과 같이 큰 숫자를 적용하여도 nav 요소가 파란 배경 위로 튀어 올라오지(?) 않던데 왜 그럴까요...?
감사합니다.
eun : 진짜 이 영상만 3번이상 복기하듯이 계속 보고 있습니다 친절한 설명 감사드립니다
Like TurTle : 와 .....얼마나 오래하셨어요? 키보드 치는 속도가 어마무시하네요....
이승케이 : 항상 도움이 많이 되는 영상입니다.z-index관련 질문이 있는데제가 웹페이지에 pdf를 삽입해서 띄울려고 하는데 pdf는 z-index가 안먹히나요??위 영상처럼 nav바에 마우스를 올렷을 때 내려오는 부분이 pdf를 덮었으면 하거든요지금 상태는 다른 부분은 다 덮는데 pdf 부분만 빼고 덮습니다. pdf는 div로 감싸놨구요조언 부탁드립니다.ㅠㅠㅠ
디자이너경준아빠 : 한가지 여쭐께요 대메뉴에서 마우스 오버하면 양쪽으로 라인생기는거 있자나요 크롬에서는 제대로 보이는데 익스플로러에서는 라인이 이상하게 보이더라구요 왜그렇죠? http://rdh6327.dothome.co.kr/Home_Practice/samsungsds/index.html
웹스토리보이님하고 리베하얀님 동영상 보고 독학해서 1년도 안되었는데 홈페이지 70개 넘게 만들었네요~ http://rdh6327.dothome.co.kr 감사드려요~^^ 제겐 은인이세요~
뛰뛰뿌앙뿌앙 : 38:00 이쯤에 left:50%; 하고 호버 시 left:0; 해주는데
이렇게하면 중간에서부터 퍼져나가는 효과가 되는 이유가 뭘까요...?
Shaun : 혹시 과외도 하시나요?

jQuery 22 [ 2Depth navigation Menu basic] 마우스를 올리면 서브메뉴 전체가 나타나는 효과 구현하기 - Sub menu animation

Sample Download: https://codepen.io/alikerock/pen/gZoqYw

2Depth navigation menu
- html 구조
- css 스타일
- script 구현하기

Code Editor: Notepad++
http://alikerock.tistory.com/
후원하기: https://toon.at/donate/ezwebpub

#jquery, #2depth, #linear gradient, #웹디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사
Rock's Easyweb : 질문 사항중 헤더의 높이가 늘어나면 아래 내용이 밀린다는 구독자님의 질문이 있어 수정본을 공유 드립니다.
아래 예제 참고해주세요.



핵심은 늘어나는 요소 header의 높이가 바뀌어도 다른 요소들이 모르도록 position:absolute를 적용하는 것입니다. 그러면 다른 요소들이 해당 요소의 존재자체를 모르고 위로 올라오기때문에 body에 padding-top을 주어 공간을 만들어 줍니다.


https://codepen.io/alikerock/pen/wvBmWyB
MALRO : 저 방법을 이용해서 메뉴를 만들어보았습니다. 하지만 홈페이지를 처음 접속 할때 최대 넓이로 보여지지더라구요. 마우스를 올렸다가 벗어나면 다시 최소넓이가 됩니다. 처음 접속했을때 최소넓이로 보여지게 할려면 어떻게 해야 하나요?
da_ huni : jQuery를 알아야지만 사용할 수 있나요?
html css javascript까지밖에 모르면 저런 메뉴는 만들 수 없는 걸까요 ㅠㅠㅜ
MALRO : 영상 보면서 따라 했더니 서브메뉴의 공간만 마우스 올릴 때 반응하고 2nd menu 같은 서브메뉴 구성들이 보이지 않습니다. 이건 어떻게 해결하면 되나요?
김영현 : 영상보고 따라했는데.. 서브메뉴는 아까 해결했고 포지션주는게 막힙니다 ㅜㅜ
cake Raspberry : 한가지 여쭙고자 댓글 남깁니다. 네비게이션 메뉴를 만들었는데 밑에 이미지를 넣게 되면 이미지가 자꾸 밑으로 내려갑니다..방법이 기억이 안나 댓글을 남겨봅니다. 이럴땐 서브메뉴에 포지션을 줘야 할까요?.
반하나 : 제가 찾던 강의가 여기있네요 너무 감사드닙니다 많이 배워가요
소영 Soyoung : 정말 꼭꼭 필요한 실무의 유용한 영상!! 감사합니다
이aaa : 귀한 영상 감사합니다. 한가지만 여쭤봐도 될까요? 서브메뉴 전체가 내려왔을때 마우스가 양쪽 사이드쪽으로 가면 다시 서브메뉴들이 접혀지는데 안접혀지게 하려면 제이쿼리를 어떻게 써야 하나요? http://zishen.com/ 이 사이트처럼 서브메뉴가 전체 내려왔을때 마우스 커서가 양쪽 사이드로 가도 안접히고 계속 유지되게 하려면 어떻게 해야되나요? ㅠㅠ 너무너무 만들고 싶은데 어떻게 해야될지 모르겠습니다.. 답변 주시면 대단히 감사하겠습니다.
이현용 : 오늘도 좋은 강의 감사합니다.

웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

HTML, CSS를 이용해서 (Javascript 약간) 반응형 헤더를 함께 만들어 볼꺼예요
현업팁을 배우면서 조금더 체계적으로 공부해 보고 싶다면 드림코딩 아카데미를 확인해 보세요 ❤️
드림코딩 아카데미: http://academy.dream-coding.com/

프론트엔드 개발자 되기 입문자편 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y

개발자 경력 관리 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotSyQ6RPdytiHID5Cmnv_sA3

이력서 작성 방법
https://www.youtube.com/playlist?list=PLv2d7VI9OotTZfvF0s8Vs0gpRtodlTsgg

IT 트렌드
https://www.youtube.com/playlist?list=PLv2d7VI9OotRTfM1zJLQMCLriBpLFg8r-

개발자 브이로그
https://www.youtube.com/playlist?list=PLv2d7VI9OotR1tALnxov7sAUshyBmfYfU

생산력 향상 팁
https://www.youtube.com/playlist?list=PLv2d7VI9OotQB-9p29xrAnARhuE1Vf88I

Music
Title: Special Days by JayJen
Genre and Mood: Dance \u0026 Electronic + Bright
License: Royalty-free music for YouTube, Facebook and Instagram videos giving the appropriate credit.

#반응형웹#프론트엔드#웹개발
Lighthouse : JS파트에서 toggle 에러현상을 경험하여 공유하고자 댓글을 씁니다. 혹시 같은 문제로 고민하시는 분들이 계실까봐요.

메뉴바를 클릭했을 때 메뉴와 아이콘이 일시적으로 나타났다 바로 사라지는 현상이 생겼는데 html에서 a href=" " 이 부분이 공백으로 되어서 그런 현상이 발생하는 것 같습니다.
a href= "#"을 넣어주면 메뉴와 아이콘이 일시적으로 나타났다 사라지는 현상이 없어집니다. 참 사소한 거라 생각했는데 사소한게 아니었네요.
real ro : 스타트업 운영중이구요, 외주를 주려하다가...당장 급한 프로젝트는 끝나서, 공돌인데 한번 직접 해보자는 생각으로 영상을 보면서 따라왔습니다. 백그라운드가 없어서 1시간 좀 넘게 걸렸습니다. 양질의 강의에 감사드립니다.
yangsong62 YuYun : 지금 영상보면서 노트에 일일이 적어가면서 머릿속에 넣는 작업을 했고요 이제 곧 리마인딩 하면서 만들어 보려고 합니다. 초보에겐 좀 어려운 영상이었지만 멈추고 생각해보거나 되돌려보면서 공부했어요~ 너무 좋은 강의 만들어주셔서 감사합니다 ^^ 쭉 따라갈게요~
NR : 강의 넘나 좋은데. 비전공자 입문한테는 속도가 넘 빠르네요 ㅜㅜ. 한 열번은 봐야 혼자 만들수 있을거같아요 ㅎㅎ
아이언 : 혼자 해보려다가 display: flex; 빼먹어가지고 계속 안되길래 결국 영상보고 따라했어요ㅠㅠ 내일 쯤 다시 안보고 해볼래요
Patrick : 과제에 큰 도움이 되는 영상입니다 ㅠㅠ
민주호 : 목소리 좋으시네요
Blackwidow : 힌트보고 해보는데까지 하다가 안되서 다 보고 해보는데까지 하다가 안되는 부분 영상보고 따라하는데도 안되는 부분 있어서 리뷰해서 다시 코딩해봐야할것같아요! 처음이니까 어려운거라고 생각하고 좌절하지 않고 될때까지 하려고 합니다^^
정Blue : 저는 다른 프로그램으로 공부했어서 적응하느라 한시간 반 정도 걸렸네유ㅠㅠ 더 연습 많이 해야겠어요!!
밍끼 : 안녕하세요 js가 오류가나서 개발자 모드로 보니
toggleBtn.addEventListener('click', () => {
이 부분에서 오류가 난다고 표시되있는데
이상하게 으로하면 이렇게 오류가 뜨고
defer를 넣어주면 js가 정상 작동합니다.
브라켓에서 진행중인데 무슨 오류일까요??

... 

#html5메뉴

댓글목록

등록된 댓글이 없습니다.

전체 1,096건 1 페이지
게시물 검색
Copyright © www.yemi.re.kr. All rights reserved.  Contact : help@oxmail.xyz