묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
<head>
<style>
.corevalue {
width: 100%;
}
// CSS 생략
</style>
</head>
<section class="corevalue">
<span class="noti">CORE VALUES</span>
<h1 class="tit">제목</h1>
<ul>
<li>
<div class="fe_box">
<div class="fe_top">
<img alt="Library-Books-256.png" data-file-srl="140" editor_component="image_link" src="[웹사이트 링크]/files/attach/images/136/136/bb50ff94f29f1fddb56f306d3deb45aa.png" class="ico"/>
<h2>Knowledge</h2>
</div>
<div class="fe_bottom">
<p>
튼튼하며, 황금시대의 더운지라 천하를 때문이다. 품었기 피가 피어나는 넣는 있는 얼음과 인도하겠다는 이것이야말로 이것이다. 열락의 청춘의 붙잡아 고행을 이 풀이 것은 얼마나 있다. 간에 이상이 찾아 그들을 위하여 싸인 없으면 날카로우나 꽃 힘있다.
</p>
<a href="#" style="background-color: #FF7F50;">링크</a>
</div>
</div>
</li>
// HTML 생략
</ul>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function getPaddingTop(obj) {
return (obj.parent().parent().height() / 2) - (obj.height() / 2 );
}
$('.fe_top').each(function(i, obj) {
// 자바스크립트 생략
});
// Animation
jQuery(document).ready(function($) {
var slideDuration = 1000;
$(".fe_box").mouseleave(function(){
// 자바스크립트 생략
}).mouseenter(function(){
// 자바스크립트 생략
});
});
</script>
힘들게 홈페이지 HTML 섹션을 만들었는데 적용이 잘 안되네요
2018.12.12 07:12
홈페이지를 위해서 XE 예제에 있는 섹션을 비슷하게 만들었는데 적용이 잘 안됩니다.
HTML/CSS/JAVASCRIPT 를 이용해서 만들었지만 가장 큰 문제는 CSS 인것 같습니다. 원래 있는 레이아웃 때문에 제가 만들어둔 CSS 가 무시당하는 것 같아요.
가장 큰 문제는 일단 폭이 100%가 아니고 오른쪽에 공간이 남아있고, 아이콘 이미지가 설정한 값이 무시되고 원래 있는 CSS 가 적용되는 것 같습니다. 따라서 크게 보이더라고요.
디자인은 XEDITION 기본값을 이용하고 있습니다. XE 설치하면 나오는 예제처럼 홈페이지 처럼 설정할 수 있는 방법을 알려주세요.
간단한 소스코드:
<head>
<style>
.corevalue {
width: 100%;
}
// CSS 생략
</style>
</head>
<section class="corevalue">
<span class="noti">CORE VALUES</span>
<h1 class="tit">제목</h1>
<ul>
<li>
<div class="fe_box">
<div class="fe_top">
<img alt="Library-Books-256.png" data-file-srl="140" editor_component="image_link" src="[웹사이트 링크]/files/attach/images/136/136/bb50ff94f29f1fddb56f306d3deb45aa.png" class="ico"/>
<h2>Knowledge</h2>
</div>
<div class="fe_bottom">
<p>
튼튼하며, 황금시대의 더운지라 천하를 때문이다. 품었기 피가 피어나는 넣는 있는 얼음과 인도하겠다는 이것이야말로 이것이다. 열락의 청춘의 붙잡아 고행을 이 풀이 것은 얼마나 있다. 간에 이상이 찾아 그들을 위하여 싸인 없으면 날카로우나 꽃 힘있다.
</p>
<a href="#" style="background-color: #FF7F50;">링크</a>
</div>
</div>
</li>
// HTML 생략
</ul>
</section>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function getPaddingTop(obj) {
return (obj.parent().parent().height() / 2) - (obj.height() / 2 );
}
$('.fe_top').each(function(i, obj) {
// 자바스크립트 생략
});
// Animation
jQuery(document).ready(function($) {
var slideDuration = 1000;
$(".fe_box").mouseleave(function(){
// 자바스크립트 생략
}).mouseenter(function(){
// 자바스크립트 생략
});
});
</script>
원하는 화면
XE 페이지에서 나오는 화면