키워드:
HTML,CSS,JavaScript,웹 표준,반응형 웹,적응형 웹
참고:
(책) 혼자 공부하는 얄팍한 코딩 지식
⎷ 웹 브라우저
사람들은 웹사이트를 열어서 인터넷 서핑을 하는데, 이 때 사용되는 소프트웨어(ex. 크롬, 엣지, 사파리 등등)를 웹 브라우저, 줄여서 브라우저 라고 한다.
사용자가 구글 크롬을 사용해서 네이버 웹사이트에 접속하는 과정
사용자가구글 크롬검색창에 네이버 홈페이지 주소(www.naver.com)를 입력한다.구글 크롬은네이버 서버에 네이버 홈페이지에 접속하기 위한 요청을 보낸다.네이버 서버는구글 크롬에게 HTML 문서, 파일 등의 데이터를 보내면서 응답한다.구글 크롬은 네이버 서버로부터 받은 문서를 실행하여사용자에게 네이버 홈페이지를 화면에 보여준다.
웹사이트 뼈대 3가지
HTML:- 정적 언어
- 마크업 언어
- 역할:
단순히 웹 페이지에 어떤 요소를 어떻게 놓을지 배치하는설계도이다. 어떠한 논리나 지시를 담은 것이 아닌, 단지 화면에 글자나 이미지, 버튼 등을 가져다 놓는구조도라고 보면 된다.
CSS:- 정적 언어
- 스타일 언어
- 역할:
HTML과 같은 마크업 언어가 실제로 표시되는 방법을 기술한다. (디자인 담당)
JavaScript:- 동적 언어
- 프로그래밍 언어
- 역할:
HTML과 CSS만 있다면 단순히 화면을 보여주는 것에 그치지 않는다. 여기에 JavaScript를 사용함으로써 동적인 기능을 구현할 수 있다. (ex. 버튼을 클릭했더니 어떤 액션이 일어난다던지)
즉, HTML로 각각의 요소들을 '가져다 놓으면' / CSS로 '예쁘게 꾸며주고' / JavaScript로 '일을 시킨다'
이러한 상호작용으로 웹사이트가 만들어진다.
⎷ 웹 표준
웹 환경의 일관성과 접근성을 보장함으로써, 사용자와 개발자 모두에게 보다 나은 편리함을 제공하기 위해 웹 표준이 생겨났다.
브라우저의 기본 역할은 HTML, CSS, JavaScript 코드를 사용해서 웹 페이지를 만들어 띄우고 기능들을 실행시키는 것이다. 그런데 기기마다, 브라우저마다 이 세 가지 코드를 읽어 들이는 방식이 다르다면 어떻게 되는가? 이러한 호환성에 문제가 생긴다면 각자 해석 방식이 달라 같은 웹 페이지여도 모두 다르게 보이는 문제가 발생한다.
따라서, 사용자가 어떤 브라우저를 사용하든 일관된 방식으로 웹 콘텐츠를 경험할 수 있도록 HTML, CSS, JavaScript 등의 기술이 모든 브라우저에서 일관되게 동작하도록 정의한 것이 웹 표준이다. 이는 사용자 뿐 아니라 개발자에게도 편리함을 제공한다. (각 브라우저 환경에 맞게 따로 개발할 필요가 없으니까)
⎷ 반응형 웹 vs 적응형 웹
반응형 웹 (자동으로 조절한다)
- 페이지 내 요소들을 신축성 있게 만들어 기기나 화면 크기에 맞게 너비나 높이 위치 등을 자동으로 조절하는 웹사이트
- 사이트 구조가 단순하면 반응형 웹으로 만들어서 PC와 모바일에서 모두 동작하도록 하는 것이 유리하다.
- 그러나 사이트에 들어갈 내용이 많고 구조가 복잡하다면 반응형 보다는 적응형으로 만드는 것이 유용하다.
적응형 웹 (따로 만든다)
- 화면 크기에 따라 PC용, 모바일용 웹사이트를 따로 만드는 것이다.
- 예시) 네이버 홈페이지
- 사이트에 들어갈 내용이 많고 구조가 복잡하다면, PC에서 보던 화면을 모바일에서 반응형 웹으로 자동 조절할 경우 보기 불편할 수 있다. 이러한 경우엔 차라리 모바일용에 맞춘 새로운 구성의 화면을 따로 제작하는 것이 나을 수 있다.
simple is best