CSS 프로그래밍 기본 | 웹 개발 | 랩

소개

이 랩에서는 CSS (Cascading Style Sheets) 프로그래밍의 기본 사항을 탐구합니다. 이 랩에서는 CSS 구문, 선택자, 속성 및 값의 기본 사항을 다룹니다. 이 랩을 마치면 CSS 프로그래밍에 대한 탄탄한 기초를 갖추게 되며 시각적으로 매력적인 웹 페이지를 만들 수 있게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 94%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

텍스트 교체

index.html 및 style.css는 이미 VM 에 제공되었습니다.

텍스트 교체 애니메이션을 만들려면 다음 단계를 따르세요.

교체될 텍스트를 담을 "alternating" 클래스와 "alternating-text" id를 가진 <span> 요소를 만듭니다.

<p>I love coding in <span class="alternating" id="alternating-text"></span>.</p>

CSS 에서 <span> 요소를 display: none으로 설정하여 사라지게 하는 alternating-text라는 애니메이션을 정의합니다.

.alternating {
  animation-name: alternating-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes alternating-text {
  90% {
    display: none;
  }
}

JavaScript 에서 교체될 서로 다른 단어의 배열을 정의하고 첫 번째 단어를 사용하여 <span> 요소의 내용을 초기화합니다.

const texts = ["Java", "Python", "C", "C++", "C#", "Javascript"];
const element = document.getElementById("alternating-text");

let i = 0;
element.innerHTML = texts[0];

EventTarget.addEventListener()를 사용하여 'animationiteration' 이벤트에 대한 이벤트 리스너를 정의합니다. 이렇게 하면 애니메이션의 반복이 완료될 때마다 이벤트 핸들러가 실행됩니다. 이벤트 핸들러에서 Element.innerHTML을 사용하여 <span> 요소의 내용으로 texts 배열의 다음 요소를 표시합니다.

const listener = (e) => {
  i = i < texts.length - 1 ? i + 1 : 0;
  element.innerHTML = texts[i];
};

element.addEventListener("animationiteration", listener, false);

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 텍스트 교체 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

시각적으로 매력적인 웹을 위한 CSS 기본

소개

텍스트 교체

요약