호기심으로 시작한 Frontend 꾸준함으로 채워나가는 Developer

[혼공얄코] Chapter 02-2 웹사이트는 어떻게 만들어지나요? 본문

혼공 시리즈/혼공얄코

[혼공얄코] Chapter 02-2 웹사이트는 어떻게 만들어지나요?

RachelLee 2024. 1. 17. 18:30

웹사이트 열람에 사용되는 소프트웨어 "웹 브라우저 = 브라우저"

- 구글 크롬, 마이크로소포트 엣지, 애플 기기의 사파리 등을 열어 인터넷 서핑에 사용되는 소프트웨어

- 아래처럼 html 이란 형식의 문서를 웹브라우저 = 브라우저 가 읽는다.
   1. 파일명 뒤에 docx 확장자가 붙은 문서는 마이크로소프트 워드로 읽을 수 있다 
   2. psd파일은 어도비 포토샵으로 열 수 있다

 

예시) 구글의 브라우저 '크롬'을 사용하여 '네이버'를 사용

1. 'www.naver.com' 를 입력한다  =>   네이버 서버의 HTML 문서 + 각종 파일 + 데이터 를 보낸다.

2. 네이버 홈페이지가 볼 수 있다 => 구글 브라우저 크롬의 서버가 네이버로부터 받은 문서를 실행한다.

여기서! 네이버가 보내는 문서 중에서 HTML, CSS, 자바스크립트(프로그래밍으로 기능을 넣어주는 역할) 는

웹사이트를 뼈대를 이루는 삼총사입니다.

 

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

- 웹 페이지에 어떤 요소를 어떻게 놓을지 배치하는 설계도

- HyperText Markup Language 마크업 언어

- 어떤 요소는 태그로 이루어져 있다 (<body><h1></h2></body>)

 

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

- 글꼴, 글자의 크기, 버튼 모양, 색, 테두리 등 디자인 요소로 웹페이지를 디자인 속성을 지정해 준다.

- 스타일 언어

 

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

- 사용자의 클릭 기능, 그래픽 에니메이션, 드래그 조작 가능한 지도 화면 등을 구현해준다.

- 동적인 언어, 각 요소들을 실제로 작동하게 합니다.

 

브라우저 간 약속 웹 표준

구글의 크롬, 맥과 윈도우에서 사용하는 사파리와 마이크로소프트 엣지, 네이버 기능 등 웹 브라우저 소프트웨어는 사용자들의 취향이나 필요, 사용 환경에 따라 선택되어 웹 서핑에 활용됩니다.

브라우저의 기본 역할은 HTML, CSS, 자바스크립트 코드를 하나의 웹 페이지로 만들어 띄우고 기능들을 실행시키는 것입니다. 똑같은 화면을 만들기 위해 브라우저에 맞는 코드를 각각 짜야 한다면 계속 새로 코드를 짜야하기에 이 문제를 방지하고자 웹 표준을 만들었고 이는 국제적으로 권고하는 사항이다.

 

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

모바일 기기가 다양화 되면서 서비스 특성에 따라 사용자가 편리하게 이용할 수 있도록 가로 세로 비율과 크기를 고려해야 합니다.

 

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

적응형 웹 이란 화면 크기에 따라 PC용과 모바일용 웹사이트를 따로 만드는 것입니다.  PC에 접속 했을 때와 스마트 폰으로 접속했을 때 주소가 달라집니다.

 

웹 사이트를 기획할 때 만들고자 하는 페이지가 어떤 특성과 구조를 가질 것인지에 따라 반응형 또는 적응형으로 만들지 결정하는 것이 매우 중요합니다.

 

확인 문제

더보기

1. 다음 문장 중 괄호 안에 알맞은 내용을 보기에서 찾아 써 보세요.

    1. 반응형 2. 적응형 3. 웹 브라우저

- 사람들이 웹 서핑을 할 때 사용하는 크롬 등의 프로그램을 (웹 브라우저)라고 합니다.

- 웹 페이지의 콘텐츠가 화면의 크기에 따라 조절된다면 (반응형) 웹, 화면 크기에 따라 다른 웹 페이지에 접속된다면 (적응형) 웹입니다.

 

2. 다음 중 각 문장에 해당하는 언어를 써 보세요.

- 각 요소가 실제로 동작하게 하는 언어 (자바스크립트)

- 텍스트로 웹 페이지 정보를 배치하는 언어 (HTML)

- 배치된 요소를 디자인 하는 언어 (CSS)

 

3. 다음 중 문장에 들어갈 알맞은 단어를 써 보세요.

 - HTML 은 (마크업)언어

- CSS는 (스타일)언어

- 자바스크립트는 (프로그래밍)언어

 

4. 다음 중 틀린 것을 고르세요.

4번 단순한 구조의 웹사이트는 하나의 적응형 웹으로 제작하는 것이 유리합니다. (x, 적응형 -> 반응형)

'혼공 시리즈 > 혼공얄코' 카테고리의 다른 글

[혼공얄코] Chapter 02-4 스마트폰 앱인데 웹사이트라고요?  (0) 2024.01.19
[혼공얄코] Chapter 02-3 쿠키, 토큰, 캐시는 일상에서 쓰는 그 단어인가요?  (0) 2024.01.19
★ 혼공학습단 11기 1주차 우수 혼공족 선정 ★  (0) 2024.01.16
[혼공얄코] 3주차 선택미션 - HTTP와 HTTPS의 차이점 정리  (1) 2024.01.16
[혼공얄코] Chapter 02-1 서버는 뭐고 AWS는 뭔가요?  (0) 2024.01.15
'혼공 시리즈/혼공얄코' Related Articles more