웹디초보
105
2019-08-28 21:21:14
5
1540

자바스크립트로만 이미지 불러오기 관련 질문 드립니다


자바스크립트로만 html과 css를 건들지 않고 이미지를 삽입해야하는데 어떻게 해야할까요?ㅠㅠ

자바스크립트는 처음 해보는거라서 구글링으로 찾아봤는데도

어떻게 해야할지 감이 전혀 안와요ㅠㅠ 고수님들 제발 도와주세요ㅠㅠㅠ

이부분이 슬라이드 HTML부분 입니다 .

#slider > div { width:866px;margin:0 auto 50px; }
#slider > div div { float:left;border:dotted 1px gray;width:50px;height:50px;margin:150px 10px; }
#slider > div div:nth-child(2) { width:700px;height:350px;margin-top:0;margin-bottom:0 }

이부분이 CSS 입니다

    <section id="slider"><div>
      <div></div>
      <div></div>
      <div></div>
      <span class="c"></span>
     </div></section>
/*app.js*/
const dd = console.log;

$(function() {
	
})
위에부분이 제가 친 JAVASCRIPT입니다. 완전 처음이라 저렇게 쓰는게 기본이 맞는지조차 모르겠어요ㅠㅠㅠㅠ
1
  • 답변 5

  • 로빈풋사과
    2019-08-28 21:40:49 작성 2019-08-28 21:41:22 수정됨

    아 진짜 도와드리고 싶은데 아직까지 저의 한계가 거기까지는 ㅠㅠ...

    es6 은 아마 템플릿 리터럴을 쓰셔야될 것이에요.

    https://poiemaweb.com/es6-template-literals


    const linesToHTML = function (characters) {

      return characters.reduce(function (charactersResult, character) {

        let {name, lines} = character

        return `${charactersResult || ''}

    <article>

      <h1>${name}</h1>

      <ul>

        ${lines.reduce(function (linesResult, line) {

          return `${linesResult || ''}

        <li>${line}</li>

          `.trim()}, 0)}

      </ul>

    </article>

      `.trim()}, 0)

    }

    const characters = [{

      name: 'Aria Stark',

      lines: ['A girl has no name.']

    }, {

      name: 'John Snow',

      lines: [

        'You know nothing, John Snow.',

        'Winter is coming.'

      ]

    }]

    document.body.innerHTML = linesToHTML(characters)

    템플릿 리터럴의 예를 복사한 코드 이구요.

    다른방법으로는

    Document createElement 라고 참고하시면 될 것 같습니다.

    https://developer.mozilla.org/ko/docs/Web/API/Document/createElement

    제가 이제 배울려고 하는 도중이라 쉽게 도와드릴 수가 없을 것 같네여 ㅠ 좀 더 공부해본뒤 풀 수 있으면 다시 답장 할께요;;



  • 웹디초보
    105
    2019-08-28 21:53:17

    아ㅠㅠㅠ 진짜 감사합니다ㅠㅠㅠ  아무것도 몰라서 어떻게 해야할지 감이 안잡혔었는데 안려주신거 위주로 다시한번 찾아봐야겠네요ㅠㅠ

    진짜 감사합니다ㅠㅠ

  • 몽상가
    121
    2019-08-29 03:56:03
    1. "자바스크립트 요소 추가" 또는 "자바스크립트 html 동적 태그 생성" 등의 키워드로 검색해보시면 이미 있는 요소 기준으로 내외부에 이미지 태그를 넣는 방법을 이해하실 수 있습니다. (가령, div안에 없던 img태그를 넣어주는 코드)

    2. 마찬가지로 "자바스크립트 요소 변경" 또는 "자바스크립트 css/attr 동적 변경" 등의 키워드로 검색해보시면 해당 태그의 속성을 동적으로 바꿔주는 방법을 이해하실 수 있습니다. (가령, img태그의 src 속성을 특정 이벤트 발생 시 바꿔주는 코드 )

    3. 자바스크립트 제이쿼리를 이용하고 싶으시면 위의 검색어 키워드에서 "자바스크립트"만 "제이쿼리"로 바꿔 검색하시면 될 거에요.
  • 관악산해질녘
    244
    2019-08-29 09:35:25 작성 2019-08-29 09:37:26 수정됨

    자바스크립트 공부중이신가 보군요.

    javascript에서 특정경로의 파일 탐색하는법

    특정경로의 파일 불러오는법

    불러온 파일을 화면에 출력하는법

    이렇게 순차적으로 구글링을 통한 학습 진행해보시면 좋을 것 같습니다. 반나절~하루 내로 가능하실겁니다.

  • 웹디초보
    105
    2019-08-29 17:21:29
    정말 감사합니다  다시 구글링 해봐야겠네요ㅠㅠ
  • 로그인을 하시면 답변을 등록할 수 있습니다.