html+css

 

 

 

 

Q. 웹페이지는 무엇으로 동작하는가?

 

웹페이지의 기본 구조의 3대장

★ 웹페이지의 뼈대/틀의 역활인 HTML!

• 웹페이지가 구조화가 되어 있는지 시각적으로 브라우저 하여금 있도록 하는 언어이다. . 
• 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 컴퓨터 언어 의 일종이다.
• 데이터를 기술한 언어라는 점에서 컴퓨터 와는 분명한 차이가 있다.

★  그림에 생명을 부여해 주는 CSS

•  예를 들어 Tistory라는 웹페이지에는 많은 버튼이 있다. 마우스를 올렸을때, 버튼의 색깔, 애니매이션 등 동적 효과를 부여해주는 웹페이지를 구성하는 프로그램밍 언어다.   

★  데이터의 흐름을 관리해주는 JavaScript 

•  html이라는 도화지에 css로 생동감있는 효과를 추가하지만,  일상생활에서 웹페이지를 통해 데이터를 입력하고 저장하고, 읽고, 써야 할 때가 있고, 그 기능을 해주는 것이 이 JavaScript이다.

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content

Structuring content with HTML - Learn web development | MDN

MSDN에서 Html, Css등 상세한 사용 방법, 기초예제 등등 제공해준다. '프로그래밍 언어에는 이런 기능이 있고요, 어떻게 사용하는 것도 있어요!'와 같은 수많은 공식 문서가 있고 이것도 마찬가지의 문서이다.

 

Frontend와 Backend 는 서로 땔래야 할 수 없는 존재이다.

• Frontend는 이름에서도 느끼는 것처럼 앞에서 뭔가를 하는 것 같은 느낌인 단어이다. Frontend는 위의 html, css, js를 이용하여 고객사 / 사용자의 편의성에 맞게 설계 제작해 시각적으로 표현하는 아티스트와 비슷한다. 
• Backend는 뒤에서 뭔가를 해줄것 같은데, 흔히 눈에 보이지 않는 데이터를 가진 서버와 밀접한 관련이 있다.  

Backend를 하는데 Frontend도 알아야해?

• 내 대답은 Yes이다.  Backend는 보이지 않는 데이터의 흐름을 제어하고, 고객의 중요 정보, 다수의 사람이 서버를사용할때 발생하는 트래픽을 관리한다. 
• 데이터가 정상적으로 서버에 입력을 받았는지 Frontend와 다르게 확인할 길이 없다. 검증을 할때 테스트 화면이 필요할수 있다. 
• 'Frontend에서 완성되기만을 기다릴 수도 있지만 Frontend의 작업이 늦어진다면?'이라는 불상사가 생길 수도 있다. 그때까지 기다리는 것보다 투박하게 만들어도 서버와의 데이터 교환이 정상적으로 이루어지는지 확인이 필요하다.