23.03.02 / 기본 키워드 정리

[ 1.  W3C 표준화 제정 단계 ]

• 웹 기술을 표준화 하기 위해서 W3C의 워킹그룹이 따라야 하는 여러 절차와 요구사항
• 초안 -> 후보 권고안 -> 제안 권고안 -> 권고안

< 왜 웹 표준을 준수해야 하나?  >

브라우저 구성 요소인 브라우저 엔진은 웹 페이지를 구성하는 HTML, CSS 등 자료를 해석해서 사용자의 장치에 맞게 변환하는 역할을 하는데 웹 표준에 의거하여 프로그래밍 한다. 따라서, 코드 작성 시, 웹 표준에 맞게 코드를 작성해야 엔진이 해석하고 변환할 수 있고, 브라우저가 정상적으로 읽을 수 있다.

 

[ 2. 크로스 브라우징 ]

• W3C에서 채택된 표준 웹 기술을 적용해 여러 브라우저(크롬, 엣지 등)에서 동일한 화면 & 동작 등을 보여줄 수 있도록 제작하는 기술 또는 방법.

 

[ 3. 웹 접근성 ]

• 장애를 가진 사람들도 웹 사이트를 이용할 수 있게 하는 방식.

 

[ 4. 웹 호환성]

• 다른 환경(웹 사이트가 작동하는 PC, 모바일 등의 서비스 이용자 단말기)에서도 동등한 서비스를 제공하는 것.

 

[ 5. UI ]

• UI디자인 : 화면의 모양이나 기능 등을 표현하는 것. (사용자가 마주하게 될 시각적인 디자인)
• 목적 : 일관성을 확보하는 것.

 

[ 6. 웹 ]

• 인터넷이 연결된 사용자들이 서로 정보를 공유하는 공간 (인터넷이 더 큰 개념이고, 그 안에 웹이 있다.)
• 웹 브라우저를 통해 접근할 수 있는 사이트를 웹 사이트라고 한다.
• 'www' or 'w3'라고 부른다.

 

[ 7. 웹 브라우저 / 브라우저 ]

• 어떤 사이트에 접속할 수 있는 도구 
• 크롬, 엣지(MS), 파이어 폭스, 사파리 등

<브라우저의 기본 인터페이스 명칭>

• 뷰포트 : 하나의 웹페이지가 출력되는 영역
• 뷰 포트는 사용자의 디바이스 마다 다르기 때문에, 동일한 웹 페이지라도 디바이스에 따라 화면 크기가 다르게 보이는 현상이 나타날 수 있다.
• 출력(렌더링) : 브라우저의 뷰 포트 영역에 웹 사이트를 출력 or 그려내는 것.

 

[ 8. 웹 개발 ]

• 웹 사이트를 만드는 것.
• 웹 사이트 개발 : 개발자의 컴퓨터 환경 = 로컬(Local)개발 환경 
• 정적 사이트 : 사용자에게 단순한 정보를 보여주는 사이트
• 동적 사이트 : 화면에 보이는 모습 뿐 아니라 사용자에게 제공할 기능과 서비스까지 포함한 사이트.
• 웹 편집기를 통해 소스를 작성하고, 웹 브라우저에서 결과를 확인한다.
• 웹 편집기 종류 : Visual Studio Code, Notepad++ 등...

 

[ 9. 백 엔드 (서버) ]

• 보이지 않는 정보를 처리
• 서버에서 데이터를 관리하는 프로그래밍
• 데이터베이스를 설계하거나, 데이터를 처리하는 영역

 

[ 10. 서버 ]

• 웹 사이트에서 제공하는 자료 = 서버라고 부르는 컴퓨터에 들어 있는 자료
• 서비스를 제공하는 역할.
• 제공하는 컴퓨터 : 서버   /   서비스를 받는 컴퓨터 : 클라이언트

ex) 관광지 어플 : 서버 / 사용자 : 클리이언트 / 관광지 정보
      지리 정보 서버 : 서버 / 관광지 어플 : 클라이언트 / 위치 정보(맵)
      사용자(클라이언트)가 관광지 어플(서버)에게 관광지 정보를 요청하면
      관광지 어플(클라이언트)이 지리 정보 서버(서버)에게 위치 정보를 제공 받아
      관광지 정보에 위치 정보를 더해 사용자(클라이언트)에게 제공 한다.
즉, 서버와 클라이언트는 절대적인 것이 아닌 상대적인 것이다.

     

[ 11. 프론트 엔드 (클라이언트) ]

• 눈에 보이는 화면
• 웹 사이트의 디자인 & 사용자 동작에 반응하는 기능을 만듦.
• 서버에서 받아온 데이터를 웹 브라우저에 어떻게 표시할 것인지 프로그래밍(HTML, CSS, Java script)

 

[ 12. 웹 동작 방식 ]

• 웹 앱(웹 어플리케이션) : 인터넷을 통해 웹 브라우저에서 이용할 수 있는 응용 프로그램.
• 웹 앱 - 홈페이지  /  사용자 컴퓨터 <-----> 서버

- 브라우저를 연다.
- 주소창에 접속을 원하는 사이트 주소를 입력한다.
- 해당 사이트의 주소에 맞는 서버로 최초 요청이 들어간다.
- 최초 응답 (기본적인 웹 사이트 구조를 담고 있는 HTML 파일)
- 작성된 HTML에 맞는 이미지, CSS 파일 등 서버로 추가 요청을 보낸다.
- 페이지를 구성하는 새로운 파일들을 보내준다.

 

[ 13. HTML / Hyper Text Markup Language ]

• Hyper Text : 문서를 연결해주는 링크   -   웹 페이지를 작성하기 위한 언어.
• Markup Language : 표시하다.  -   화면에 표시되는 형식을 나타내거나 태그를 이용해서 데이터의 논리적 구조를 명시하기 위한 규칙을 정의.
• 자주 사용하는 HTML 요소와 해당 요소들을 가지고 실제 CSS와 JS를 통해 어떻게 웹 사이트를 만들 수 있는지 알아야 한다.

< HTML5의 특징 >

- 시멘틱 태그를 지원한다. (시멘틱 : 의미있는, 의미의)
   <header>, <main>, <article>, <footer>
=> 문서 구조에 적합하게 웹 페이지를 설계할 수 있다.
     직관적으로 레이아웃을 작성할 수 있다.