728x90
일단 css 내용이다.
body{margin:0;background-color:#191970;color:red}간단하게 배경은 파란계열, 글 색은 빨강색으로 지정하였다.
처음에는 resources/css/app.css 에서 작성을 한 것을 기반으로 웹페이지에 적용이 되는 줄 알았지만 계속 시도해도 안되길래 무엇이 문제일까 알아보았다.
해야 될 것은 번들링되어있는 파일을 가져오는 것이다.
그러면 번들링은 어떻게 해야되는가
그것은 일단 npm 명령어를 사용해야된다. npm 명령어 사용은 node.js를 설치해야 될 것
그렇게 npm을 통해서 번들링이 된 파일들은 assets에서 형성이 되어 사용이 가능하다.
생성된 파일을 사용을 하려면 blade 템플릿을 수정해야한다.
<link rel="stylesheet" href="resources/css/app.css" />기존 방식은 이렇게 하는 줄 알았지만 버젼이 올라가면서 적용시키는 방식이 달라졌다.
/public/build/assets 에 경로를 지정을 한 뒤에 사용을 해야된다.
그리고 blade 템플릿에는 이렇게 코드를 작성한다.
<link rel="stylesheet" href='{{ URL::asset("build/assets/app.css") }}' />
app/js/app.js에도 css파일을 참조해주는 코드를 추가적으로 작성을 한다.
import '../css/app.css';
정리
blade 템플릿
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href='{{ URL::asset("build/assets/app.css") }}' />
</head>
<body class="antialiased">
@foreach($td as $item)
NAME : {{ $item->name }} <br>
BIRTH : {{ $item->birth }} <br>
ID : {{ $item->id }} <br>
PW : {{ $item->pw }} <br>
EMAIL : {{ $item->email }} <br>
@endforeach
</body>
</html>
결과
'PHP' 카테고리의 다른 글
| PHP에 MYSQL 연결 (0) | 2023.07.13 |
|---|