김갱환
맨땅에 코딩
김갱환
전체 방문자
오늘
어제
  • 분류 전체보기 (239)
    • ⁂ 맨땅에 코딩 (11)
      • : Story (3)
      • : MiniProject 'MyWeb' (1)
      • : Final Project (5)
      • : Josa-Moa 한국어 조사 처리 프로젝트 (1)
    • —————Frontend——————————————.. (0)
    • ⁂ HTML (10)
      • : 기본 익히기 (10)
    • ⁂ CSS (15)
      • : 기본 익히기 (15)
    • ⁂ Java Script (32)
      • : 기본 익히기 (28)
      • : 자바스크립트 라이브러리 (1)
      • : 연습 문제 (3)
    • ⁂ jQuery (11)
      • : 기본 익히기 (11)
    • ⁂ Bootstrap (3)
      • : 기본 익히기 (3)
    • ⁂ TailWind CSS (1)
    • ⁂ AJAX (5)
      • : 기본 익히기 (5)
    • ⁂ Vue.js (3)
      • : 기본 익히기 (3)
    • —————DB : Data Base————————.. (0)
    • ⁂ Oracle DB (27)
      • : 기본 익히기 (24)
      • : 연습 문제 (3)
    • ⁂ MyBatis Framework (15)
      • : 기본 익히기 (15)
    • —————Backend———————————————.. (0)
    • ⁂ Java (62)
      • : 기본 익히기 (42)
      • : JDBC - Java DataBase Conn.. (4)
      • : Crawling (2)
      • : 독학으로 공부하기(과거) (11)
      • : 연습문제 (3)
    • ——————Web————————————————— (0)
    • ⁂ JSP (28)
      • : 기본 익히기 (28)
    • ⁂ Spring FrameWork (15)
      • : Legacy Project (1)
      • : 기본 익히기(Boot 기반) (14)
    • ——————————————————————— (0)
    • ⁂ Error Note (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 코딩
  • httperror
  • 비트연산자 #코딩공부 #자바공부 #코딩 #자바 #프로그래밍 #개발자
  • 자바
  • 개발자
  • web.xml수정
  • 코딩공부
  • 객체지향프로그래밍
  • 풀스택
  • 코딩 #코딩공부 #상수 #리터럴 #형변환 #개발자 #자바 #자바공부 #자바독학
  • 백앤드
  • 코딩공부 #자바공부
  • 자바공부
  • 프론트앤드
  • 코딩공부 #코딩 #자바 #자바독학 #자바공부 #개발자 #프론트앤드 #백앤드 #풀스택
  • 코딩 #코딩공부 #프론트앤드 #백앤드 #풀스택개발자
  • ErrorPage
  • HTML공부
  • http에러메세지
  • 연산자 #기본연산자 #코딩 #자바 #독학 #자바공부 #자바연산자

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
김갱환

맨땅에 코딩

⁂ HTML/: 기본 익히기

[HTML] #4 서버에 대한 이해

2022. 7. 29. 11:24

1. 서버에서 보내주는 편지, HTML

 

 서버(Server)란 어떠한 요청이 들어왔을 때 그 요청에 대한 응답을 줄 수 있는 것을 말한다.

 

 네이버라는 사이트를 생각해보자.

 하루에도 얼마나 많은 불특정 다수의 사람들이 네이버 사이트를 통해 다양한 요청을 넣을까.

 서버는 이 요청들에 대해 응답을 준다.

 그 때 응답을 어떻게 줄까?

 

 바로 HTML 문서로 응답을 주는 것이다.

서버는 각 클라이언트의 요청에 HTML로 응답을 준다.

 

 우리가 웹사이트를 연다면, 열어달라는 요청에 의해 서버가 요청에 맞는 사이트의 HTML 문서를 하나 열어준다는 뜻이다.

 

 내가 열고 있는 사이트의 소스가 궁금할 때 볼 수 있는 방법이 있을까?

 사이트의 빈 화면(마우스가 변하지 않는)에서 오른쪽 마우스 클릭을 하면 '페이지 소스 보기'라는 항목이 있다.

 이것을 눌러보면 무수히 많은 코드들이 나온다(물론 모든 것이 다 나오진 않는다).

 우리가 개발을 할 때 이렇게 웹사이트의 코드를 분석해야할 때가 많이 있을 것이다.

 

 

2. 개발자 모드 적극 활용하기

 

 이렇게 웹사이트를 분석할 때 자주 쓰는 것이 바로 개발자 모드이다.

 개발자 모드는 웹사이트를 연 상태에서 F12를 누르면 오른쪽에 뜨게 될 것이다.

 

 수많은 기능들을 처음부터 다 볼 순 없으니 가장 중요한 두 기능만 알아보자.

 바로 화살표와 Elements 항목이다.

 

왼쪽 끝의 화살표, 그리고 Elements 항목

 

 1) 화살표

 화살표 항목을 누르고 마우스를 왼쪽의 페이지 화면으로 옮겨보자.

 마우스가 향한 곳에 해당하는 코드들이 연동된다.

 

 2) Elements

 화살표와 반대로 코드에 마우스를 옮기면 각 코드에 해당하는 화면이 체크된다.

 

 이 정도만 알아도 사이트를 천천히 하나씩 살펴볼 수 있는 첫 발걸음을 뗄 수 있다!

 궁금한 사이트를 열어서 살펴보자(아직은 모르는 것 투성이지만..)

 

 

 :)

저작자표시 비영리 동일조건 (새창열림)

'⁂ HTML > : 기본 익히기' 카테고리의 다른 글

[HTML] #5 Meta 태그 알아보기  (0) 2022.08.02
[HTML] #3-3 시맨틱 요소(semantic element) 알아보기  (0) 2022.07.29
[HTML] #3-2 블럭(block!) 2 : 웹사이트 따라 만들어보기  (0) 2022.07.28
[HTML] #3-1 블럭(block!) 1 : 블럭이 뭐야?  (0) 2022.07.28
[HTML] #2-4 HTML 파헤치기 4 : 폼의 속성  (0) 2022.07.28
    '⁂ HTML/: 기본 익히기' 카테고리의 다른 글
    • [HTML] #5 Meta 태그 알아보기
    • [HTML] #3-3 시맨틱 요소(semantic element) 알아보기
    • [HTML] #3-2 블럭(block!) 2 : 웹사이트 따라 만들어보기
    • [HTML] #3-1 블럭(block!) 1 : 블럭이 뭐야?
    김갱환
    김갱환
    코딩의 코자도 모르는 이의 공부 기록장

    티스토리툴바