버튼이 중간으로 가지 않았던 이유....

 

하 ㅠㅠ 너무 답답했다.

button을 만들고, margin : auto를 주었는데도,

이놈의 버튼은... 움직이지 않았다 ㅠㅠㅠㅠㅠㅠㅠ

 

왜 이렇게 안 움직이는 것일까..

 

너무 답답했다. 

 

근데... 정말 허무하게 회사의 프론트 개발자분의 한 줄로 끝나버렸다.

 

display: block; 

 

... 뭐야?? 어리둥절 하고 있는 나에게

친절하게 html의 태그들의 type은 3가지라고 이야기 해주었다.

 

inline와 block 그리고 inline-block 

 

기본적으로 block은 우리가 보는 화면은 한 줄을 차지하고 표시하고자 하는 것을 나타내고

inline은 한 줄을 다 차지하고 나타내지 않고, 다른 것들과 속해서 나타나게 된다.

 

block의 예시로는 P태그를 바로 생각해보면 될 것 같고, h태그 들도 모두 한 줄씩을 차지하고 있다.

그에 비해 image태그 혹은 button 태그는 inline태그라, 아무리 내가 margin auto를 주어도 

해당 줄을 다 차지하고 있지 않아서, 중앙정렬이 되지 못한 것이다.

 

이럴 때 해결할 수 있는 방법은 inline이 기본인 button을 

block으로 바꾸어주는 것 => display: block으로 해주는 것이다.

 

오늘도, 또 한 수 배워 간다 ㅠㅠ

참고 :

[[CSS] display - block과 inline 그리고 inline-block](https://seungwoohong.tistory.com/23)

'HTML' 카테고리의 다른 글

css) 버튼이 중앙으로 가지 않을 때  (0) 2020.09.28
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

2019.04.30 HTML을 통한 간단한 서버 구축하기2(POST)

# 질문에 답하기

  1. CGI

    Common Gateway interface
    CGI 단점 : 요청이 있을 때마다 프로세스(응용프로그램)을 새로 실행
    CGI 장점: 특별한 추가 프로그램 없이도 여러 언어의 스크립트 실행 가능

  • 특정 위치에 있는 것을 가지고 와야 할 때 쓰면 된다.

권한주기 (해당 파일마다 적용해줘야한다.)

  • chomod ugo+x cgi/test.py
  • #!를 써서 파이썬 경로를 써줘야한다.
  • which python3

구현

스크린샷 2019-04-30 오후 4 52 37
  • 해당 경로를 지정해줘야한다.
  • 해당 경로 파일에는 #!/usr/local/bin/python3이라는 python 경로를 지정해줘야한다.

test.py

스크린샷 2019-04-30 오후 4 54 46
  • 이렇게 한 뒤에 서버에 접속해보면 test.py의 자료를 가지고 온다.

POST

  • GET의 폼을 톨해 받은 자료를 POST로 받아와 해석하기
  • 폼을 통해 키와 몸무게를 받아 BMI 지수 출력해주기

구현

스크린샷 2019-04-30 오후 4 57 03
  • form_html에서 받은 자료를 method='POST'로 하여 POST로 보내고 포스트에서 해당 내용을 받아서 처리해준다.
  • 포스트에 담겨서 오는 내용은 주소창에 있는 자료를 해석하는게 아니므로 보안이 철저하지만 그만큼 해석하는게 쉽지 않다.
  • self.rfile.read 및 parse_qs를 사용한다.

'HTML' 카테고리의 다른 글

css) 버튼이 중앙으로 가지 않을 때  (0) 2020.09.28
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

2019.04.30 HTML을 통한 간단한 서버 구축하기1(get)

# 질문에 답하기

  1. HTTP Server

스크린샷 2019-04-30 오후 4 29 55

출처 : jQuery Ajax & JSON | PoiemaWeb

  1. 브라우저를 통해 사용자가 HTTP Rrequest message를 보내면
  2. 서버는 그 Message를 해석하고 Response Message로 응답한다.
    1. 어느 페이지로 접속하였느냐?
    2. Query string은 어떤 데이터를 가지고 있느냐?
    3. 특정 스크립트 요청이 있느냐?
    4. 최종 응답을 HTML, 다운로드는 파일로 할 것이냐?

HTTP Response만 하는 서버

  • Handler 필요 : 요청이 들어오면 어느 객체가 요청을 해석하고 처리할 것이냐?

  • 주소에 붙여서 보내면 이것을 읽어서 해석하는데 이를 쿼리스트링이라고 하고 파싱을 통해 주소내 특정 값들을 분리한다.

  • def run와 with handler는 같은 것이다.

  • 네이버 메인 페이지는 get방식 회원가입 할 때는 POST방식이다.
    근데 장고 같은 프레임워크는 한 페이지에서 접속 Method에 따라 기능을 분기한다.
    예) 회원가입 페이지 domain.com/singup/

  • Get방식으로 접속하면 회원가입 양식 보여주기

  • Post방식으로 하면 전달받은 데이터를 처리해서 회원가입 진행하기, 데이터베이스에 저장하기

  • 한 주소로 고정되어 있어서 회원 가입에 오류가 있으면 회원가입으로 돌아가서 다시 메시지를 띄어야 한다. 우리가 쳤던 정보 내용들이 남아 있어야 한다. 한 페이지에서 돌아가기 때문에 비밀번호와 같은 것을 잘못 입력해도 그대로 남아 있다.

do_GET 예시 코드

스크린샷 2019-04-30 오후 4 35 17
  • Handler 클래스를 만들고 그 아래에 GET과 POST를 두어서 2가지에 대해서 어떻게 처리할지에 대한 내용이 들어간다.

do_GET을 통해 주소창에 들어간 내용 해석하기

from urllib.parse import parse_qs, urlparse

PORT = 8000

class Handler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-type', 'text/html')
        self.end_headers()
        query_text = urlparse(self.paht).query
        print(query_text)
        query_vars = parse_qs(query_text)
        print(query_vars)

        if 'weight' in query_vars and 'height' in query_vars:
            height1 = float(query_vars['height'][0])
            weight1 = float(query_vars['weight'][0])
            BMI = weight1/((height1/100)**2)
            message = "Your BMI is " + str(BMI)

        self.wfile.write(bytes(message, 'utf-8'))
        return

    def do_POST(self):
        pass

def run():
    server_address = ('127.0.0.1', PORT)
    httpd = HTTPServer(server_address, Handler)
    print("serving at PORT", PORT)
    httpd.serve_forever()

run()

결과값

'HTML' 카테고리의 다른 글

css) 버튼이 중앙으로 가지 않을 때  (0) 2020.09.28
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

2019.04.16 Python and Django Full Stack Web Developer Bootcamp - Bootstrap

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

# 질문에 답하기

  1. clone coding 다시해보기

문제

main page

스크린샷 2019-04-16 오후 10 33 25 스크린샷 2019-04-16 오후 10 33 44

login page

스크린샷 2019-04-16 오후 10 43 03

해답

main page

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Project</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Welcome</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="signin.html">Sign in <span class="sr-only">(current)</span></a>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4">Coffee Lover Project</h1>
          <p class="lead">Welcome to your Bootstrap Project: Coffee Lover</p>
          <p class="lead">You will recreate this webpage and an additional Form Page</p>
          <p class="lead">Just follow the instruction steps here to re-create these webpages!</p>
          <ol>
            <li>Create a general landing page with a JumboTron</li>
            <li>Next create a NavBar on the Page that links to another html file</li>
            <li>Add two paragrahs of lorem-ipsum below the jumbotron</li>
            <li>Next use the Grid system to add in thumbnail pictures of coffee. Source: https://stocksnap.io/search/coffee You will need to use the thumbnail class for this. Here are the image links:</li>
            <ul>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg">One</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg">Two</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg">Three</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg">Four</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg">Five</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg">Six</a></li>
            </ul>
            <li>Next make sure that at the largest settings you have 3 columns of pictures. On the smallest screen settings you should have 2 columns. Its up to you where you want to change.</li>
            <li>Next create another html file for the sign up page.</li>
            <li>Create a Form on this Sign Up page with Email, Password, and a Check Box</li>
          </ol>
          <p>That's it. Feel free to play around with this project and style it more to your liking. The main focuses of this project are the uses of NavBar, Jumbotron, Form, Container, and the Grid System.</p>
        </div>

      </div>
    </div>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
    <div class="container">
      <h2>Pictures of Coffee</h2>
      <div class="row">
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
      </div>
    </div><!-- /.container -->
  </body>
</html>

login page

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="jumbotron">
      <div class="container">
        <h1>Log In</h1>
        <p>Enter your email and password below to log in to Coffee Lover</p>
      </div>
    </div>
    <form>
      <div class="container">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
  </body>
</html>
  • 후 쉽지 않은 TEST였다. ㅠㅠ
  • 영어로 수업을 하니 시간이 2배는 더 걸리는 것 같다.

'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
HTML 01. 기본 tag들  (0) 2020.01.16

2019.04.15 Python and Django Full Stack Web Developer Bootcamp

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

# 질문에 답하기

  1. html에서 테이블 만드는 tag

form

  1. class : by css 연결고리
  2. action : 특정 사이트를 링크 해놓으면 submit을 하였을 때 해당 링크로 이동
  3. method : javascript와 결합하여 행동
  4. form은 입력된 데이터를 한번에 서버로 전송한다.
  5. 따라서 함께 input 받아서 전송할 데이터들은 form으로 묶는다.

input (무언가를 쓸 수 있게 해준다.)

  1. type : text / email / password / submit / color / radio
    1. 이메일타임은 @ 혹은 .com을 쓸 수 있다.
    2. 자동적으로 이메일 타입인지 확인할 수 있다.
    3. password는 자동적으로 별표처리가 된다.
    4. submit은 보낼 수 있게 해준다.
    5. text를 해서 쓰는 것만큼 크기를
    6. radio는 동그라미 버튼이 나온다.
      1. radio에서도 value값을 넣어줘야지 이게 값이 나중에 전달되어 쓸 수 있다.
      2. loc 라고 해놓으면 radio 박스에서 하나만 선택할 수 있게 해준다
      3. 단 name에 같은 loc 라고 해주어야지 서로 인식할 수 있다.
  2. name : 딱히 표현은 되지 않으나 나중에 name을 value와 함께 전달한다.
    1. 나중에 참조할 때 쓸 수 있다.
  3. value : 초기값
    1. 자동적으로 처음에 값을 넣어준다.
    2. 사용자가 값을 바꿀 수 있다.
    3. placeholder로 투명하게 보이게 할 수도 있다.
  4. required를 통해 꼭 넣어야 하는 것을 설정해줄 수 있다.
  5. 정말 잘 정리해놓은 자료: HTML : 폼(form) 이해

label tag

  1. input에 email을 넣고 submit을 누르면 주소창이

    1. file:///Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/input_practice.html?useremail=gang0406%40naver.com 이렇게 변한다.
  2. input에 text를 넣고 submit을 하면

    1. file:///Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/input_practice.html?userinput=mystuff 제일 마지막이 이렇게 변한다.
  3. submit버튼을 눌렀을 때 무언가 엑션을 주고 싶을 때

    1. form action = " 주소 " method = "get" 근데 딱히 method는 적지 않아도 가긴하네?
    2. https://fabl1106.github.io/?userinput=HELLO+WORLD
    3. 다른 페이지로 가면서 내가 입력한 것을 가지고 있다.
  4. label

    1. 텍스트와 문구를 한개로 라벨 해준다.
    2. 텍스트박스와 문구가 한줄에 같이 생기게 해준다.
    3. label for = "특정 문구" 를 해놓으면 input에서 id를 통해 연결 시킬 수 있다.
    4. 활용 방법
      • <label for ="hello"> 이메일을 입력해주세요</label>
      • <input id = "hello" type = "email" name="" placeholder="@gmail.com" required>
  5. select

    1. 무언가를 순차적으로 고르게 하는 것을 만들 수 있다.
    2. option와 함께 사용
  6. textarea

    1. 문장으로 된 feedback을 적을 수 있도록 해준다.

Test 03

test03

구현

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Assessment Test HTML LEVEL</title>
  </head>
  <body>
    <h1>Course Sign Up Page</h1>
    <p>please Note : Frist, Last Name, Password, and Email are required</p>
    <form class="" action="/Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/thankyou.html" method="get">
      <label for="First">First Name:</label>
      <input id="First" type="text" name="" placeholder="First Name" required>
      <label for="Last">Last Name:</label>
      <input id="Last" type="text" name="" placeholder="Last Name" required>
      <p>
        <label for="Email">Email:</label>
        <input id ="Email" type="email" name="" placeholder="name@email.com" required>
        <label for="Password">Password</label>
        <input id = "Password" type="password" name="" value="" required>
      </p>
      <p>Are you over the age of 18?</p>
      <label for="Yes">Yes:</label>
      <input id = "Yes" type="radio" name="loc" value="Yes">
      <label for="No">No:</label>
      <input id = "No" type="radio" name="loc" value="No">
      <p>Do you have a Credit Card or PayPal?</p>
      <select class="" name="">
        <option value="Credit">Credit Card</option>
        <option value="PayPal">PayPal</option>
      </select>
      <p>Do you have any Feedback?</p>
      <textarea name="name" rows="8" cols="80"></textarea>
      <p><input type="submit" name="" value="Submit Feedback"></p>
    </form>

  </body>
</html>
  • 위에서는 아직 채워넣지 않았지만 각각의 tag에 대해 name 부분과 value 부분은 중요하다. name과 value가 합쳐져서 데이터베이스로 넘어간다.

'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
HTML 01. 기본 tag들  (0) 2020.01.16

2019.04.15 Python and Django Full Stack Web Developer Bootcamp

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

# 질문에 답하기

  1. html에서 테이블 만드는 tag

html leve 2

  1. table border = "1" : 테이블을 생성하겠다는 명령어(테두리 굵기 설정)
    1. thead : 테이블 행 제목 생성
      1. th 테이블 행 제목 입력
      2. 없어도 되나 굵게 표시되어 보기가 좋다.
    2. tr : 테이블 행 생성 명령어
      1. td 테이블 열 적기
      2. tr을 계속 추가해줘서 열 계속 만들어주기

html leve 2 test

test2

구현

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table border = "1">
      <thead>
        <th>Country Name</th>
        <th>Country Flag</th>
        <th>GDP(MIllions of USE)</th>
      </thead>
      <tr>
        <td>USA</td>
        <td><<img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/190px-Flag_of_the_United_States.svg.png" alt=""></td>
        <td>18,561,930</td>
      </tr>
      <tr>
        <td>India</td>
        <td><img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/150px-Flag_of_India.svg.png" alt=""></td>
        <td>2,250,990</td>
      </tr>
      <tr>
        <td>United Kingdom</td>
        <td><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/ae/Flag_of_the_United_Kingdom.svg/200px-Flag_of_the_United_Kingdom.svg.png" alt=""></td>
        <td>2,649,890</td>
      </tr>
    </table>

  </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
HTML 01. 기본 tag들  (0) 2020.01.16

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
HTML 01. 기본 tag들  (0) 2020.01.16

+ Recent posts