일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- K디지털기초역량훈련
- 국비지원
- 내일배움카드
- udemy
- 리액트
- DOM
- js
- SVG
- 변수 선언
- 나라사랑카드
- js split
- 코딩테스트 lv0
- flex
- Flex Container
- React
- margin-left
- flex item
- CSS
- 코딩테스트 js
- 프로그래머스 lv0
- 프로그래머스 JS
- 노드
- 바이트디그리
- javascript
- API
- 자바스크립트
- react강의
- html
- 호이스팅
- 패스트캠퍼스
- Today
- Total
꺾이지 않는 마음
웹의 작동원리와 HTML/CSS/JS에 대한 이해 본문
#1 '웹개발'이란?
말 그대로 웹페이지를 만드는 것이다.
#2 작동원리
우리는 보통 웹 사이트를 방문하기 위해서는 컴퓨터나 노트북으로 브라우저를 이용한다.
브라우저 주소창에 특정 주소를 입력하거나, 포털사이트 검색 결과로 나온 링크를 클릭하면 브라우저가 그 기업의 컴퓨터에 방문하겠다는 요청을 보낸다.
이 요청을 보낼 때 쓰는 표준화된 방식이 'HTTP' 혹은 'HTTPS'(Hypertext Transfer Protocol Secure)이며, 컴퓨터는 사용자에게 보여줄 웹페이지 화면을 나타내는 웹사이트 코드를 브라우저에게 보냄으로써 이에 응답한다.
즉, 웹 개발자란 어떤 코드로,' 어떤 프로그래밍 언어로 응답을 보낼 코드를 작성해야 할까'를 고민하는 것이라고 사람이라고 할 수 있다. 물론, 이건 매우 축소된 의미이다.
웹 개발자가 알아야할 3가지 언어가 있는데,
HTML:(Hypertext markup language)
CSS(cascading style sheets)
JS(Java Script)
이다.
HTML은 웹 사이트의 실제 내용과 구조를 만드는 데 사용하는 언어인데,
HTML만 사용하면 웹사이트의 내용은 잘 나타나지만 디자인이 안예뻐서 보기에 좋지가 않다.
이 때, 사용하는 언어가 CSS(cascading style sheets)이다.
CSS는 웹사이트의 스타일을 정의할 수 있는 언어로, 웹사이트의 디자인적 요소를 담당한다.
그리고 마지막 JS(Java Script)는 웹페이지가 사용자와 상호작용을 할 수 있게 해주는 언어이다.
다시 작동 원리로 돌아와서,
인터넷의 모든 장치들은 식별하기 위해 IP(Internet Protocol) Address를 가지고 있다.
흔히 우리가 게임하다가 싸움이 나면 "너 아이피 추적해서 찾아간다"라고 할 때 그 아이피가 바로 이 단어이다.
그러므로 방문하려는 특정 기업의 컴퓨터 인터넷의 IP 주소를 알면 그 웹사이트를 방문할 수 있다.
하지만 길고 복잡한 IP주소를 일일이 기억하긴 어렵기 때문에 사용자는 '도메인'으로 웹사이트에 접속한다.
우리가 주소창에서 흔히 보는 'amazon.com', 'apple.com' 이 바로 도메인이다.
모든 IP주소를 저장하고 있는 DNS 서버라는 곳이 있는데,
브라우저는 사용자가 입력한 도메인을 IP주소로 변환하기 위해 DNS 서버에 대화를 시도하고,
DNS 서버가 요청받은 도메인에 상응하는 IP주소를 브라우저에게 주어 웹사이트에 방문할 수 있게 되는 것이다.
웹사이트 하나 접속하는데 뭐 이렇게 오래 걸리나 싶지만,
이는 현실에서 단 몇 초 만에 이루어지는 과정이다.
'웹 프로그래밍 > HTML&CSS' 카테고리의 다른 글
[HTML] HTML과 HTML의 요소 (0) | 2022.08.02 |
---|---|
[CSS] Flex 속성 알아보기 3 - flex-shrink (0) | 2022.08.01 |
[CSS] Flex 속성 알아보기 2 - flex-grow (0) | 2022.07.31 |
[CSS] Flex 속성 알아보기 1 (0) | 2022.07.26 |
[CSS] overflow 속성 알아보기 (0) | 2022.07.23 |