꾸매코딩

[Nomad coder/코코아톡 클론코딩 1일차] HTML? CSS? JavaScript?(#1.1 ~ #1.9) 본문

Clone Coding/Kakaotalk [HTML + CSS]

[Nomad coder/코코아톡 클론코딩 1일차] HTML? CSS? JavaScript?(#1.1 ~ #1.9)

꾸매코더 2021. 5. 2. 19:27
반응형

코코아톡 클론코딩 1일차 (#1.1 ~ #1.9)

 

작년에 여러 강의를 들어봤는데, Nomad coder - Nicolas 이 분 강의 영상이 나에게 가장 맞는 것 같아서 다시 이분 강의를 시작으로 앞으로 나아갈 예정이다. Why? 를 많이 강조하시는데, 왜 내가 이걸 쓰는지, 이걸 안 쓰면 얼마나 돌아가야 하는지 등등 하나의 코드를 다양한 방법으로 설명을 해주시기 때문에 큰 도움이 되는 수업 중 하나였다.

 

1. Web site

인터넷 프로토콜 기반의 네트워크에서 도메인 이름이나 IP 주소, 경로만으로 이루어진 일반 URL을 통하여 보이는 웹 페이지(Web Page)들의 의미 있는 묶음이다.

Web

 

쉽게 말하자면 Web은 Text로 이루어져 있다. 

→ Web이 이해할 수 있는 언어로 이루어져 있다 (Text ≒ HTML+CSS+JavaScript)

 

2. HTML 

하이퍼텍스트 마크업 언어 (HyperText Markup Language)는 웹 페이지를 위한 지배적인 마크업 언어다.

HTML

HTML은 Markup language이다. (Markup = Content)

 

HTML을 왜 사용할까? 

→ 브라우저에게 content 구조가 어떤지 설명을 해주기 위해 사용한다.

 

3. CSS

종속형 시트 또는 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다.

CSS

CSS는 디자인과 스타일을 위한 언어이다.

 

CSS를 왜 사용할까? 

→ 브라우저에게 웹사이트가 어떻게 보여야 하는지 알려주기 위해 사용한다.

 

 


CSS는 HTML 코드에 부연 설명을 해준다. "이건 A이고 X색이야", "이건 B이고 Y정도 크기야"  HTML에 색을 칠해주는 브라우저가 알아들을 수 있는 언어이다.

좌 : HTML / 우 : HTML + CSS

HTML은 뼈대이고, CSS는 근육이라 비유할 수 있다. 따라서 HTML과 CSS는 같이 사용된다.

 

4. JavaScript

JavaScript

JavaScript는 웹 사이트를 동적으로 만들어주는 프로그래밍 언어이다.

 

JavaScript를 왜 사용할까?

→ HTML + CSS로 이루어져 있는 웹 사이트에 기능을 추가하기 위해 사용한다.  

→ 웹 사이트를 좀 더 똑똑하게 만들어 준다.

 

 

JavaScript는 뇌 와 같은 기능을 함

 

 

Content를 위한 HTML / 디자인을 위한 CSS / Interactivity(상호작용)를 위한 JavaScript

5. 느낀 점

학교에서 HTML에 관해서 처음 배운 내용은 아래와 같다

<html>

<head>
</head>

<body>
{..}
</body>

<html>

아무런 설명 없이 이것이 HTML의 기초라고 설명해주셨고, 의심 없이 그냥 받아들였었다.

 

강의를 통해 HTML이란 단지 저 코드 몇 줄이 아닌 브라우저에게 "이건 A이고, 이건 B이야"라고 브라우저가 알 수 있게 설명해주는 언어라는것을 알게 되었다.

 

웹사이트와 개발자 간에 소통을 위해 HTML 언어를 브라우저가 웹사이트로 변경을 해준다는 것을 알게 되었다.

앞으로 내가 어떤 언어 및 프레임워크를 사용함에 있어서 왜(Why?) 사용하였는지 끊임없이 고민하고 의심하는 습관을 가져야겠다고 생각하게 되었다. 

반응형
'Clone Coding/Kakaotalk [HTML + CSS]' Related Articles more