서브페이지 상단이미지 크기, 텍스트 활용하기

서브페이지의 상단이미지 영역 변형할 수 있는 항목은...

높이를 조절할 있으며, 해당페이지의 제목과 설명내용을 넣을 수 있습니다.

제목과 설명내용은 좌측/중앙/우측 정렬도 쉽게 변경할 수 있습니다.

또한 animate 효과를 넣을 수 있고, 그외에도 다양한 효과를 넣을 수 있습니다.

 

 

 

배경이미지 파일 위치는...de01의 이미지를 사용하게 이미지 경로가 작성되어 있습니다.

메인화면에서 이미 로드 하였으므로, 캐쉬파일을 이용해서 서브페이지에서는 더욱더 빠른 로딩속도를 보입니다.

또한 추가적인 이미지를 준비 하지 않아도 멋진 홈페이지를 구성할 수 있습니다.

(이미지경로를 다르게 하시면 사용자가 정의한 이미지를 사용할 수 있습니다.)

 

 

 

 

 

 

다양한 활용 적용의 예제

 

 

 

 

 

서브페이지에서 상단이미지 높이 조절

/*****************************************************************
서브페이지 > 상단이미지 : 공통
*****************************************************************/
/* 상단배경이미지 */
.nt_imgArea {
    height: 300px;
}

 

■ 수정전

height: 300px;

 

■ 수정후

height: 200px;

 

 

 

 

 

 

 

서브페이지에서 상단이미지  텍스트 활용 하기

■ 수정 방법

1. 아래 설명과 같이 <h3> 행을 "수정후" 내용처럼 추가합니다.

2. css 파일도 함께 수정 : "display: none"을 "display: block"으로 변경

위 1.2번 모두 진행해 주셔야 됩니다.

 

■ 수정전
<!-- 상단이미지 -->
<div class="nt_imgArea">
    <div class="con" style="background-image: url({{$template}}/img/_des/de01/de01_img01.jpg);">
        <p>
            We have created a awesome theme
            <br>Far far away,behind the word mountains, far from the countries
        </p>
    </div>
</div>




■ 수정후
<!-- 상단이미지 -->
<div class="nt_imgArea">
    <div class="con" style="background-image: url({{$template}}/img/_des/de01/de01_img01.jpg);">
    	<h3>공지사항</h3>
        <p>
            We have created a awesome theme
            <br>Far far away,behind the word mountains, far from the countries
        </p>
    </div>
</div>

 

■ html 수정 위치

> 디자인관리 > 템플릿 디자인 수정 > 페이지 > 해당디렉토리(폴더) > 해당페이지

 

 

 

 

 

/*****************************************************************
서브페이지 > 상단이미지 : 공통
*****************************************************************/
/* 상단배경이미지 */
.nt_imgArea {
    height: 300px;
}

/* 설명텍스트 */
.nt_imgArea .con h3 {
    display: block;/* none, block */
    text-align: center;
	font-weight: 500;
    font-size: 3.0em;
    color: #fff;
}
.nt_imgArea .con p {
    display: block;/* none, block */
    text-align: center;
    font-size: 0.875em;
	font-weight: 100;
    color: #aaa;
}

@media screen and (max-width: 991px) {
    .nt_imgArea {
        height: 150px;
    }
    .nt_imgArea .con h3 {
        font-size: 2.0em;
    }
    .nt_imgArea .con p {
        font-size: 0.750em;
    }
}

 

■ css 수정 파일 위치

> www > bizdemoXXXXXX > img > _css > nStyle_user.css

(위 내용이 없다면...복사 하셔서 추가해 주시면 됩니다.)