HTML이란 무엇입니까?

HTML은 HyperText Markup Language의 약자입니다. 장황한 내용이라는 건 알지만 기본적으로 우리는 HTML을 사용하여 웹 페이지의 구조나 빌딩 블록을 정의합니다.

CSS란 무엇입니까?

CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)의 약자입니다. 우리는 웹 페이지의 스타일을 지정하고 아름답게 만드는 데 이를 사용합니다.

자바스크립트란 무엇입니까?

자바스크립트는 웹페이지에 기능을 추가하는 데 사용됩니다. 비유를 들어보겠습니다.

건물을 생각해 보세요.

현실 세계의 건물은 인터넷의 웹페이지와 같습니다. 건물의 뼈대와 기초인 뼈대 또는 구조가 있습니다(HTML).

예쁜 벽, 창문, 타일을 사용하여 마무리하고 멋지게 보이게 할 수도 있습니다(CSS).

그리고 집, 병원, 슈퍼마켓과 같은 특정 기능을 가질 수도 있습니다(자바스크립트).

예를 들어 엘리베이터 버튼을 누르면 우리를 데리러 옵니다. 우리의 비유에서 JavaScript는 이것을 가능하게 합니다.

실제 사례

다음은 실제 예입니다. Twitter와 같은 웹사이트를 구축하고 싶다고 가정해 보겠습니다. 프로필의 경우 다음과 같은 레이아웃을 원합니다.

먼저 HTML을 사용하여 이 레이아웃의 구성 요소를 정의합니다. 여기 이 빌딩 블록은 무엇인가요?

1. 이미지.
2. 사용자의 Twitter 핸들을 나타내는 일부 텍스트(예: @KarlgustaAnnoh).
3. 메시지를 포함하는 또 다른 텍스트 블록(이야기를 통해 코딩 교육...).
4. 프로필, 위치, 링크, 날짜를 편집하기 위한 버튼/아이콘입니다.
5. 팔로워 수.

우리는 HTML을 사용하여 이러한 구성 요소를 웹 페이지에 추가합니다.

그런 다음 CSS를 사용하여 시각적 매력을 더합니다. 예를 들어 CSS를 사용하면 이름처럼 텍스트를 굵게 만들 수 있고 이미지를 둥글게 만들 수 있습니다. 또한 위치, 링크 및 날짜 아이콘의 색상을 변경하고 아이콘 위로 마우스를 가져갈 때 모양을 정의할 수도 있습니다.

그래서 CSS는 시각 효과에 관한 것입니다. CSS를 사용하면 아름다운 애니메이션도 만들 수 있습니다.

요즘 대부분의 웹페이지는 대화형입니다. 클릭이나 스크롤과 같은 우리의 행동에 반응합니다. 이것이 바로 JavaScript가 등장하는 곳입니다. JavaScript를 사용하면 웹 페이지에 기능이나 동작을 추가할 수 있습니다. 예를 들어 버튼을 클릭하면 사람을 팔로우할 수 있습니다.

따라서 JavaScript는 프로그래밍 언어인 반면 HTML(Markup Language) 및 CSS(Styling Language)는 기술적으로 그렇지 않습니다. 이는 우리가 컴퓨터에게 무엇을 해야 할지 지시하는 데 사용할 수 없다는 것을 의미합니다. 우리는 이를 사용하여 웹 페이지의 구성 요소를 정의하고 스타일을 지정합니다.

당신이 인터넷에서 본 모든 웹페이지는 이 세 가지 언어로 구축되었습니다. 따라서 해당 기능과 해당 기능을 더 잘 배우고 이해할수록 프론트엔드 개발 능력이 향상됩니다.

다음편에서 뵙겠습니다!

추신. 이것은 나의 새로운 시리즈입니다. 코딩이 처음이고 코딩 학습에 도움이 필요한 경우 2시간 웹 개발자를 확인하세요.