[HTML] Style 및 Script 태그

1)Style

HTML에서 스타일을 link 태그가 아닌 직접 정의하는 경우 사용함. 내용은 CSS에서 작성하는 거랑 완전 동일함.

 

(1)태그 사용

Style 태그

(2)속성 사용

Style 속성

---

(3)JS에서 CSS 변경하기 (확장)

①HTML에서 style 태그 및 속성을 통해 스타일을 변경한 것과 같이 JS에서도 스타일 속성을 다음과 같이 변경할 수 있다.

const slideList = document.querySelector('.slide_list');  // Slide parent dom
const slideContents = document.querySelectorAll('.slide_content');  // each slide dom
const slideBtnNext = document.querySelector('.slide_btn_next'); // next button
const slideBtnPrev = document.querySelector('.slide_btn_prev'); // prev button
const pagination = document.querySelector('.slide_pagination');
const slideLen = slideContents.length;  // slide length
const slideWidth = 400; // slide width
const slideSpeed = 300; // slide speed
 
slideList.style.width = slideWidth * (slideLen) + "px";
 
let curIndex = 0; // current slide index (except copied slide)
 
/** Next Button Event */
slideBtnNext.addEventListener('click', function() {
  if (curIndex < slideLen - 1) {
    slideList.style.transition = slideSpeed + "ms";
    slideList.style.transform = "translate3d(-" + (slideWidth * (curIndex + 1)) + "px, 0px, 0px)";
  } else {
    slideList.style.transform = "translate3d(0px, 0px, 0px)";
    curIndex = -1;
  }
  curSlide = slideContents[++curIndex];
});

 

②참고 URL

[JS/Slider] 바닐라 자바스크립트로 무한 루프 슬라이드(Carousel) 구현하기

 

2)Script 

JS 외부 파일을 가져오거나 HTML 문서 안에서 직접 작성하는 경우 사용함. link 및 style 태그 성격 모두 있음

JS 파일과 link

HTML에서 직접 작성함