python-36: pico css
-
https://picocss.com/ 접속
-
home.html 파일
head부분에<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">입력 -
다시 실행
<main class="container"</main>만들어서 중앙에 오게 하기
<body>
<main class="container">
<h1>Job Scrapper</h1>
<h4>Waht job do you want?</h4>
<form action="/search">
<input type="text" name="keyword" placeholder="Write keyword please!"/>
<button>Search</button>
</form>
</main>
</body>
-
Search.html에도 pico추가하기
-
pico table 사용하기
<body>
<main class="container">
<h1>Search Results for""</h1>
<table>
<thead>
<tr>
<th>Position</th>
<th>Company</th>
<th>Location</th>
<th>Link</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</main>
</body>
grid 추가하기
<table role="grid">
table 가로로 스크롤
<figure> </figure>안에 `table` 넣기
최종
-home.html-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Job scrapper</title>
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
</head>
<body>
<main class="container">
<h1>Job Scrapper</h1>
<h4>Waht job do you want?</h4>
<form action="/search">
<input type="text" name="keyword" placeholder="Write keyword please!"/>
<button>Search</button>
</form>
</main>
</body>
</html>
-search.html-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Job scrapper</title>
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
</head>
<body>
<main class="container">
<h1>Search Results for""</h1>
<figure>
<table role="grid">
<thead>
<tr>
<th>Position</th>
<th>Company</th>
<th>Location</th>
<th>Link</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</figure>
</main>
</body>
</html>
댓글남기기