티스토리 뷰

라라벨은 블레이드(blade)라는 템플릿으로 프론트엔드를 구현한다.

블레이드는 .blade.php 확장자를 사용하며 '상속' 과 '섹션' 이라는 개념이 존재한다.





master.blade.php 생성하기


블레이드는 /layouts/master.blade.php 의 레이아웃 틀을 상속받아 페이지 뷰를 구성한다.

마스터 레이아웃의 작성 예시는 다음과 같다.


<!DOCTYPE html>
<html>

<head>
    <meta name="theme-color" content="rgb(255,255,255)" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="icon" sizes="192x192" href="/icon.png" />
    <title>@yield('title')</title> // 페이지 타이틀 영역
    @yield('header_css_js') // 페이지에 사용될 CSS와 JS를 임폴트 하는 영역
</head>

<body>
    @yield('header') // 헤더 영역
    <div id="container">
        @yield('container') // 콘텐츠 영역
    </div>
    @yield('footer') // 푸터 영역
    @yield('import_js') // 스크립트 영역
</body>

</html>


예시를 보면 @yield 라는 명령을 볼 수 있다. @yield는 한마디로 '여기 들어가는 내용을 상속한다'는 것을 의미한다. 자세한 내용은 뷰페이지를 만들어보면서 알아보자.





뷰 페이지 구성하기


마스터 레이아웃을 만들었으면 뷰 페이지를 구성해볼 차례다. 먼저 예시를 보겠다.


@extends('layouts.master') // layouts/master.blade.php 파일의 레이아웃을 상속받는다.

@section('title') // @yield('title')에는 '테스트페이지' 라는 값이 입력된다.
    테스트페이지
@stop

@section('header_css_js') // @yield('header_css_js')에 페이지에 사용될 js와 css를 임폴트 한다.
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <link href="/css/base.css" rel="stylesheet" type="text/css" />
@stop

@section('header')
    @include('layouts.header.header') // 헤더에는 layouts/header/header.blade.php의 내용을 가져온다.
@stop

@section('container')
    @include('assets.main_bn') // assets/main_bn.blade.php의 내용을 가져온다.
    <div class="list_wrap">
        <div class="product_listwrap">
            <div class="grid">
                @include('products.feed') // products/feed.blade.php의 내용을 가져온다.
            </div>
        </div>
    </div>
@stop

@section('footer')
    @include('assets.footer') // 푸터에는 assets/footer.blade.php의 내용을 가져온다.
@stop

@section('import_js') // 페이지에 사용되는 js를 임폴트 한다.
    <script src="/js/common_menu.js"></script>
@stop


먼저 @extends 명령을 통해 어떤 레이아웃을 상속받을지 지정한다. 예시에서는 layout 폴더의 master.blade.php 파일의 레이아웃을 상속받았다.


@section은 상속받은 파일의 @yield 부분에 입력될 내용을 지정한다. 예를 들자면


@yield('title')에 들어갈 내용은 @section('title') 안에 작성하고 @stop으로 닫아주면 된다.


헤더와 푸터처럼 모든페이지에 포함되는 영역이나 반복적으로 들어가는 부분은 별도의 블레이드 파일을 생성하여 @include 명령을 통해 가져올 수 있다. 이런 형태의 레이아웃 구성은 수정이 겁나 쉽다.





저작자표시 비영리 변경금지

'HTML & CSS & Jquery' 카테고리의 다른 글

[Jquery] 팝업 알럿창 띄우기  (0) 2016.10.18
[JQuery] 스크롤에 따라 슬라이드 되는 헤더 만들기  (0) 2016.04.20
[Jquery] 제이쿼리를 이용해 슬라이드 메뉴 만들기  (19) 2016.04.07
[CSS] CSS 초기화 하기  (0) 2016.04.01
[HTML] 새 HTML 파일 생성하기  (0) 2016.04.01
공유하기 링크
댓글