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 |
| [혼공얄코] 3주차 선택미션 - HTTP와 HTTPS의 차이점 정리 (1) | 2024.01.16 |
| [혼공얄코] Chapter 02-1 서버는 뭐고 AWS는 뭔가요? (0) | 2024.01.15 |
| [혼공얄코] Chapter 01-4 디버깅 중인데, 빌드 해 보고 이상 없으면 릴리스할게요 (1) | 2024.01.10 |