[HTML/CSS/JS] 역할과 기능
2023. 12. 22. 19:50ㆍHTML + CSS+JS
반응형
HTML + CSS + JavaScript
= 사용자와 상호 작용이 가능하며 시각적으로 매력적인 디자인을 가진 웹 애플리케이션 생성 가능
* HTML
웹페이지의 구조를 정의하는 마크업 언어
텍스트, 이미지, 링크, 표, 목록 등의 요소를 사용하여 문서의 구조를 표현
각 요소는 태그(tag)로 표시
여는 태그와 닫는 태그의 쌍으로 구성 ex) <p> </p>
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 HTML 예제입니다.</p>
</body>
</html>
* CSS
HTML로 작성된 요소들의 스타일을 정의하는 스타일 시트 언어
텍스트의 색상, 폰트, 크기, 배경색, 레이아웃 등을 지정하여 웹 페이지의 디자인 꾸미기
선택자(selector)를 사용하여 특정 HTML 요소에 스타일을 적용
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p {
font-size: 16px;
}
* JavaScript
웹 페이지를 동적으로 만들고 상호 작용할 수 있게 하는 프로그래밍 언어
클라이언트 측에서 실행
웹 브라우저에서 사용자와 상호 작용하고 페이지를 업데이트하는 데 사용
이벤트 처리, 동적 요소 추가, 데이터 처리 등 다양한 기능을 수행
// 버튼 클릭 시 메시지 출력
function showMessage() {
alert('안녕하세요!');
}
// 웹 페이지 로딩 시 실행
window.onload = function() {
// 버튼에 이벤트 리스너 추가
var button = document.getElementById('myButton');
button.addEventListener('click', showMessage);
};더보기
window.onload
웹 페이지의 모든 자원이 완전히 로드된 후 JavaScript 코드가 실행되도록 보장
document.getElementById('myButton')
myButton이라는 ID를 가진 요소를 찾음
button.addEventListener('click', showMessage)
버튼에 클릭 이벤트 리스너를 추가
버튼이 클릭되면 showMessage 함수가 실행
[document 종류]
[이벤트 리스너 종류]
반응형
'HTML + CSS+JS' 카테고리의 다른 글
| [HTML]header, footer / fragments 이용하여 layouts 분리하기 (0) | 2023.12.23 |
|---|---|
| [JavaScript] 이벤트 리스너 종류 (1) | 2023.12.22 |
| [JavaScript] Document 정의 및 사용 방법 (0) | 2023.12.22 |