인터넷, web

international network

=”우리는 모두 연결되어있다” 통신망의 집합체

  • web= word wide web=통신망으로 정보를 공유할 수 있는 공간.
  • 연구원들 간 신속한 정보교환 목적으로 탄생
  • 정보를 하이퍼 텍스트 형식으로 표현.
  • hypertext: 링크, 참조 역할을 하는 기능.
  • 웹 브라우저: web페이지를 찾을 때 사용하는 것. (browse 찾디, 둘러보다)

클라이언트, 서버

  • 클라이언트=고객=와인 주세요, 스테이크 2개 주세요.⇒ 서비스를 이용, 요청하는 컴퓨터
  • 서버=서빙를 해주는 사람=서비스를 제공하는 컴퓨터
  • 프로토콜: 클라이언트와 서버가 정보를 보낼 때(인터넷을 통하여) 사용하는 틀, 약속
  • 프론트엔드: 사용자 측면. 사용자의 그래픽 인터페이스(화면 구현), 사용자와의 상호작용을 담당함.
  • 백엔드: 서브 측면. 프론트엔드에서 전달받은 데이터, 요청을 내부 데이터와 연산을 활용하여 처리 후 프론트엔드에 결과를 전달함.

1. HTML(Hypter text Markup Language)\

  • 구조. 웹페이지 구성 요소의 구조.
  • <>태그로 구조를 만듦.
    • <태그> 감싸진 글자가 그 태그의 역할을 맡는다.
    • 열고 닫는 태그가 세트이기도 하고 여는 것만 있을 수 있다.
  • 여러 태그 종류
    • html: HTML 문서의 루트 요소(root element)를 정의할 때 사용브라우저에게 해당 문서가 HTML 문서임을 알려주는 역할.
    • head:메타데이터(metadata)의 집합을 정의
      • 포함요소 들: <style><base /><link /><meta /><script><noscript> </noscript></script></style>
        • meta:해당 문서에 대한 정보인 메타데이터(metadata)를 정의. ex) 검색 엔진을 위한 키워드(keyword)를 정의할 때
    • body: 모든 콘텐츠를 포함하는 영역 정의, 여러 HTML 요소들을 하나로 묶어주어 스타일(CSS)을 변경하거나 께 웹 페이지의 레이아웃(layout)을 설정함. 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용됨.
    • title: 문서 제목 정의
      • 두 개 이상의 요소 정의 불가
    • div: 특정 영역(division)이나 구획(section)을 정의
    • a: 닻을 내려 다른 페이지로 가겠다.
      • 속성값
        • href(hypertext reference): 이동 링크 정의
    • br: Enter값. \n
    • b: 굵게 (단순 텍스트 진하게)
    • strong: 굵게(중요한 부분을 브라우저에 알림)
    • h1,h2,h3
    • form: 제출 양식 칸.
    • input:
      • type
        • text
        • password
        • button
      • value
    • 이외: script, link, img, span, p, li, u,style

2. CSS

  • Cascading Style Sheets. HTML을 꾸며주는 언어(태그 당)
  • 적용 방법
    • inline: HTML 태그 안에 같이 작성
      • HTML 태그 한쌍 <태그>text 를 element라 부름.
    • 내부 스타일 시트: HTML문서 안에 같이 작성(head의
    • 외부 스타일 시트: HTML 문서 밖에 작성 후 연결.
      • head에 link로 연결. rel=”stylesheet”와 href=”파일명.css”
  • 주석
    • html : <!— 주석—>
    • css: /* 주석 */
  • 지정 방법
    • 태그: h1{}
    • id: 하나의 태그에만 적용 가능. #이름
    • class: 여러 태그에 동시 적용 가능, 재사용 가능
    • .이름
  • id와 다르게 class는 중복 사용 가능하고, 값을 여러 개 줄 땐 class=”first second”처럼 띄어쓰기로 구분하고, .class값 이라는 형태로 제어
  • ID 는 스타일을 지정할 때 한 가지만 지정해서 쓰는 이름이다.(표기방식은 #이름)

  • 하나의 문서에 고유한 Id 하나 밖에 쓸 수 없습니다.

  • class 는 그룹으로 묶어서 스타일을 지정할 때 쓰는 이름이다.(표기방식은 .이름)

  • 하나의 문서에 여러번 쓸수 있다. 고유값이 아님.

3. Javascript

  • HTML 요소를 선택하여 제어할 수 있는 스크립트 언어
    • script: 대본처럼 그 요소에게 행동을 지시하는 것.
  • 적용 방법
    • 인라인: 사용자와의 상호작용이 있을 때만 가능.
      • 버튼을 누른다. 키보드를 누른다. 등.. html 에서 속성은 on~으로 시작함.
    • 내부 스크립트
      • body 맨 끝에
    • 외부 스크립트
  • 함수: 특정 기능을 수행하는 코드 덩어리
    • function 함수이름(){ }
  • 태그 찾기
    • tag: document.getElementByName(’태그 이름’)
    • id: document.getElementById(’아이디)
    • class: document.getElementsByClassName(’클래스 이름’)
      • document=해당 HTML문서
    • 값을 가져오려면 document.getElementBy~(이름’).value로 가져옴
  • 조건문
    • if( ) {} else() {}
  • 변수 정의
    • var: 안 씀. 원래는 var
    • let: 값 변경 가능
    • const: 값 변경 불가능. 상수