HTML, CSS, JS
- HTML, CSS, JS(JavaScript)는 웹 프로그래밍을 하려면 반드시 알아두어야 하는 상식이에요! 아래 내용을 보면서, 어떤 역할을 하는지에 대해 꼭 알아두도록 해요!
HTML
HTML(HyperText Markup Language)은 웹 브라우저를 통해 표시되는 웹 페이지의 콘텐츠를 정의하기 위해 사용되는 언어를 의미해요! 이름과 같이 '마크업 언어'인데, 쉽게 생각해서 화면에 요소들이 어떻게 배치되는가를 결정하는 '틀'이라고 생각하면 편해요!
CSS
CSS(Cascading Style Sheets)는 계단식으로 스타일을 정의하는 문서에요! HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있기 때문에, CSS는 작성된 HTML이라는 계단식 틀 위에 스타일을 입혀주는 것으로 이해할 수 있어요!
JS (JavaScript)
JavaScript는 객체 기반의 스크립트 언어. 즉, 프로그래밍 언어에요! 주로 웹 브라우저에서 사용되지만, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있어요! 자바스크립트는 브라우저에서 다양한 일을 수행하고, HTML로 올려놓은 요소들을 변형시키거나, 직접 만들어내는 등의 동작과 상호작용을 정의해요!
HTML
HTML은 건물을 만들기 위한 뼈대로 이해하자!
HTML의 HT(HyperText)는 일반적인 텍스트를 비순차적으로 접근할 수 있는 방법을 제공해요! 같은 페이지 내의 다른 데이터로 이동할 수도 있고, 다른 페이지로도 이동할 수도 있죠!
ML(Markup Lanauage)은 웹 브라우저에게 내 컨텐츠를 어떻게 표현해야 하는지를 명령하는 언어에요. <태그> 등을 이용하여, 문서나 데이터를 구조적으로 표시해요. 마크업 언어를 쓰면 아래와 같은 효과를 얻을 수 있어요!
- 컨텐츠 제작자가 원하는 방법대로 문서를 표현하기 위해 웹 브라우저에게 명령을 내릴 수 있어요!
- 구조적인 작성 덕분에, 문서 작성에 대해 협업과 유지보수를 쉽게 할 수 있어요!
- 찾기 쉽다는 장점은 검색이 가능하다는 것을 의미하기도 해요. 컴퓨터 또한 마크업 언어의 태그를 통해 정보를 수집할 수 있어요!
즉, HTML은 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 언어라고 정리할 수 있어요. 웹 페이지를 만들기 위해 표준적으로 사용되는 마크업 언어이기 때문에, 웹 페이지를 만들 때 꼭 필요하죠.
아래 버튼을 누르면, 저희가 추천하는 자료를 확인하러 갈 수 있어요!
Learn More
CSS
CSS는 건물의 페인트칠 등의 꾸미는 행위로 이해하자!
CSS는 HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어에요!
1996년 12월, W3C에서 CSS가 도입되기 전까지는HTML언어 하나로, 문서의 뼈대와 꾸밈 작업을 함께했어요. 하지만, CSS가 도입되면서, 문서의 내용과 표현이 분리될 수 있었어요. 작성 방법은 아래와 같아요.
- Inline Style Sheet
- HTML 태그의 style 속성에 css 코드를 넣는 방법
- Internal Style Sheet
- HTML 문서 내의 <style> </style> 안에 css 코드를 넣는 방법
- Linking Style Sheet ★
- 별도 css 파일을 만들고, HTML 문서와 연결하는 방법
즉, CSS는 구조와 디자인을 분리하기 위해 태어난 언어라고 정리할 수 있어요. CSS는 HTML 요소들의 크기, 디자인, 배치 등을 조절하고 가공해요!
아래 버튼을 누르면, 저희가 추천하는 자료를 확인하러 갈 수 있어요!
Learn More
JavaScript
JS(JavaScript)는 건물 내 각종 기능을 만들고 수리하는 행위로 이해하자!
JS(JavaScript)는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 웹 문서에 삽입해서 사용하는 스크립팅 언어 또는 프로그래밍 언어에요! 웹 브라우저에서 웹 문서를 실행할 때 프로그램 코드가 해석되요.
객체 지향적인 성격을 가지고 있고, 컴파일 과정을 거치지 않는 인터프리터 형태를 가지기 때문에, 비교적 자료형 조사를 철저히 하지 않는 언어에요!
우리가 웹 페이지를 이용할 때, 가만히 정적인 정보만 보여주는 것이 아니라, 주기적으로 갱신되거나 마우스를 클릭할 때 상호작용이 발생되는 등의 모습을 본 적이 있을 거에요. 이런 경우에는 자바스크립트가 관여하고 있다고 볼 수 있어요!
자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있어요. 자바스크립트는 브라우저뿐만 아니라 서버에서도 실행할 수 있어요.
이외에도 자바스크립트 엔진(JavaScript engine)이라 불리는 특별한 프로그램이 들어 있는 모든 디바이스에서도 동작해요. 브라우저 내에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있는데, 종류는 아래처럼 다양해요.
- V8
- Chrome과 Opera에서 쓰여요.
- SpiderMonkey
- Firefox에서 쓰여요.
- Trident / Chakra
- IE에서 쓰이며, 버전에 따라 각각을 사용해요.
- ChakraCore
- Microsoft Edge에서 쓰여요.
자바스크립트는 다양한 장점을 가지고 있어요.
- HTML/CSS와 완전히 통합할 수 있고, HTML 파일 내에서 작성되므로 개발속도가 빨라요.
- 운영체제의 영향을 받지 않고, 주요 브라우저에서 대부분 지원되요. 그리고 기본언어로 사용되요!
오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김했어요. 그렇기에 내가 웹 사이트를 만들겠다고 다짐했다면, 꼭 알고 있어야 해요!
아래 버튼을 누르면, 저희가 추천하는 자료를 확인하러 갈 수 있어요!
Learn More