HTML이란 무엇인가요?
HTML은 HyperText Markup Language의 약자입니다. 약간 길지만, 기본적으로 웹 페이지의 구조나 빌딩 블록을 정의하는 데 사용합니다.
CSS란 무엇인가요?
CSS는 Cascading Style Sheets의 약자입니다. 웹 페이지를 스타일링하고 아름답게 만드는 데 사용합니다.
자바스크립트란 무엇인가요?
자바스크립트는 웹 페이지에 기능을 추가하는 데 사용됩니다. 비유로 설명해 드릴게요.
건물을 생각해 보세요.
실제 세계의 건물은 인터넷의 웹 페이지와 비슷해요. 건물의 골격이나 구조가 있죠 – 건물의 프레임과 기초 (HTML).
예쁜 벽, 창문, 타일을 달아서 마무리하면 멋있게 보이죠 (CSS).
그리고 주택, 병원, 슈퍼마켓과 같은 특정 기능을 갖고 있을 수도 있어요 (JavaScript).
예를 들어, 우리가 엘리베이터 버튼을 누르면 엘리베이터가 오게 됩니다. JavaScript는 이것을 비유에서 가능케 합니다.
실제 예시
다음은 실제 예시입니다. Twitter와 같은 웹사이트를 만들고 싶다고 가정해 봅시다. 프로필에서는 다음과 같은 레이아웃을 가지고 싶습니다:
먼저, HTML을 사용하여 이 레이아웃의 구성 요소를 정의합니다. 여기에는 어떤 구성 요소가 있습니까?
- 이미지.
- 사용자의 트위터 핸들을 나타내는 일부 텍스트(예: @KarlgustaAnnoh).
- 다른 메시지를 포함하는 텍스트 블록(Coding을 이야기로 가르치기...).
- 프로필 편집, 위치, 링크 및 날짜를 위한 버튼/아이콘.
- 팔로워 수.
우리는 HTML을 사용하여 이러한 구성 요소를 웹 페이지에 추가합니다.
그러면 시각적으로 매력을 줄 CSS를 사용합니다. 예를 들어 CSS를 사용하여 텍스트를 굵게 만들 수 있습니다(예: 이름과 같이), 이미지를 둥글게 만들 수도 있습니다. 또한 위치, 링크 및 날짜 아이콘의 색상을 변경하고 호버시 모양을 정의할 수도 있습니다.
그래서 CSS는 모두 시각적 효과에 관한 것입니다. CSS로 아름다운 애니메이션도 만들 수 있습니다.
요즘 대부분의 웹 페이지는 상호작용적입니다. 단순한 클릭이나 스크롤과 같은 동작에 반응합니다. 이때 JavaScript가 나타납니다. JavaScript를 사용하면 웹 페이지에 기능 또는 동작을 추가할 수 있습니다. 예를 들어 버튼을 클릭하여 개인을 팔로우할 수 있습니다.
그러므로 JavaScript는 프로그래밍 언어이며, HTML(마크업 언어)와 CSS(스타일링 언어)는 기술적으로는 아닙니다. 이는 컴퓨터에게 무엇을 해야 하는지 말할 수 없음을 의미합니다. 이들을 사용하여 웹 페이지의 구성 요소를 정의하고 스타일을 지정합니다.
인터넷에서 본 모든 웹 페이지는 이 세 가지 언어로 만들어졌어요. 그러니까 이 언어들과 그들의 특징을 더 잘 배우고 이해할수록, 프론트엔드 개발에 더 능숙해질 거예요.
다음에 또 만나요!
참고로, 이 시리즈는 새로 시작한 것이에요. 코딩을 처음 시작하시는 분들이라면, 코딩을 배우는 데 도움을 받고 싶다면, '2시간 웹 개발자'를 확인해보세요.