카테고리 없음

스파르타 AI-8기 TIL (9/19)

kimjunki-8 2024. 9. 19. 21:43

AAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.............
I don't know when all the things went wrong

 

 

 

 

Command Palette -> Python: Create Environment... -> Venv -> Python 3.8.6 64-bit
It was wrong...it showed an error code

So, I tried all the way to make it through Chat GPT

from flask import Flask, render_template, request
import requests

app = Flask(__name__)

res = requests.get(
)
 
print("Status Code:", res.status_code)
print("Response Text:", res.text)

if res.status_code == 200:
    try:
        rjson = res.json()
      
        movie_list = [movie["movieNm"] for movie in rjson["boxOfficeResult"]["dailyBoxOfficeList"]]
    except KeyError as e:
        print(f"KeyError: {e} - Please check the API response structure.")
        movie_list = [] 
else:
    print(f"Failed to retrieve data: {res.status_code}")
    movie_list = []  

@app.route('/movie1')
def movie1():
    print(request.args.get('query'))
    return render_template('movie.html', movie_list=movie_list)

if __name__ == '__main__':
    app.run(debug=True)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action = "{{ url_for('movie1')}}">
        <input type="text" name = "query"></input>
        <button x = 'search'> Search</button>
    </form>
</body>
</html>

But it didn't work well....

SO.... Today, I gonna review all the stuff that I studied

1. HTML and CSS

<!DOCTYPE html> -> declare the html5 document

<html lang="ko"> -> setting the language = Korean

<head> </head> -> include the metadata of documents

Metadata and SEO (<meta></meta)-> containing the information of the web page

Meta page ->

<meta name="description" content="..."> -> summarize the contents of the webpage

<meta name="author" content="name"> ->  name of the developer

<meta name="viewport" content="width=device-width, initial-scale=1.0"> -> set the scale of the page

<h1> ~ <h6> -> scale of the title

<p> ~ </p> -> paragraph

<a href="URL"> -> show the link

ex. <a href="https://www.youtube.com">click here!</a> -> click here! -> youtube

<img src="image link" alt="explanation"> -> inserting image

<ul></ul> and <ol></ol> ->

<ul> -> unordered list

<ol> -> ordered list

<li></li> -> tags that shows the items in order

<table></table> used when organizing the data
<table>
    <tr>
        <th>header 1</th>
        <th>header 2</th>
    </tr>
    <tr>
        <td>data1</td>
        <td>data 2</td>
    </tr>
</table>

<tr> - define the row of the table

<th> - define the header cell

<td> -  define the data cell

 

for CSS,

Box model-

margin:  set the out space(px)

padding: set the inner space(px)

border: set the outline 

width, height: set the width and height

<div></div> -> Used to group content.
ex.

<div class="container">
    <h1>Hello!</h1>
    <p>Example of div tag.</p>
</div>

 

ex. code for flexbox

<div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<style>
.flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 200px;
    background-color: lightgray;
}
.item {
    background-color: coral;
    padding: 20px;
    text-align: center;
    width: 50px;
}
</style>

In html->

 

Flexbox ->

display: flex; -> makes the container box into a flexbox.

justify-content: space-around; -> set the equal spaces between the items

align-items: center;  -> Aligns items vertically to the center.

 

ex. Grid Layout

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

<style>
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background-color: lightblue;
}
.grid-item {
    background-color: orange;
    padding: 20px;
    text-align: center;
}
</style>

output:

display: grid; -> makes the containers into grid box

grid-template-columns: repeat(2, 1fr); -> define 2 rows

gap: 10px; -> gaps between the items 

 

ex. Float

<div class="float-container">
    <div class="float-item">lett</div>
    <div class="float-item">right</div>
</div>

<style>
.float-container {
    background-color: lightyellow;
}
.float-item {
    float: left;
    width: 50%;
    padding: 20px;
    background-color: pink;
}
</style>

output:

float: left; ->float to the left and makes the texts stay around

 

ex. Over flow

<div class="overflow-container">
    <p>long text will be here. long text will be here.  long text will be here.  long text will be here.  long text will be here. </p>
</div>

<style>
.overflow-container {
    width: 200px;
    height: 100px;
    overflow: hidden; /* overflow: auto; */ -> scroll bar will be created
    background-color: lightcoral;
}
</style>

output:

overflow: hidden;

 

overflow: auto;

For flex box,

1. Flex Container

flex-direction: Set the direction of the items which will be placed

    • row: width
    • column: length
    • row-reverse: width reverse
    • column-reverse: length reverse
  • justify-content: Sets how items are aligned on the main axis (main direction)..
    • flex-start: aline at the starting part
    • flex-end: aline at the end part
    • center: aline at the center
    • space-between: Evenly space items between each other.
    • space-around: Evenly space around items.
  • align-items: Sets how items are aligned on the cross-axis (vertical direction)..
    • stretch: default, stretches the items.
    • flex-start: flex-start: aligns to the start of the cross-axis.
    • flex-end: aligns to the end of the cross-axis. 
    • center: aligns to the center of the cross-axis.
    • baseline: aligns to the baseline of the text.

2. Flex Item 속성

  • flex-grow: Determines how much remaining space to occupy. Default is 0.
  • flex-shrink: Determines how much items will shrink when space runs out. Default is 1.
  • flex-basis: Sets the default size of the item. Specifies the initial size of the item along the main axis.

Starting today, I will review everything.

Good night ^^

'카테고리 없음'의 다른글

  • 현재글스파르타 AI-8기 TIL (9/19)

티스토리툴바