#06. img 태그(이미지 태그) 근본 있게 배워보기 - 프론트엔드 개발자 입문편 / HTML + CSS / 웹 코딩
HTML-код
- Опубликовано: 7 авг 2020
- "img 태그 강의가 무슨 15분이나 해?😅" 이런 생각은 NO ~ !!🔥🔥
파일 경로, src 속성, alt 속성, width 속성, height 속성, 이미지 링크까지 이 영상 하나에 모두 담았습니다!😎😁
저도 짧게 만들고 싶었는데 img 태그 너무너무 중요해요!!🧐
15분만 투자하면 다른데에서 img 태그 강의 영상 안봐도 됩니다. 🥳🤩
저를 믿고 근본 있는 img 태그 지식을 쌓아보러 고고고~🔥🔥
* BGM 정보 Music | With You by Declan DP
Watch: • Royalty Free Music for...
License: www.declandp.info/license
Download/Stream: hypeddit.com/link/gbhbv9
#img태그 #이미지태그 #이미지링크
독학하면서 이미지 경로가 이해되지 않아서 그냥 넘기고 있었는데 이 영상을 보고 단박에 알게됐네요ㅠㅠ 좋은 강좌 감사합니다!!
도움이 되셨다면 참 다행입니다!
제 구세주.... 진짜 다른유료강의보다 훨씬 쉽고 잘가르쳐주셔요 늘 감사한마음으로 배우고있습니다 ..!!
너무 감사합니다. 이해하기 쉽게 설명해주시는것 같아요!!
혼자 코딩 독학 해보겠다고 자바스크립트 책 사서 맨땅에 헤딩하듯이 배우고 있었는데, 막히는 부분이 많아서 일단 html/css 개념부터 잡고 다시 해보자는 마음으로 듣는데 하루만에 6강까지 들었네요..!!!! ㅠㅠ..! 혼자 예제 풀면서 모르는 속성이나 태그 나올때마다 뭐가 뭔지 몰라서 일일히 검색하면서 하느라 시간 엄청 잡아먹다가 포기하고 넘어간 적 많았는데, 몰랐던 부분 엄청 많이 해결될 것 같아요..! 감사합니다 ㅠㅠ 내용도 엄청 간략하고 쉽게 설명해주셔서 더 좋은거 같아요..! 구독하고 재생목록에도 추가했습니다..! 히히
와 진짜 대박 잘알려주신다 진짜 차원이달라요 사랑해요
아 진짜 넘 쉽게 이해됩니다
감사해요🙏🙏🙏
너무 좋은 강의 감사합니다. 구독하고 앞으로 꾸준히 강의 듣겠습니다.
감사합니다. 즐거운 코딩 공부시간되세요!
이전에 배웠던 것들을 적용하면서 알려주셔서, 앞에 배웠던 것들이 앞으로 어디에 적용시키면 될지 그림이 그려져서 더욱 좋은 것 같습니다! 감사합니다:-)
제가 더 감사합니다 🙏
많이 배웠습니다. 다른 곳에선 들을 수 없는 자세한 설명 이네요. 기초가 탄탄해지는 느낌이예요. ^^
감사합니다 :)
오~ 감사합니다.헤메고있었는데 도움 많이 받았습니다.
선생님은 제 생명의 은인이에요 좋은 컨텐츠 너무 감사합니다.
제가 더 감사합니다:)
이런걸 어떻게 독학으로 이해할수 있을까요...
진짜 감사합니다.
큰 도움이 되었어요^^
정말정말 잘보고 있어요! 많이 돈쓰면서 배웠는데 아직도 개발자가 못되었는데 ㅜㅜ 다시 과외받는 느낌이라 너무너무 좋습니다💛
감사합니다 :)
맞아요 독학이라는 게 생각보다 힘들어요.
너무 감사합니다.😂
현재 초 5학년인데 웝페이지에 들어갈 배경 크기 조정을 어떻게 하는지 몰라서 유튜브를 뒤졌거든요😂
최고다 ...최고 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ
도움이 되셔서 다행이네요 감사합니다 🙏
선생님 천재같아요. 책 사러 갑니다 쓩
🙏
🙏감사합니다. 👍👍👍
제가 더 감사합니다 :)
영상 잘 만드셨네요 ^^ 이미지 사이즈의 크기 중 width="50%"의 설명을 정정해야 할듯합니다. ~~ 영상 너무 잘 만드셨어요
이미지 넣는거 폴더경로만 알아서 웹사이트들 이미지는 어떻게 넣은건지 이해가 안됐었는데 드디어 이해가 됐어요 감사합니다!!
다행이네요! :)
안녕하세요 수코딩님, 재미있는 강의 잘 봤습니다! 좋아요와 구독 했습니다!
여쭤보고 싶은게 있는데, 혹시 한개의 이미지 안에서 위치를 지정하여 하이퍼링크를 여러개 줄 수 있나요?
강의 속 다리이미지를 예를들어, 다리를 누르면 a사이트, 하늘을 누르면 b사이트로 이동하는 방식이 가능한지 궁금합니다.
초등학생때 메모장으로 배운 html 밖에 모르는데...거래처에서 요청이 들어와서 급하게 공부중입니다ㅠㅠㅎㅎ
이미지맵이라는 기술인데, 마침 제 영상이 있습니다. 아래 영상을 참고해보세요! ruclips.net/video/aZ2pBmnm9B0/видео.html
만약에 바탕화면에서 이미지가 있는것이 아니고 D 드라이브에 (이동식디스크에) 있는 경우라면
라고 해야되는건가요 ?
이동식디스크 (D 드라이브) 에 있는 경우는 어떻게 해야 이미지가 나오는지 궁금합니다
선생님 마지막에 사이에 이미지 하이퍼링크설명해주셨는데 그이미지를 가운데정렬하려면 어떻게 해야될까요 ^^? test-align 센터가 안먹혀요 ㅠㅠ
감사합니다. 잘봤습니다. 도움받아 댓글 남기고 갑니다.
감사합니다!!
와 간단하고 짧으면서도, 핵심적인 내용은 다 건들고, 훌륭한 응용까지 ㄷㄷ... 지금까지 봤던 유튜브 강의중 수코딩님 시리즈가 제일 맘에 드네요.
지금까지 앵커 태그를 항상 텍스트에만 적용하는것만 보고 배워서 이미지에 할 생각은 생각도 못했는데, 좀더 유연한 사고를 해야겠다는 충격적인 강의네요
감사합니다 🙏
../를 했는데도 사진이 그대로 보여요 그래서 live server로 안하고 index 파일 찾아서 눌러서 봤는데 거기는 사진이 안나온다고 잘되요 왜 그런건가요?
세련되심
감사합니다:)
이미지 경로는 복사를 이용해도 문제 없을까요?
전공이후 처음 다시 기초를 다지는중인데..구독할정도로 너무 유용해요..! 감사합니다!!!🥰
구독 감사합니다 !!
분명이 같은 파일에 있는데도 ./images/파일이름.jpg 했는데 이미지가 안뜨네요 ㅠ
그래서 그냥 images 빼고 파일 이름.jpg 했는데 뜨네요 뭐가 문제인걸까요..
./images/파일이름.jpg 라고 하셨는데 안됬는데, 파일이름.jpg 하면 된다는 건 조금 이상하긴 합니다. 두 개는 참조하려는 폴더 자체가 다른건데.. 혹시 index.html이 images 폴더 안에 있지는 않으신가요?
폴더 내에 있는 html로 열었을 때는 경로 잘못 지정했을 때, 이미지가 깨지는 걸 확인했습니다.
궁금한 건 Live Server로 열었을 때는 경로가 잘못 지정되어도 이미지가 잘 나오던데 이것도 Live Server 기능 중 하나인가요?
아니요 :) 뭔가 다른 이유가 있을 듯 합니다.
@@sucoding 더 공부해봐야겠네요! 답변 감사합니다 :D
안녕하세요 잘 보고있는데요 분명 프로그램에서 돌리고 다른 이름으로 저장하 였을때는 이미지가 나오는데 쇼핑몰에 html로 등록하고 변화한걸 보면 사진이 깨져있네요ㅜㅜㅜ 이건 왜그런거죠? ㅜㅜ
이미지가 깨진다는건 결국 경로 문제인데.. 만약 이미지의 경로를 "img/10.jpg"처럼 적으셨다면 "./img/10.jpg"처럼 ./을 붙여 보시겠어요? ㅎ
영상대로 따라해봤는데 왜 이미지 첨부가 안될까요ㅠㅠ 제 거는 폴더에 크롬이 아니라 마이크로소프트 엣지로 돼있는 게 잘못된 건가요??? 어떻게 크롬으로 바꾸는지 아실까요..???
아니요 브라우저는 상관 없습니다. 거기서 보이는 아이콘은 PC의 기본 브라우저가 보이는 것이기 때문이에요. 이미지 첨부가 안되면 거의 대부분 경로의 오류일 가능성이 큽니다. 경로가 틀리진 않는지, 다시한 번 확인하시고 코드를 압축해서 sucoding@naver.com으로 보내주시면 확인 후 회신드릴게요 :)
책사서 매일 공부하고 있어요 옆에 제가 만든 홈페이지 뜨게 하는거 단축키 말고 자동으로 계속 어떻게 띄어놓나요? 설명이 다 저렇게 나와있네요 왼쪽에 파일을 만들어놨기 때문에 나타나는 거잖아요 파일안에 이미지 넣은 방법 파일 만드는법부터 알려주셨으면 좋을 것 같아요ㅜ모르겠습니다
이 영상에서는 그냥 HTML 파일을 더블 클릭해서 열어서 실행한거네요. 이 방법 말고 LIVE SERVER를 이용하는 방법도 있는데, 제 채널의 재생목록을 처음부터 따라해보시면 좋으실 것 같아요!
@@sucoding 딴 채널 알아봐서 파일 만들어서 넣는 방법 배웠습니다 책 진짜 하루 매일 매일 열심히 공부하고 있어요!!! 감사합니다 😃
11:40 width="50%"로 설정했는데 원래 사진의 크기보다 더 크게 출력되던데 어떻게 고치면 되나요?
이미지 크기보다 부모 크기가 더 클 경우에 그럴 수 있습니다. 부모 태그에서 빼서 단독으로 쓰거나 크기를 픽셀로 직접 정의해야합니다.
좋은영상 감사합니다.
두개의 이미지를 호스팅을 통해서 엑셀의 셀 한곳에 너는 방법좀 부탁드립니다.
두개의 이미지를 연달아서 보이게 하고 싶어서요..감사합니다~~~^^
img 태그를 두 번 사용하면 될 것 같네요!
강의도 좋은데 목소리도 좋으심
2:27에서 탐색기창 열고 파일 보는거요
꼭 저 폴더창에서만 단축키가 먹히더라고요
편집창에서는 단축키 쓸수잇는 방법 없을까요 검색해도 못찾아서 물어봐요
네네 꼭 저 폴더창에서만 하셔야 합니다!
@@sucoding 감사합니다 편집창에서 되면 좋앗눈데 ㅠ 슬픔
수코딩님 이미지에 url붙일때 한 이미지당 따로따로 넣으려고하는데 그건 어떻게해요? ㅜㅜ 너무급해요
이미지맵 말씀하시는거같은데 글로 설명드리기는 좀 난해해서 구글에 이미지맵이라고 검색해보시는게 더 빠르실것 같아요!!
혹시 코드 고치고 f5누르시나요?? f5누르면 Select Environment 검색창 뜨는데 그거 안뜨게 하는 방법 있나요??ㅜㅜ
코드 고치고 에디터가 활성화 되어 있는 상태에서 f5를 누르시냐는 말씀이신건가요? 보통은 그렇게 누르지 않습니다..ㅎㅎ
@@sucoding 그럼 뭐 누르세요??? 그 라이브 서버를 켜고 코드를 고치면 바로 안뜨고 뭐를 눌러줘야 하던데 ㅠㅠㅠ저만 이러나요??
@@user-or7dp8ov3n 코드 수정하고 저장해보셨어요 ??
안녕하세요...잘 보고했는데 경로지정을 잘못했는지 전혀 이미지가 나오지않습니다ㅠㅠㅠ무엇이 문제인지 모르겠어요. 혹시 봐주실수 있을까요?
우선 이미지가 안나오는건 파일 경로를 제대로 인식하지 못하셨을 경우가 큰데요! sucoding@naver.com으로 작업하신 폴더를 압축하여 보내주시면(만약 첨부가 안되면 .zip을.zipss 로 바꾸시면 됩니다) 보고 회신 드리겠습니다 ^^
@@sucoding 너무 감사합니다..제가 정말 초짜라 어려움이 많은데 봐주신다니 넘 감동입니다ㅠㅠ 메일 보냈습니다! 정말정말 감사합니다🙏
@@user-rj9fh9ft7r 도움되셨길 바랍니다 :)
꼭 px 말고 숫자만 적어야 하는 이유가 있나요??
설명이 안나와 있는것 같아서요ㅠㅠ
HTML4 스펙(Spec) 에서는 width 속성에 px 나 % 같은 unit을 사용할 수 있었습니다,
HTML5 에서는 width 속성의 디폴트값이 px로 변경되었고 그래서 굳이 px 단위를 사용하지 않아도 px로 인식되도록 스펙이 변경되었습니다.
그래서 "꼭"이라기 보다는 "권장"이라는 개념적인 측면에서 이해해주시면 됩니다. (실제로 width="100" width="100px" 둘다 똑같이 작동합니다)
참고로 HTML5에서는 width 속성에 % unit을 붙이는 것도 비권장사항이지만, 위반 사항은 아니고 실무에서도 자주 사용되는 내용이라서 동영상 강의 내용에 포함시켰습니다 :)
수코딩 감사합니다 ㅎㅎ
뭐 하나 막히면 그기서 포기하는 습성이 있는데 오늘 뚫려서 전진합니다. 감사 합니다.
힘내서 완강하시길 기원합니다 👍
meta name=.... 막 써있는데 영상에선 잘려있어서 뭔지 모르겠네요
아무리 해도 이미지가 나오지않네요 ㅠㅠ 혹시 저도 압축해서 혹시 확인해주실수있나요?
안녕하세요:)
sucoding@naver.com 으로 파일 보내주시면 확인해드리겠습니다 :)
@@sucoding 확인해주신다고 하셔서 정말 감사합니다 이메일로 파일보내드렸습니다
good
Thanks
제가 어떤거에 이미지를 넣어야하는대 이미지 경로를 어캐찾는지 모르겠네요 ㅠㅠ
제일 간단하게는 html 이랑 같은 폴더에 이미지 올리시고, 이미지 파일 이름 그대로 src="이미지이름(확장자포함)"으로 지정하시면 됩니다!
저렇게 코드를 작성하고 어떻게 웹브라우저에 실행된 걸 볼 수 있나요?
@@user-sg5zz6lt7f html파일을 더블클릭하면 됩니다
이 프로그램 이름이몬가요?ㅠㅠ
댓글알바가 의심될 정도로 선플이 많네요 ㅋㅋㅋ(농담입니다. 오해하지 마세요.)