Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML, CSS 및 JavaScript의 차이점은 무엇입니까?

HTML, CSS 및 JavaScript의 차이점에 대해 알아보세요.

웹 개발, 특히 프론트엔드 개발에 대해 배우기 시작할 때 HTML, CSS 및 JavaScript는 대부분 기술 스택의 가장 기본적인 3가지 요소로 간주됩니다.

HTML, CSS 및 JavaScript는 모두 동일한 웹 개발 생태계의 일부이며 현대 웹의 잠재력을 극대화하려면 함께 작동해야 합니다.

하지만... HTML, CSS, JavaScript가 정확히 다른 점은 무엇입니까?

  • HTML 하이퍼텍스트 마크업 언어를 나타냅니다.
  • CSS 계단식 스타일시트를 나타냅니다.
  • 자바스크립트 잘 자바스크립트(바로 가기 JS )

HTML

HTML은 콘텐츠를 설명하고 웹사이트의 기본적인 대략적인 구조를 레이아웃하는 데 사용하는 마크업 언어입니다.

유추: HTML은 집의 틀이자 내용입니다. 그래서 의자, 테이블, 문, 계단, 집을 구성하는 가장 기본적인 것들, 그 이상은 아닙니다.

HTML 개발자의 임무는 웹사이트의 콘텐츠를 올바르게 설명하여 웹사이트의 최소한의 요구사항을 제공하여 디자이너가 들어올 때 버튼과 단락이 무엇인지 알 수 있도록 하는 것입니다.

예:

<!-- Describe content -->

<p>This text is described correctly by wrapping it between opening and closing paragraph tags.</p>

<button>I’m a button</button>

CSS

CSS는 색상, 타이포그래피, 간격, 테두리 등의 측면에서 웹사이트 콘텐츠의 모양을 지정하고 스타일을 지정하는 데 사용하는 스타일 지정 언어입니다.

유추: CSS는 시각적으로 매력적이고 살기에 편안함을 주는 집의 페인트와 둥근 모서리입니다. 엄밀히 말하면 의자의 정의는 앉는 것이지만 모양, 크기 및 패딩(디자인)과 같은 요소가 앉기에 편안한(또는 불편한) 의자.

CSS 개발자의 임무는 웹사이트가 다양한 기기에서 볼 때 색상, 타이포그래피, 간격, 모양 및 전체 레이아웃 측면에서 소유자가 원하는 올바른 시각적 스타일을 갖도록 하는 것입니다.

예:

/* Style text element */
p {
	font-family: "Helvetica";
	font-size: 20px;
	line-height: 1.5;
}

/* Style button */
button {
	font-size: 16px;
	font-weight: bold;
	padding: 16px 32px;
	border-radius: 8px;
	color: white;
	background-color: green;
}

자바스크립트

JavaScript는 웹 사이트를 대화형 및 반응형으로 만들 수 있는 동적 프로그래밍 언어입니다.

유추: JavaScript는 현대 가정을 현대 가정으로 만들고 목욕하고, 음식을 요리하고, 겨울 동안 얼어 죽지 않는 것을 가능하게 하는 전기 및 물 공급입니다. JavaScript 개발자는 스위치를 켤 때 조명이 켜지고 수도꼭지를 돌릴 때 온수/냉수가 나오는지 확인합니다.

JavaScript 개발자의 임무는 "메뉴"라고 표시된 버튼을 클릭할 때 캔버스 외부 메뉴가 사용할 준비가 되도록 슬라이드하는 것입니다. JavaScrip은 웹사이트의 요소가 사용자 입력에 응답하도록 하는 것입니다.

예:

// Make button interactive 

const button = document.querySelector("button")

button.addEventListener("click", showModal)

function showModal() {
	alert("You clicked on the button!")
}