2019.04.15 Python and Django Full Stack Web Developer Bootcamp

(스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)

# 질문에 답하기

  1. What is web?

우리가 사이트 주소를 입력했을 때 일어나는 일들

  1. 사이트 주소를 입력한다.(www.google.com)
  2. 우리 컴퓨터가 packet에 ip를 포함하여 요청을 보낸다.
  3. 이러한 요청은 선을 통해서 혹은 위성을 통해서 이동한다.(by ISP)
  4. ISP에 의해 reroute 되어 정확한 서버주소로 찾아간다.
  5. 그렇지만 server에서 한번에 모든 데이터를 보내기에는 너무 크다.
  6. 따라서 웹사이트는 나누어져 packet으로 전송된다.
  7. 이러한 나누어진 패킷들은 여러 방향으로 나누어져서 들어오고 오직 목적지만이 중요하다.
  8. 패킷들은 가장 빠르게 목적지에 도달하는게 제일 중요하다.(by home ip address)
  9. 패킷이 도착하면 그들은 reassemble 하여 페이지를 보여준다.
  • 수업 중에 알려준 것을 적었는데 내가 배운 것보다 더 간단하게 알려주었다.
  • 내가 다시 한번 이 부분에 대해 정리를 해야겠다.

웹사이트의 구성

  1. front - end
    1. 색상 및 눈에 보여지는 부분들
    2. html
    3. css - cascading style sheets ( colors, fonts, border 등)
    4. javascript - 프로그래밍 로직으로 activity하게 만들어준다.
    5. jquery - html css javascript를 활용한다.
  2. back - end
    1. language
      1. php. node.js, ruby, java, python
    2. Framework
      1. python - django
      2. Node js
      3. java
    3. database

html

  1. hypertext markup language

html(head, body)

  1. head
    1. meta data 포함
    2. 자바스크립트, css에 대한 정보 포함
    3. title : 텝 부분에 무엇이 보이는지 알려준다.
  2. body
    1. actual content
    2. <!-- comment --> (주석처리 방법)
  3. html 공부사이트
    1. w3s
    2. mozilla

html tag

  1. <h1> <h2> <h3> ~ <h6> heading의 사이즈들
    1. 기본적으로 heading 들이기 때문에 간격이 떨어져서 배치된다.
  2. <p> paragraph
    1. 문단을 나누어 준다.
  3. <b>, <strong>글자를 굵게 만든다. (bold/strong)
  4. <i> <em>글자를 옆으로 기울게 만든다. (이텔리 tag/ emphasis)
  5. List 관련
    1. ol(ordered list) + li (list)
    2. ul(unordered list)
    3. 하위로 내려가야 할 때는 다시 li자리에 ul 혹은 ol을 해줘야 한다.
  6. Divs and span tage
    1. div(divide)
      1. 특정 부분을 나누어서 css를 적용할 수 있게 된다.
    2. span
      1. 전체를 묶는게 아닌 한줄에 적용해줄 수 있다.
    3. BooGi's tory :: id 와 class 차이 & div 와 span 차이점
  7. attributes
    1. add more information to html tags
    2. <img scr=" " alt = "">
      1. src 이미지의 경로에 대해서 적어준다.
      2. alt(alternate): img가 나오지 않을 시 대신해서 적어줄 말을 적어준다.
      3. 알아서 paragraph를 나눈다.
    3. a : anchor 특정 웹사이트링크를 연결해줄 때 쓴다.
      1. <a href ="https://fabl1106.github.io">Daegu Owl</a>

test 01.

test01

구현

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>EXERCISE TITLE</title>
  </head>
  <body>
    <h1>Welcome to my Website!</h1>
    <p>I'm excited to eventually learn Django</p>
    <p><a href = "https://www.djangoproject.com/"> Here is a linke to the official Django Website</a></p>
    <p>Here is a picture of the python logo</p>
    <img src = "https://www.python.org/static/community_logos/python-logo-master-v3-TM.png">
    <p>Here are three reasons Django is cool<p>
    <ol>
      <li>Ridiculously Fast</li>
      <li>Reassuringly Secure</li>
      <li>Exceedingly Scalable</li>
    </ol>
    <h2>Bonus: Optional Extra Credit</h2>
    <p>Can you figure out how to make a picture a link?</p>
    <p><a href = "https://www.djangoproject.com/"><img src ="django.png"></a></p>
  </body>
</html>
저작자표시

'HTML' 카테고리의 다른 글

HTML 06. Server만들기(POST 및 CGI)  (0) 2020.01.16
HTML 05. Server만들기(get)  (0) 2020.01.16
HTML 04. clone page+Bootstrap  (0) 2020.01.16
HTML 03. form, input, label  (0) 2020.01.16
HTML 02. table 만들기  (0) 2020.01.16

+ Recent posts

티스토리툴바