웹사이트는 어떻게 만들어 질까?

개발공부/CS지식

soOoOnger 2022. 11. 9. 12:51

웹 브라우저: 웹사이트 열람, 웹사이트를 열어 인터넷 서핑을 하는데 사용되는 소프트웨어

HTML: 요소를 가져다 놓는 마크업 언어이다.

'<>' 안에 글자가 들어간 body,div,h1.. 같은 요소를 태그라고 한다.

각 태그는 웹 페이지 화면에 놓일 요소를 뜻한다.

기본 역할은 단순히 웹 페이지에 어떤 요소를 어떻게 놓을지 배치하는 설계도이다.

프로그래밍 언어가 아닌 마크업 언어로 분류된다.

* 마크업 언어?

문서나 데이터의 구조를 표현하는 데 사용되는 언어

CSS: 요소를 꾸미는 스타일 언어

HTML코드를 예쁘게 꾸며 주는 것이 CSS이다.

특정 요소들의 디자인 속성을 지정해 주는 역할만 담당하기 때문에 스타일 언어로 불린다.

*CSS는 HTML과 같은 마크업 언어가 실제로 표시되는 방법을 기술하는 스타일언어

자바스크립트:일을 시키는 프로그래밍 언어

동적인 기능을 구현하는 데 비로소 프로그래밍 언어인 자바스크립트가 사용된다.

웹사이트에 각종 기능을 달아주는 프로그램 언어이다.

*변수?

데이터를 담는 주모니로, 그 내용물을 바꿔서 담을 수 있는 주머니를 말한다.

웹 표준: 브라우저 간 약속

웹 표준은 브라우저 마다 다른 방식으로 만들면 코드를 각각 새로 짜야하기 때문에 이러한 문제를 방지하기 위해 국가적으로 권고된 사항이다.

웹 표준의 존재에도 불구하고 인터넷 익스플로어는 웹 표준을 지키지 않고 독불장군 길을 걸었다. 익스플로어 환경과 웹 표준 환경 둘 다 만족시켜야 하기 때문에 웹 개발이 까다로웠다. 하지만 이제 익스플로어는 사용할 수 없고 2029년 이후에는 완전히 종료될 예정이다.

*웹 서핑?

거미줄과 같은 통신망을 뜻하는 웹과 바다에서 파도타기를 뜻하는 서핑을 결합해 놓은 합성어로, 웹 서핑이란 바다에서 파도를 타듯 이리저리 움직이며 여기저기 둘러본다는 것을 뜻한다.

반응형 VS 적응형: 웹 페이지의 다양한 화면크기

반응형 웹: 페이지 내 요소들을 신축성 있게 만들어 기기나 화면 크기에 맞게 너비나 높이, 위치 등을 자동으로 조절하는 웹 사이트이다.

사이트 안에 들어갈 내용이 많고 복잡한 구조일 떄는 반응형으로 만드는 것은 어렵다.

그런경우에는 적응형 웹 사이트로 만든다.

적응형 웹:화면 크기에 따라 PC용이나 모바일용 웹사이트를 따로 만드는 것이다.

스마트폰의 브라우저로 접속할때 m.naver.com 같이 m이 붙는 것처럼 PC와는 다른 주소로 열리는 웹 페이지가 바로 적응형 웹사이트이다.

적응형 웹은 PC용 모바일용을 따로 만들어야 하지만 복잡한 사이트일 경우에는 반응형보다 경제적인 선택일 수도 있다.

반응형 웹보다 코드가 단순하고 어렵지 않기 때문이다.

단순한 구조는 반응형으로 복잡한 구조는 적응형으로 만드는게 유리하다