[원래 댓글안남기는 1인] 얼마전 들었던 강의인데, 다시 또 들으러 왔습니다. 들을때는 이해가 완전히 된 것 같은데, 다른 작업에 적용하려면 잘 안되서 또 듣고 도움받아서 갑니다. 댓글에 인색한 1인, 빔캠프 강의는 감사함에 고개가 절로 숙여져서, 감사의 표시를 댓글로라도 남기고 싶습니다.
초반에는 단순히 영상보며 똑같이 코딩 할려 했으나 (그러다보니 지루해지는 면도 있더라구요), 일단 소중히 제작해주신 영상을 편안히 쭉 본후에, 기존에 만드신 최종 결과물 시안만 참고하여 제가 직접 쳐보는 방식으로 하려고 합니다 취지가 디자인을 똑같이 따라하는게 아닌, 변화를 줘보라고 하셨으니 그렇게 하도록 하겠습니다 그래야만 자기께 될것 같더라구요 (태그안에 별도의 속성을 만들어서 가상 CSS 쓰는 기법, Sticky 속성, padding-top을 이용해 background image의 height와 동일한 효과를 내는 기법 등.... 정말 알찼던것 같습니다) 감사합니다:)
강의 너무 감사드려요. 말씀하신대로 모방하며 새로 응용하며 학습해보고 있다가 갑자기 막히는 부분이 있었습니다. Profile image를 동영상 애니메이션 mp4으로 대체해보면 어떨까 해서 적용해보려는데 동영상은 들어가지지 않습니다... Html에 를 넣어야 하는지요? ... 하루 종일 이런 저런 방식 적용하다가 너무 답답해져서 이렇게 코멘트를 달게 되었습니다 ㅠㅠ 단비같은 힌트만 주셔도 고맙겠습니다!
potential L 영문의 경우, 기본적으로 띄어쓰기 기준, 줄바꿈이 됩니다. 단어를 중간에 자르지 않고 모두 나오게 표현해줍니다. 덕분에 문단의 오른쪽이 막 물결이 치죠 ㅎㅎ 그래서 word-break: break-all 등과 같은 속성으로 단어 중간에서도 줄바꿈이 가능하게 바꿔주는 경우는 있습니다.
궁금한 점이 있습니다. 맨 처음 .portrait 에 background-image 를 줘서 이미지를 불러오는데요? 그 다음에 padding-top을 주면 모바일이나 pc화면에서 이미지가 보이는데, height를 주면 모바일 화면에서는 이미지가 짤려버립니다. 어째서 padding-top은 둘다 되고, height는 하나만 되는지 궁금합니다.
padding-top을 %로 주게되면 부모의 너비 기준으로 계산이 되구요, height를 %로 주게되면 부모의 height값 기준으로 계산이 되는데 부모의 height가 auto인 경우에는 0만을 가져옵니다. %가 CSS의 속성이 뭐냐에 따라 의미하는바(기준)가 다르다고 할 수 있습니다. :)
@@veamcamp viewport의 device-width 와 initial-scale=1.0의 의미를 이해하는 데 한 참 걸렸어요. device-width는 기기의 가로 해상도에 맞춘다. 즉 물리적 1픽셀을 css 1픽셀과 동일하게 적용한다는 뜻이고 initial-scale=1.0은 기기의 물리적 해상도가 높을 경우 기기에 따라 다르지만 물리적으로 2~4픽셀을 css의 1픽셀에 대응해서 표현한다는 뜻으로 이해하기는 했습니다. 이렇게 이해하면 왜 그런가 제 나름의 설명은 되는지 정말 제가 이해한게 맞는지는 궁금합니다. 혹시 알려주시면 감사하겠습니다.^^
댓글 진짜 처음 남겨보네요!! 가장 이해도 높고 실무적인 느낌이라 도움을 많이 받고 있습니다:) 한가지 질문이 있는데 vw,vh가 아직 브라우저에 적용이 안되는게 많잖아요?? 그래서 배경이미지에 left:0; top:0; bottom:0을 주고 padding-left:60%를 주니까 얼추 비슷하게 적용이 되더라구요!! 그리고 .profile에 padding-left:60%를 주었는데 뭔가 배경이미지랑 글자가 겹쳐나오기에 65%를 주니 얼추 양옆이 맞게 되었습니다. 이 경우 위에서 .profile에게 주었던 padding:5%가 겹쳐서 그런건가요?? 그리고 이렇게 적용하여 사용해도 괜찮을까요???
전체 코드를 보는 것이 아니라 정확히 파악은 어렵지만 큰 문제 없을 것 같네용. padding을 %로 처리하면 부모의 너비 기준에서의 %로 동작 됩니다. vw, vh의 호환성이 우려된다면 html, body { height: 100%; } 이런식으로 해당요소의 부모(들)에게 height: 100% 주는 예전 방식도 있습니다. 도움이 되었는지 모르겠네요 ㅎㅎ
감사합니다 :) 선생님의 비디오들 2-3번씩 보니까 정말 도움이 많이 됐어요. 특히 아는줄 알았는데 확실히 몰랐던것들 e.g. vertical-align, inheritance, overflow 등등 가능하시면 다음에 specificity랑 cascade를 잘 정리하면서 작업하는 대해서도 유툽으로 강의 해주실수 있나요? 한국에서 살았다면 꼭 강의 들어보고 싶은데 너무 멀리 있어서 그건 불가능하네요;;; ㅋㅋㅋ
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
정말 감사합니다 !!!
도움이 되어 기쁩니다 :)
[원래 댓글안남기는 1인] 얼마전 들었던 강의인데, 다시 또 들으러 왔습니다. 들을때는 이해가 완전히 된 것 같은데, 다른 작업에 적용하려면 잘 안되서 또 듣고 도움받아서 갑니다. 댓글에 인색한 1인, 빔캠프 강의는 감사함에 고개가 절로 숙여져서, 감사의 표시를 댓글로라도 남기고 싶습니다.
감사합니다 :) 정말 소중한 댓글이네요 ㅎㅎ 도움이 되어 정말 기쁩니다
이..이렇게 좋은 강의를 이제서야 찾았네요;;.... 쭉.. 감사히 잘보겠습니다 엄청난 도움이 되네요^_^
바로 구독 좋아요 눌렀습니다 ㅎㅎ
시청 감사합니다 :)
@@veamcamp 우와 바로 답글을 달아주시는게 신기하네요.. ㅋㅋ 혼자 캐나다에서 공부중인데 잘부탁드리겠습니다^_^
네 재미있는 코딩 되시길 바래요 ㅎㅎ
초반에는 단순히 영상보며 똑같이 코딩 할려 했으나 (그러다보니 지루해지는 면도 있더라구요), 일단 소중히 제작해주신 영상을 편안히 쭉 본후에,
기존에 만드신 최종 결과물 시안만 참고하여 제가 직접 쳐보는 방식으로 하려고 합니다
취지가 디자인을 똑같이 따라하는게 아닌, 변화를 줘보라고 하셨으니 그렇게 하도록 하겠습니다 그래야만 자기께 될것 같더라구요
(태그안에 별도의 속성을 만들어서 가상 CSS 쓰는 기법, Sticky 속성, padding-top을 이용해 background image의 height와 동일한 효과를 내는 기법 등.... 정말 알찼던것 같습니다)
감사합니다:)
LiberSpiritus 아주 좋은 방식이네요! 결과물 나오면 공유해주세요 ㅎㅎㅎ
강의 너무 감사드려요. 말씀하신대로 모방하며 새로 응용하며 학습해보고 있다가 갑자기 막히는 부분이 있었습니다.
Profile image를 동영상 애니메이션 mp4으로 대체해보면 어떨까 해서 적용해보려는데 동영상은 들어가지지 않습니다... Html에 를 넣어야 하는지요? ... 하루 종일 이런 저런 방식 적용하다가 너무 답답해져서 이렇게 코멘트를 달게 되었습니다 ㅠㅠ 단비같은 힌트만 주셔도 고맙겠습니다!
네 video 태그로 영상을 넣어야 합니다 :) 댓글 달아주셔서 감사합니다!
파일 다운로드가 안되네요. 주소가 다시 바뀌었나요?
꼭 연결해 주세요.
veam.ml/youtube/aboutme/index.html
위 주소입니다 :)
@@veamcamp 감사합니다. 어르신들 한글교육 웹페이지를 만들려고 합니다. 예전에 홈페이지 만들었던 지식으로 하나 하나 더듬어 가면서 만들려고 하고 있습니다. 웹연동형 앱으로 만들려고 하니 반응형 웹디자인을 해야겠더군요. 강의 보고 잘 따라하겠습니다.
Lemon Tree 의미있는 작업물이 되겠군요 댓글 감사합니다 :)
공부하는 입장에서 스피드코딩보다 이런영상이 더유익하고 좋네요~보고 따라하면서 공부좀 할게요~!!감사핮니다~좋아요 구독 알림설정까지 ㄱㄱ
네 감사합니다 :)
영상 하나하나마다 정말 큰 배움을 얻습니다. 감사합니다.
감사함을 이렇게 또 댓글로 표현해 주셔서 감사합니다 :)
veam.ml/youtube/aboutme/index.html
위 주소로 변경되었습니다 :) 다운로드는 구글 크롬 브라우저 사용을 권장합니다.
감사합니다! 제대로 작동하네요
답변 부탁드립니다 이영상 보면서 작업 하는데 저는 번개모양 버튼이없어요 다른 방법으로는 확인 못하나요? 아니면 어덯게 하면 번개가 나오나요? 제발 다변해 주세요
쓰시는 에디터가 브라켓스인가요? 본 영상에서 쓰는 에디터는 브라켓스입니다. 브라켓스인데도 나오지 않으면 재설치 시도 해보시길 바랍니다 :)
빔캠프 VEAMCAMP 아니요 vs studio 요
어덯게 하면 좋을까요 지금 막 보면서 하는중인데
@@jakekim1357 VSCode는 저도 써보지 않아서 정확히는 모르는데요. 검색해보니 boheeee.tistory.com/20 이 익스텐션 설치하면 가능한 것 같네요 ㅎㅎ
빔캠프 VEAMCAMP 이걸 설치한다음엔 뭘하면 되죠?
이론으로만 배우고 실제로는 어떻게 적용해야 되는지가 문제였는데 정말 감사합니다
네 티티하우스 시리즈의 목표가 바로 그것이에요 ㅎㅎ 댓글 감사합니다 :)
안녕하세요 유용한 강의 감사드립니다:) 그런데 I'm a designer 밑에 p로 감싼 텍스트 들에 대해서는 따로 정렬이 필요없나요? 영문의 경우 white-space나 word-break를 써야한다고 들어서요
potential L 영문의 경우, 기본적으로 띄어쓰기 기준, 줄바꿈이 됩니다. 단어를 중간에 자르지 않고 모두 나오게 표현해줍니다. 덕분에 문단의 오른쪽이 막 물결이 치죠 ㅎㅎ 그래서 word-break: break-all 등과 같은 속성으로 단어 중간에서도 줄바꿈이 가능하게 바꿔주는 경우는 있습니다.
@@veamcamp 그러면 임의로 p태그 안에서 줄바꿈하고 싶으면 br로 조정해도 되나요?끊고 다음줄로 넘시고 싶은 부분들이 있어서요 ㅠ 다른방법이 있을까요?
potential L br로 줄바꿈되는 부분 기준으로 여러 문단이 만들어지는 것이라면 p태그를 여러개 쓰는것이 맞겠구요. p태그 안에서 br을 쓰게되면 나중에 반응형웹에서 어색해지는 경우가 있기에 주의하시는게 좋아요 ㅎㅎ
궁금한 점이 있습니다. 맨 처음 .portrait 에 background-image 를 줘서 이미지를 불러오는데요? 그 다음에 padding-top을 주면 모바일이나 pc화면에서 이미지가 보이는데, height를 주면
모바일 화면에서는 이미지가 짤려버립니다. 어째서 padding-top은 둘다 되고, height는 하나만 되는지 궁금합니다.
height를 혹시 %로 주셨나요?
@@veamcamp 네, 그렇습니다. 56.25% 로 줬습니다.
@@veamcamp 네 56.25% 로 주었습니다.
padding-top을 %로 주게되면 부모의 너비 기준으로 계산이 되구요, height를 %로 주게되면 부모의 height값 기준으로 계산이 되는데 부모의 height가 auto인 경우에는 0만을 가져옵니다. %가 CSS의 속성이 뭐냐에 따라 의미하는바(기준)가 다르다고 할 수 있습니다. :)
@@veamcamp 그렇다면, 부모가 height 값이 없는 경우에는 지금값이 오토값으로 0을 반환해서 안나오는 것이네요... 부모값에 height값을 준 다음에 %를 쓸수 있겠네요. 감사합니다.
한 참 해보았지만 이제 한계네요. ㅜㅜ 안드로이드(갤럭시 s10e)에서 미디어쿼리가 안 먹는 듯 합니다 . PC에서느 뷰포트의 가로사이즈가 768픽셀 이하가 되면 모바일웹으로 변하는 데 스마트폰에서는 안되네요. 이유가 궁금합니다
혹시나 해서 를 로 바꾸어 보았는데 되네요.
해결 되었다니 다행입니다 :)
@@veamcamp viewport의 device-width 와 initial-scale=1.0의 의미를 이해하는 데 한 참 걸렸어요. device-width는 기기의 가로 해상도에 맞춘다. 즉 물리적 1픽셀을 css 1픽셀과 동일하게 적용한다는 뜻이고 initial-scale=1.0은 기기의 물리적 해상도가 높을 경우 기기에 따라 다르지만 물리적으로 2~4픽셀을 css의 1픽셀에 대응해서 표현한다는 뜻으로 이해하기는 했습니다. 이렇게 이해하면 왜 그런가 제 나름의 설명은 되는지 정말 제가 이해한게 맞는지는 궁금합니다. 혹시 알려주시면 감사하겠습니다.^^
spring 기반으로 실습하고 있는 학생인데 keyframes rolling이 적용이 안되는데 혹시 다른 방법이있을까요?
스프링 기반인것은 크게 상관이 없을 것 같구요 keyframes 의 호환성을 우선 체크해 보세요 ㅎㅎ 최신 브라우저에서만 사용가능합니당. 그 이유가 아니라면 전체 코드를 봐야 문제를 알 수 있겠네요
이메일로 작업한 내용 보내드렸습니다. 감사합니다.
네 확인해보겠습니다 :) 참여해 주셔서 감사합니다.
브라켓으로 style.css 에서 백그라운드 이미지 url로 바르게 설정해서 미리보기 해도 이미지가 안뜨네요 ㅠㅠ 왜그런걸까요
파일 저장 후 새로고침은 해보셨는지요? 그래도 이미지가 뜨지 않는다면 아마도 경로 문제일것입니다. 정확한 위치의 이미지를 불러오고있는지 확인해주세요.
@@veamcamp ㅠㅠ 다 해봤습니다 그래도 안되네요 경로도 확실하게 했습니다 커서 대면 이미지도 나오고요 설정 이라던가 다른 곳을 건드려야 할까요?ㅠ
TheRiver강이 배경이미지가 깔리는 요소의 높이가 잡혀있나요? background-color도 적용해서 확인해보세요
@@veamcamp 네 위에 영상처럼 그대로 style.css 에 height까지 해주고 해봤는데도 변화가 없습니다
그리고 방금 해봤는데요 background-color 도 적용이 안됩니다 기본적인 설정이 문제일까요 왜그럴까요ㅠㅠ
아니면 혹시 중간에 생략된 부분이 있는건가요? html 부분이라던지..
사이트의 예제들을 받으려고 하는데 클릭해도 받아지지가 않습니다 ㅠ
veam.ml/youtube/aboutme
위 주소로 변경되었습니다. 계속 주소가 변경되어 불편을 드렸네요.ㅜㅜ
댓글 진짜 처음 남겨보네요!! 가장 이해도 높고 실무적인 느낌이라 도움을 많이 받고 있습니다:) 한가지 질문이 있는데 vw,vh가 아직 브라우저에 적용이 안되는게 많잖아요?? 그래서 배경이미지에 left:0; top:0; bottom:0을 주고 padding-left:60%를 주니까 얼추 비슷하게 적용이 되더라구요!! 그리고 .profile에 padding-left:60%를 주었는데 뭔가 배경이미지랑 글자가 겹쳐나오기에 65%를 주니 얼추 양옆이 맞게 되었습니다. 이 경우 위에서 .profile에게 주었던 padding:5%가 겹쳐서 그런건가요?? 그리고 이렇게 적용하여 사용해도 괜찮을까요???
전체 코드를 보는 것이 아니라 정확히 파악은 어렵지만 큰 문제 없을 것 같네용. padding을 %로 처리하면 부모의 너비 기준에서의 %로 동작 됩니다.
vw, vh의 호환성이 우려된다면 html, body { height: 100%; } 이런식으로 해당요소의 부모(들)에게 height: 100% 주는 예전 방식도 있습니다.
도움이 되었는지 모르겠네요 ㅎㅎ
감사합니다 :) 선생님의 비디오들 2-3번씩 보니까 정말 도움이 많이 됐어요. 특히 아는줄 알았는데 확실히 몰랐던것들 e.g. vertical-align, inheritance, overflow 등등
가능하시면 다음에 specificity랑 cascade를 잘 정리하면서 작업하는 대해서도 유툽으로 강의 해주실수 있나요? 한국에서 살았다면 꼭 강의 들어보고 싶은데 너무 멀리 있어서 그건 불가능하네요;;; ㅋㅋㅋ
specificity 관련 강의도 있기는 있는데 그렇게 심도가 깊지는 않은것 같네요 ㅎㅎ ruclips.net/video/p6VxdiNTrGg/видео.html
@@veamcamp 헉 ㅋㅋㅋ 제가 그 비디오는 있는줄 몰랐네요! 감사합니다!!
사용하시는 웹 아이콘을 어디서 구하시는지 궁금합니다
전 iconmonstr.com 애용합니다!
@@veamcamp 감사합니다!
좋은 영상 감사드립니다! 예제보기 및 다운로드 링크가 깨져있는게 확인해주실 수 있나요?
tths.me/youtube/aboutme
위 링크에서 받으실 수 있습니다. 불편을 드려 죄송합니다!
올려주신 링크에 예제를 받으려는데 클리해도 받아지지가 않습니다 ㅠ 문제가 생겻나요?
veam.ml/youtube/aboutme
위 주소로 변경되었습니다. 계속 주소가 변경되어 불편을 드렸네요.ㅜㅜ
와 처음부터 끝까지 집중해서 감상했습니다! 감사합니다!!!!
혹시 영상 화질을 1080p 까지 올려주실 수 있으신가요?! 글씨가 좀 더 또렷하게 보였으면해서요!
탁구천재루이 네 얼른 돈 많이 벌어서 장비를 업그레이드 하도록 할께요 ㅎㅎ 현재는 아쉽게도 720p네요 ㅠㅠ
404하면서 다운받을수가 없다고 떠요 새로운주소로 들어가봤는대
새로고침하셔서 다시 들어가보세요 :)
따라해 보고 싶은데요 시작파일 다운로드 하려고 t.veam.me/aboutme/ 접속했는데요. 접속이 안되는것 같습니다.
veam.ml/youtube/aboutme/
위 주소로 변경 되었습니다 :)
메타태그로 utf-8을 주었는데... 제이쿼리로 만든 텍스트가 깨지는 이유가 뭔가요?
js파일의 인코딩이 utf-8인지 확인해 보셔야 겠네요
js파일도 인코딩 해줘야 하는지 몰랐네요 ㅠ 감사합니다!
멋진 강의 너무 잘 보고 갑니다. 좋아요도 꾸~~ 욱
좋게 봐 주셔서 감사합니다 :)
감사 합니다.. 진심 고맙습니다.
네
댓글 감사합니다 :)
공부해야 겠어요!!!!
응원합니다 :)
ㅎㅎㅎ 넵! 공손히 던져야 겠네요!!
모방, 창조, 변형의 정신!! ㅎㅎ
강경우 모방 > 변형 > 창조 입니다 ㅎㅎㅎ
@@veamcamp 앗! ㅎㅎ
예제 다운하려고 사이트 들어가려했는데 t.veam.me 사이트가 안들어가져요...
혹시 다운로드 사이트를 바로 주실 수 있으신가요...ㅜㅜ
+좋은 영상 올려주셔서 감사합니다..
tths.me/youtube/aboutme/
위 주소로 변경 되었습니다 :)