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

HTML, CSS를 이용해서 (Javascript 약간) 반응형 헤더를 함께 만들어 볼꺼예요
(↙ 자세한 내용)

___________________________

풀스택 개발 로드맵 ⇢ https://academy.dream-coding.com/pages/912e50

엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
http://academy.dream-coding.com/

.....................................................

☀️ 드림코딩 엘리
모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
❝Don't forget to code your dream
여러분들의 멋진 꿈을 코딩하세요 ⭐️

.....................................................


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

자바스크립트 기초 강의 영상 목록:
https://www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

개발자라면 누구나 알고 있으면 좋은 지식
https://www.youtube.com/playlist?list=PLv2d7VI9OotSn1ThdDeqvBx8QuRSd01qv

개발자 경력 관리 영상 목록:
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= "#"을 넣어주면 메뉴와 아이콘이 일시적으로 나타났다 사라지는 현상이 없어집니다. 참 사소한 거라 생각했는데 사소한게 아니었네요.
준오박 : toggle 버튼 이벤트 안되시는 분들은 html과 js를 연결시켜주는 부분을 헤드랑 바디 보다 더 아래에 script로 연결해주시면 해결됩니다! body가 먼저 로딩되구 스크립트가 들어가줘야지 정상적으로 작동합니다.
블레어의 일기 La petite Blair : 우와..엘리님 코딩 기초반 수업듣고 과제하다가 이해가지 않는 부분들이 좀 있었는데 이 영상으로 다 해결되었어요!! 양질의 컨텐츠를 이렇게 공유해주셔서 감사합니당 ㅜㅜ 주변에 코딩공부하는 친구들한테도 공유할게요:)
wanseop kim : 엘리님 항상 느끼는거지만 정말 세세하고 이해하기 쉽게 잘 설명해주셔서 감사합니다! 항상보면서 많은 도움을 받고 있어요 힘드시겠지만 앞으로도 계속 좋은 강의들 부탁드립니다!!
So Won Moon : 선생님 수업 너무너무 좋아요. 명확하고 이해가 잘됩니다. 매 강의마다 감탄하면서 따라가고 있어요^^ 감사합니다.

HTML+CSS 5 :하위메뉴가 열리는 메뉴 만들기 - 전주코딩학원


다락공방 : 좋은 강의 감사합니다. 따라하니 어렵지 않게 만들 수 있었습니다.
Thinker : 감사합니다. 덕분에 정말 많은 도움이 됐습니다.
K_HS : 구독했어요... 너무 잘 가르치세요!! 감사합니다 :)
9590 OH : display none이였다가 마우스 올려서 block으로 변경이 되면 그 밑에있던 컨텐츠들이 메뉴 아래로 밀리는 현상이 있는데 z-index값으로 우선순위를 줘야 영역이 안밀리고 컨텐츠 위에 겹쳐서 표시가 되는건가요?아니면 javascript로 표현 해야 하는건가요??
정재희 : 감사합니다 ㅠㅠ 은근 만들기 넘 어려웠는데 ㅠㅠ 완전 꿀팁이네욯ㅎ

탭메뉴 제작 - 웹퍼블리셔를 위한 HTML5와 CSS3를 활용한 기초 실무

안녕하세요. 리베하얀입니다.
HTML5 + CSS3를 활용한 탭메뉴 제작영상입니다.
감사합니다.


────────────────────────

리베하얀이 직접 알려드리는 기초부터 포트폴리오 제작까지
340여개의 강의영상을 클래스 101에서 보실 수 있습니다.
https://class101.app/e/Rebehayan_Course_class

────────────────────────

- 리베하얀의 작업환경 -
LG그램 17인치 노트북 : https://link.coupang.com/a/m5i1s
Filco 기계식 키보드 : https://link.coupang.com/a/m5jHX
아이락스 무소음 키보드 : https://link.coupang.com/a/nmHdP
레이저 오로치 마우스 : https://link.coupang.com/a/m5jTC

- 리베하얀의 촬영환경 -
UFO USB 마이크 : https://link.coupang.com/a/m5jZ4
소니카메라 A6400 : https://link.coupang.com/a/nmE72
소니렌즈 35.8 : https://link.coupang.com/a/nmFhj
룩스패드 조명 : https://link.coupang.com/a/nmFc7


위 링크에는 추천인링크가 포함되어 있어서 링크를 통해서 물건을 구매하시게 되면 저에게 소정의 수수료가 지급됩니다.
yoker moon : 꼼꼼한 설명에 진짜 그동안 헷갈렸던 부분들이 엄청 해결됐어요.,.. 우와.... 진짜 대단하세요!!! 감사합니다!
김동욱 : 너무 유익한 교육 잘 들었습니다 정말 감사합니다!
질문이 하나 있어서 올려봅니다!
.nav_type1 ul li a.on에 border-color:#5da62b; border-top-width: 2px;라고 주셨는데,
제가 생각했을 때, border-top : 2px solid #5da62b; 준것과 같다고 생각해서 바꿔서 적었더니
a.on클래스에 오른쪽초록 선이 사라지더라구요....

혹시 두개의 차이가 무슨 차이인지 알려주실수 있으신가요?
DesignerL : 안녕하세요 ㅎㅎ 영상너무잘보고 있습니다!짱짱! 저는 조그만회사에서 실무사용하려고 독학중인데 책한권안보고 하얀님꺼만보면서 응용해서 실무제작중인데요 ㅎㅎ 반응형이아닐경우 css로 나름 눈으로는 완벽하게 디자인을 구현했다면 실제실무에서 사용시 문제가없는걸까요?.. 그리고 ... 하위버전익스플로러를고려한다면 flex를 사용해도되는건지 궁금합니다!
동태완 : border를 zindex를 통해 컨트롤한다면 위와같은 결과를 얻을수 있을가요? ex) ul보더 회색, li 보더(class on) 녹색&보더바텀 흰색
행라이프 hanglife : 궁금한게 있습니다!속성값마다 엔터를 치는게 더 좋은건지 아니면 쭉 엔터없이 쓰는게 더 좋은건지 궁금하네요ㅜ 이건 그냥 사람취향에 따라 다른건가요?

...