꽤나 간편하고 실용적인 서비스 하나를 찾은 것 같다.
프론트엔드에서 HTML 으로 구조를 작성하는 것만큼 중요한 것이
CSS 를 통해 사용자 경험을 최대한 좋게 만드는 것이다.
결국엔 웹 개발이라는 것은
사용자에게 좋은 서비스를 제공해주는 것이 본질이기에
시간을 들여 독창적인 CSS 를 구축하여 만드는
디자인은 매우 중요하다.
하지만 간단한 정보 전달용 웹이나
디자인보다 기능적인 면이 부각되는 웹 같은 경우는
'Pico' 라는 툴을 활용해
매우 빠르게 사용자 경험을 긍정적으로 바꿔볼 수 있다.
/ 링크 : https://picocss.com/
Pico CSS • Minimal CSS Framework for semantic HTML
Minimal CSS Framework for Semantic HTML A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà!
picocss.com
/ 코드
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
>
해당 링크를 Pico 사이트에서 복사한 후
<head> 태그 안에 집어넣기만 하면
Pico 가 제공하는 여러 서비스를 간단하게 이용할 수 있다.
이용하기 위한 코드들은 Pico 사이트에 제시되어 있으니 필요에 따라 복사하면 된다.
다크 테마, 가운데 정렬, 공백 생성, 표 테마 등등
일일히 설정하려면 머리 아픈 것들을
' HTML 태그만으로 ' 할 수 있다는 것이 참 멋지다.
/ 예시
<body>
<main class="container">
<h1>Job Scraper</h1>
<h4>What Job Do you want?</h4>
<form action="/search" method="get">
<input type="text" placeholder="Type in keyword" name="keyword">
<button type="submit">Search</button>
</form>
</main>
</body>
위의 <link> 태그를 <head> 에 넣은 후, <body> 에 있던 태그들을
<main class='container'> 에 넣기만 하면
가운데 정렬과 적절한 공백이 생긴다.
(Pico 에서 클래스 제공)
'Project > 일자리 스크래핑 서비스' 카테고리의 다른 글
| [Flask] Scraper 만들며 배운 Flask 개념들 (0) | 2024.07.30 |
|---|---|
| [프로젝트] Web Scraper 만들어서 일자리 구하기 : Final (0) | 2024.07.30 |
| [프로젝트] Web Scraper 만들어서 일자리 구하기 : 4일차 (0) | 2024.07.27 |
| [프로젝트] Web Scraper 만들어서 일자리 구하기 : 3일차 (0) | 2024.07.25 |
| [프로젝트] Web Scraper 만들어서 일자리 구하기 : 2일차 (2) | 2024.07.23 |