HTML,CSS,JavaScript 정리

웹

HTML,CSS,JavaScript 정리

148june 2025. 2. 7. 14:37

HTML, CSS, JavaScript 차이점 한 번에 정리!

웹 개발을 시작하려는 분들이 가장 먼저 접하는 기술이 바로 HTML, CSS, JavaScript입니다.
하지만 이 세 가지가 각각 어떤 역할을 하는지 헷갈리는 경우가 많죠.
오늘은 HTML, CSS, JavaScript의 차이점을 쉽게 설명해 드릴게요!

1. HTML - 웹 페이지의 뼈대

**HTML(HyperText Markup Language)**는 웹 페이지의 구조를 만드는 언어입니다.
쉽게 말해, 웹 페이지에서 제목, 문단, 이미지, 버튼 같은 요소를 배치하는 역할을 합니다.

HTML 예제

html

<!DOCTYPE html>
<html lang="ko">
<head> 
	<meta charset="UTF-8">
	<title>HTML 예제</title>
</head>
<body>
	<h1>안녕하세요!</h1> 
	<p>이것은 HTML로 작성한 문장입니다.</p>
</body> 
</html>

위 코드에서 <h1>은 제목, <p>는 문단을 나타냅니다.

2. CSS - 웹 페이지의 디자인

**CSS(Cascading Style Sheets)**는 HTML로 만든 구조에 디자인을 적용하는 언어입니다.
색상, 글꼴, 레이아웃 등을 설정하여 웹 페이지를 더 예쁘게 꾸밀 수 있습니다.

CSS 예제

css

h1 {
	color: blue; /* 글자 색을 파란색으로 변경 */
	font-size: 24px; /* 글자 크기 설정 */ }
p { 
	color: gray; /* 글자 색을 회색으로 변경 */ 
}

이렇게 CSS를 사용하면 HTML 요소에 스타일을 적용할 수 있습니다.

3. JavaScript - 웹 페이지의 동작

JavaScript는 웹 페이지에 동적인 기능을 추가하는 언어입니다.
버튼을 클릭하면 창이 뜨거나, 입력한 값을 확인하는 등의 기능을 만들 수 있습니다.

JavaScript 예제

javascript

document.querySelector("h1").addEventListener("click", function() {
alert("제목을 클릭하셨네요!");
});

위 코드에서는 <h1>을 클릭하면 **"제목을 클릭하셨네요!"**라는 메시지가 뜨도록 했습니다.

4. HTML, CSS, JavaScript 비교

구분역할예시

HTML	웹 페이지의 구조	제목, 문단, 이미지, 버튼 배치
CSS	웹 페이지의 디자인	색상 변경, 크기 조절, 레이아웃 설정
JavaScript	웹 페이지의 동작	버튼 클릭 시 알림창 띄우기, 슬라이드 효과

이렇게 HTML, CSS, JavaScript는 각각의 역할이 다르지만, 함께 사용해야 웹 사이트를 완성할 수 있습니다!

🔥 정리: HTML(구조) + CSS(디자인) + JavaScript(동작) = 완성된 웹 페이지!

이제 기본 개념을 알았으니, 직접 코드를 작성하면서 익혀보세요! 😃

HTML로만 웹 페이지를 만든다면?

웹 개발에서 HTML, CSS, JavaScript는 각각 중요한 역할을 합니다.
그렇다면 만약 HTML만 사용해서 웹사이트를 만든다면 어떻게 될까요?

1. HTML로만 만든 웹페이지의 특징

기본적인 구조만 있음
- 제목, 문단, 이미지, 링크 등 콘텐츠를 배치할 수는 있지만, 디자인이 없어서 밋밋합니다.
스타일이 부족함
- 글자 크기, 색상, 배경 설정이 어렵고, 사용자가 보기 좋지 않습니다.
동적인 기능이 없음
- 버튼을 눌러도 반응이 없고, 팝업 창이나 애니메이션 같은 기능을 추가할 수 없습니다.

2. HTML만 사용한 예제

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML만 사용한 페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이 페이지는 HTML만 사용하여 만들었습니다.</p>
    <a href="https://www.naver.com">네이버로 이동</a>
    <br>
    <img src="https://via.placeholder.com/150" alt="샘플 이미지">
</body>
</html>

📝 결과:

제목(<h1>)과 문단(<p>)이 있고, 네이버로 이동하는 링크(<a>), 이미지(<img>)가 표시됩니다.
하지만 디자인이 없어서 기본 폰트 크기와 검은색 글씨, 흰 배경으로만 보이게 됩니다.

3. HTML만 사용할 때의 한계

디자인이 단순함
- 폰트 크기, 색상, 레이아웃을 조정할 수 없으므로 보기 좋지 않습니다.
사용자 경험(UX)이 떨어짐
- 버튼을 눌러도 반응이 없고, 애니메이션이나 인터랙션이 불가능합니다.
웹사이트의 기능이 제한됨
- 로그인 기능, 데이터 입력 및 검증, 팝업창 표시 같은 동적인 기능을 만들 수 없습니다.

4. HTML만으로 만들 수 있는 웹사이트는?

HTML만으로는 정적인(Static) 웹페이지를 만들 수 있습니다.
예를 들면:
✅ 간단한 블로그 글
✅ 텍스트 중심의 문서 페이지
✅ 이미지와 링크가 포함된 소개 페이지

하지만 더 나은 사용자 경험과 디자인을 위해 CSS와 JavaScript를 함께 사용하는 것이 좋습니다!

💡 결론:
👉 HTML만으로 웹사이트를 만들 수 있지만, 디자인이 부족하고 기능이 제한적입니다.
👉 CSS를 추가하면 예쁜 디자인이 가능하고, JavaScript를 추가하면 동적인 기능을 구현할 수 있습니다! 😃

티스토리 html기능으로 직접 구현하여 확인할수 도 있답니다 😃