웹사이트는 2,3개의 언어로 구성된 text file이라고 할 수 있다.
브라우저는 text file인 코드를 구현시키는 역할로써 chrome, firefox 등이 있다.
HTML, CSS, Java script가 무엇이고 어떤 역할인지 간단히 알아보자.
▷ HTML
HyperText Markup Language의 약자로, 하이퍼텍스트 마크업 언어이다.
HTML은 프로그래밍 언어가 아니다! 컨텐츠의 구조를 정의하는 마크업 언어이다.
웹 사이트를 인간으로 비유하면, 인가의 뼈대를 담당한다.
content의 구조가 어떤지(무엇이 title, link, description, header인지)를 브라우저에게 설명하는 역할을 한다.
아래의 사이트에서 HTML이 무엇인지 정확히 알 수 있다.
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics
HTML 기본 - Web 개발 학습하기 | MDN
HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 컨텐트는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수
developer.mozilla.org
▷ CSS
Cascading Style Sheets의 약자로, 마크업 언어가 실제 표시되는 방법을 기술하는 언어이다.
웹 사이트를 인간으로 비유하면, 인간의 근육을 담당한다.
style, 즉 시각적 디자인을 표현할 때 사용한다.
웹 사이트가 어떻게 보여야 하는지(색상, 사이즈)를 결정한다.
HTML과 CSS는 세트로 여겨진다.
CSS 없이 HTML으로만 만들어진 웹사이트는 렉 걸려서 덜 로딩 된 네이버/야후 사이트의 느낌으로 굉장히 별로기 때문이다.
▷ Javascript
객체 기반의 스크립트 프로그래밍 언어이다.
복잡한 건 JS. 동적 상호성(interactivity)를 제공한다.
웹 사이트를 인간으로 비유하면, 인간의 뇌를 담당한다.
youtube music이나 netflix에서 볼 수 있는 화려한 모션은 JS의 역할이다.
HTML, CSS, Javascript 중에서는 Javascript만 유일하게 웹 프로그래밍 언이이다.
웹 사이트 제작에 JS는 필수적이지 않다.
간단한 웹 사이트를 제작하고 싶다면 우선 HTML과 CSS를 공부해보자.
▷ 크롬에서 개발자 도구로 source 확인하기
크롬 브라우저에서 웹 사이트의 source를 확인할 수 있다.
상단 우측 점 세 개 -> 도구 더 보기 -> 개발자 도구 -> source
의 과정을 거치면 된다.
'Study > Web' 카테고리의 다른 글
| [HTML, CSS] 코코아톡 클론 코딩 | 챌린지 일정 (0) | 2021.07.13 |
|---|---|
| [HTML] 코코아톡 클론 코딩 | 3일차 (2) | HTML 요소 알아보기 (0) | 2021.07.09 |
| [HTML] 코코아톡 클론 코딩 | 3일차 (1) | HTML 문서의 기본 구조와 HTML 요소 구조 (0) | 2021.07.08 |
| [HTML] 코코아톡 클론 코딩 | 2일차 (2) | html의 여러가지 태그(tag)와 속성(attribute) 사용해보기 + 느낀 점 (0) | 2021.07.06 |
| [HTML] 코코아톡 클론 코딩 | 2일차 (1) | Visual Studio Code 이용해서 html 개발환경 구축하기 + 기본 확장 프로그램 (0) | 2021.07.06 |
