디자인 요소 확인

텍스트 타이핑 효과

전체 코드

전체 코드 확인하기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹사이트 개발</title>
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
margin: 0 auto;
background-color: #191a1e;
color: white;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.slider {
width: 600px;
display: flex;
gap: 15px;
font-size: 30px;
}

#sliderValue {
display: flex;
color: #0077ee;
font-weight: 700;
}

.start {
opacity: 0;
}

.animation {
animation: fade .3s forwards;
}

@keyframes fade {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}

.holder-animation {
animation: holder 4s;
}

@keyframes holder {
0% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.youtube {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
color: white;
left: auto;
right: auto;
margin: 0 auto;
text-align: center;
padding: 20px 50px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-weight: 700;
color: #0077ee !important;
}
</style>
</head>
<body>
<div class="span">우리는</div>
<div class="span" id="sliderValue"></div>

<div class="youtube">
<a href="https://jason-jang.com" style="color: #0077ee !important; text-decoration: none;">https://jason-jang.com</a>
</div>

function slide() {
if (sliderCounter >= sliderContent.length) {
sliderCounter = 0;
}

sliderValue.innerHTML = "";

sliderValue.classList.remove("holder-animation");
void sliderValue.offsetWidth;
sliderValue.classList.add("holder-animation");

for (i = 0; i < sliderContent[sliderCounter].length; i++) {
let letterDiv = document.createElement("div");
letterDiv.innerHTML = sliderContent[sliderCounter][i];

if (letterDiv.innerHTML == " ") {
letterDiv.innerHTML = " ";
}
letterDiv.classList.add("start");
letterDiv.classList.add("animation");
letterDiv.style.animationDelay = i / 10 + "s";
sliderValue.appendChild(letterDiv);
}

sliderCounter++;
}

slide();
setInterval(slide, 4000);

</script>
</body>
</html>

웹사이트 제작 문의하기

코드 설명)

HTML, CSS, JavaScript로 이루어진 위 코드는 한국어로 웹사이트 제목을 나타내고, 텍스트를 슬라이드 형태로 표시하는 간단한 웹사이트입니다. 이 코드를 이해하기 위해 필요한 주요 개념들을 자세히 설명하겠습니다.

HTML (HyperText Markup Language):
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 위 코드의 HTML 부분은 다음과 같은 역할을 합니다.

1. `<html>`, `<head>`, `<body>`: HTML 문서의 기본 구조를 정의합니다. `<head>` 요소 안에는 문서에 대한 정보를 포함하고 있으며, `<body>` 요소 안에는 실제로 사용자에게 보이는 콘텐츠가 들어갑니다.
2. `<style>`: CSS 코드를 HTML 문서 안에 포함시키는 태그입니다. 이 부분은 웹 페이지의 스타일을 정의합니다.
3. `<div>`: 구획을 나타내는 요소입니다. 위 코드에서는 텍스트와 슬라이더를 담고 있는 `<div>` 요소들이 사용되었습니다.
4. `<script>`: JavaScript 코드를 HTML 문서 안에 포함시키는 태그입니다. 이 부분은 웹 페이지의 동적인 기능을 구현하는 데 사용됩니다.

CSS (Cascading Style Sheets):
CSS는 HTML 요소의 스타일을 정의하여 웹 페이지의 레이아웃과 디자인을 꾸며주는 스타일 시트 언어입니다. 위 코드의 CSS 부분은 다음과 같은 역할을 합니다.

1. `body`: 웹 페이지의 전체적인 스타일을 정의합니다. 배경색, 글꼴 등을 지정합니다.
2. `.slider`, `#sliderValue`: 클래스와 아이디 선택자를 사용하여 슬라이더와 텍스트의 스타일을 정의합니다. 너비, 간격, 글꼴 크기 등을 지정합니다.
3. `@keyframes`: CSS 애니메이션을 정의합니다. 슬라이더 텍스트의 나타나는 애니메이션과 사라지는 애니메이션을 지정합니다.

JavaScript:
JavaScript는 웹 페이지의 동적인 기능을 구현하기 위한 프로그래밍 언어입니다. 위 코드의 JavaScript 부분은 다음과 같은 역할을 합니다.

1. `var sliderCounter`, `var sliderContent`: 슬라이더의 인덱스와 내용을 저장하는 변수를 선언합니다.
2. `slide()`: 슬라이더를 제어하는 함수입니다. 슬라이더의 내용을 변경하고 애니메이션 효과를 적용합니다.
3. `setInterval(slide, 4000)`: 일정 시간 간격으로 `slide()` 함수를 호출하여 자동으로 슬라이더를 변경합니다.

이렇게 HTML, CSS, JavaScript가 함께 작동하여 웹 페이지를 구성하고, 스타일을 적용하며, 동적인 기능을 구현합니다. 코드의 각 부분이 어떤 역할을 하는지 이해한다면 웹 개발에 대한 기초를 다질 수 있을 것입니다.