프론트엔드(css) 프레임워크 사이트
Bootstrap
Ulkit
Materialize
Bulma
주로 bootstrap 을 많이 이용하고 있으며, 개발 속도를 높여 주고 다양한 브라우저에서 동일하게 보여지는 크로스 브라우징이 가능하다.
** 크로스 브라우징(cross browsing)
표준 웹 기술을 사용하여 서로 다른 브라우저나 운영체제에 따라 달리 구현될 수 있는 기술을 비슷하게 만들고 어느 한쪽으로 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 구성하는 상호 호환 브라우징 기법.
이러한 프레임워크를 쓰면 디자인 과정 없이 빠르게 적용시킬 수 있으나 커스텀이 복잡해지고 사이트가 다소 무거워질수 있다는 단점이 있을거 같다. 적용 방법은 크게 두가지가 있다.
1. CDN(content delivery network) 활용
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>vscode에서 html 파일 형식내에 기본적인 html 템플릿(template) 적용 후 head테그안에 css link 와 body테그안에 script 링크를 적용시키면 되는거 같다. 하지만 bootstrap사이트 docs -> introduction 에서 복붙 가능하다.
아이콘 라이브러리
아이콘 라이브러리에서 사용했을 때 색 등을 커스텀하고 싶다면 svg파일로 받아 활요하면된다.
.svg 파일을 만들어 아래 코드를 적용후 커스텀 하자.
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px" viewBox="0 0 48 48"
style="enable-background:new 0 0 48 48;"
xml:space="preserve">
<!-- 아래에 색상값과 d값을 넣으세요! -->
<path
style="fill: #000000;"
d=""
/>
</svg>
해야 되는 일이 하고 싶은 일로