•
작성자 : 상암고 1학년 5반 13번 안설
•
작성날짜 : 25년 4월 1일
인터넷의 역사
•
인터넷 창시자
◦
인터넷은 1991년도에 팀 버너스리 가 유럽 입자가속 연구소의 사이트를 만들면서 생성이 되었다.
◦
위 사이트를 시작으로 전세계의 인터넷 사이트들이 링크 형태로 연결이 되었다.
•
인터넷 제작 언어
◦
HTML : 하이퍼텍스트 마크업 랭귀지의 약자. 팀버너스리가 만듦. 웹사이트의 뼈대를 생성. 예를들어 메뉴, 글, 제목, 그림, 링크 등등 을 제작 할 수 있음.
◦
CSS : 캐스케이드 스타일 시트의 약자. HTML로 만든 웹사이트 문서를 꾸며주는 컴퓨터 코드. 폰트, 레이아웃 등 디자인적 요소를 추가할 수 있다.
◦
JS : 자바 스크립트 의 약자. 웹사이트의 동작을 구현하기 위한 프로그래밍 코드. 특정한 조건이나 상황에서 웹사이트가 개발자가 원하는 형태로 동작하게 한다.
인터넷의 구조
•
프론트엔드 와 백엔드 구조
◦
프론트 엔드 : 웹사이트의 보여지는 화면을 구성하는 코드
▪
프론트 엔드는 보통 생성형 AI에게 코드를 짜달라고 하거나, 템플릿, 코드펜 등 을 써서 웹사이트를 제작한다.
◦
백엔드 : 서버관리, 데이터베이스, 보안관리 등
▪
호스팅 : 서버 PC에서 내 프론트 엔드 코드와 백엔드의 데이터베이스를 동작시켜 외부에서 내 웹사이트를 들어 올 수 있게 하는 것
▪
백엔드는 보통 서버를 제공하는 클라우드 서비스를 이용한다.
▪
대표적인 백엔드 서비스로는 아마존의 AWS, 구글의 파이어베이스, MS 애저, neflify 등이 있다.
•
DNS(Domain Name System)
◦
웹사이트에 들어가기 위해서는 해당 서버의 ip 주소를 치고 들어가야 하는데, 이것이 외우기 어려워서 문자형태의 도메인(url)을 지정하여 관리하는 시스템이다. 미국에서 관리하고 있다.
[실습] 코드펜을 활용하여 웹사이트 프론트엔드 만들기
•
코드펜 실습 페이지 코드
1번실습 . 기본 html 코드 적용
•
html 코드는 body와 head로 구성되어 있다.
•
body태그 안에는 p, a, h1 같은 다양한 태그로 구성요소를 만든다.
html 기본코드
2번실습. css 코드 적용하기
•
CSS 코드는 html 태그에 디자인 값을 넣어준다.
css코드 예시
