Spo web maker

css는 사용하기 쉽고 간편한 언어이지만 제대로 구성하고 잘 사용하기는 쉽지 않습니다.

css를 작성하고 링크시킬때 보통 head테그 안에 link를 사용해서 각각 css를 연결해주는 경우가 많습니다.

<link href="style.css" rel="stylesheet" />

혼자 사용하는 개인사이트일 경우에는 위와 같이 사용해도 문제가 없지만

하지만 대형프로젝트일 경우 여러명의 사람들이 동시에 작업해서 올리게 되면 충돌이 자주 일어나고 유지보수하는 상황에서도 스타일을 바로 찾기가 힘들어 집니다. 

그래서 css를 모듈화 하는 경우가 많습니다. 

화면별로 css를 나누어서 협업시에도 동시에 작업할수 있도록 해줍니다.

그리고 css 선택자를 작성할때 bem방식이나 대시를 사용하는것도 개인적으로 비추천합니다.

그런 방식들은 클래스로 검색시에 찾을수 없는 경우가 있고 더블클릭으로 복사 붙여넣기도 어렵습니다.

클래스 작성은 다른선택자와 겹치지 않게 독창적으로 사용하되 직관적으로 알수 있게끔 만들어야 합니다.

사실 클래스명 정하는게 제일 어렵죠.. 이건 다음번에 다시 이야기 하도록 하고 css 구조로 돌아가봅니다.

보통 유지보수를 위해서 @import를 많이 사용합니다. 

화면에 link 를 하나만 걸어두고 link된 스타일은 import만을 위한 스타일로만 사용합니다. 

<link href="main.css" rel="stylesheet" />

그럼 main.css 에는 컴퍼넌트화 된 css 파일만을 불러오기위한 css파일이 완성됩니다.

/* mixin */

/* 믹스인등 scss함수 */

/* plugin */

/* 외부 프레임워크 */
@import url(bulma.css);
@import url(chartist.min.css);
@import url(MonthPicker.css);

/* base */

/* 리셋 폰트 타이포 등 */
@import url(reset.css);
@import url(font.css);

/* layout */

/* 메인페이지, 서브공통으로 들어가는 기본구조 */
@import url(layout.css);

/* components */

/* 버튼,인풋,모달,페이징,탭 등 컴퍼넌트 */
@import url(components.css);

/* pages */

/* 추가로 이 페이지에서만 레이아웃이 달라질때 구분해서 작성 */

/* helper */

/* 색상, 사이즈, 여백등 강제적으로 고정시켜야 할때 헬퍼클래스 사용 */

위 샘플은 제가 작업할때 나누어 놓은 것으로 각자의 프로젝트에 맞춰서 가감해서 사용하시면 됩니다.

위와같은 방식으로 main.css를 작성하고 각각 하위  css에 스타일을 작성하면 됩니다.

이렇게 여러파일로 나누어서 작성하는 이유는 여러사람이 동시에 작업하기 편하고 충돌을 줄일수 있으며 스타일을 찾기 쉬워서 한눈에 관리하기 쉬워집니다.

css 기본구조를 작성하는게 어렵지만 처음에 구조를 잘 파악하고 지금 하고 있는 프로젝트에 어떤 것이 더 필요하고 어떤것은 필요없는지 잘 생각해서 처음에 잘 짜놓으면 앞으로의 작업이 수월해 집니다.

$(window).resize(function() { 

   if($(window).width() >768) {

        /* do something */ 

        $( '.gnb' ).addClass( 'hidden' );

    } 

});

출처: https://injeblog.tistory.com/82 [INJE BLOG]

html소스는 페이지 하단에 삽입

<a href="#" id="top_btn">상단으로</a>

제이쿼리 스크립트는 그보다 아래에 삽입

<script>

$(function() {

    $("#top_btn").on("click", function() {

        $("html, body").animate({scrollTop:0}, '500');

        return false;

    });

});

$( window ).scroll( function() {

  if ( $( this ).scrollTop() > 200 ) {

    $( '#top_btn' ).fadeIn();

  } else {

    $( '#top_btn' ).fadeOut();

  }

} );

</script>

css 소스 삽입

#top_btn{position:fixed;bottom:10%;right:5%;display:none;width:50px;height:50px;border-radius:5px;background-color:#fff !important;text-indent:-9999px;background:url("../img/top_btn.gif") center center no-repeat; overflow:hidden;opacity:0.8;z-index: 999;}

http://www.basic-slider.com/

// width and height need to be provided to enforce consistency
// if responsive is set to true, these values act as maximum dimensions
width : 700,
height : 300,

// animation values
animtype : 'fade', // accepts 'fade' or 'slide'
animduration : 450, // how fast the animation are
animspeed : 4000, // the delay between each slide
automatic : true, // automatic

// control and marker configuration
showcontrols : true, // show next and prev controls
centercontrols : true, // center controls verically
nexttext : 'Next', // Text for 'next' button (can use HTML)
prevtext : 'Prev', // Text for 'previous' button (can use HTML)
showmarkers : true, // Show individual slide markers
centermarkers : true, // Center markers horizontally

// interaction values
keyboardnav : true, // enable keyboard navigation
hoverpause : true, // pause the slider on hover

// presentational options
usecaptions : true, // show captions for images using the image title tag
randomstart : true, // start slider at random slide
responsive : true // enable responsive capabilities (beta)

<?php echo mb_substr($list[$i]['wr_2'], 0, 18,"utf-8"); ?>

유투브 동영상을 홈페이지에 삽입할때 메뉴나 다른 요소들 위로 동영상이 가려지는 경우가 발생한다.

유튜브 동영상에 대해 파이어폭스나 심지어는 IE에서도 발생하지 않는 z-index 문제이다.

중첩된 객체들에게 z-index를 부여해도 유튜브 동영상을 iFrame으로 포함한 경우 이상하게 표시된다.

이 문제는 유튜브 동영상을 삽입할 때 wmode=opaque 속성을  지정하면 해결할 수 있다.

즉, 아래와 같이 삽입된 경우

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>

아래와 같이 수정하면 된다.

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4?wmode=opaque" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>

단, 이미 속성이 지정된 경우는 wmode 앞에 ?가 아니라 &를 붙여야 한다.

즉, 원래 삽입된 코드가 아래와 같은 경우는

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4?rel=0" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>

아래와 같이 수정하면 된다.

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4?rel=0&wmode=opaque" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>

<iframe width="960" height="600" src="https://www.youtube.com/embed/MkyFbcnIQV4?rel=0&wmode=opaque" frameborder="0" allowfullscreen></iframe>

&wmode=opaque 

Flash Movie는 기본적으로는 z-index와 관계없이 화면의 맨 앞에 보이게 된다. wmode 값을 설정하여 플래시 플레이어를 제어 하여 배경을 투명하게 하거나 위에 레이어를 올릴 수 있다. 

window : Flash Movie 를 맨 위에 놓게 된다. (기본값) 

opaque : Movie 아래의 모든 것을 가리게 된다. 위에 레이어를 올릴 수 있다. 

transparent : Movie를 투명하게 하여 뒤의 html 부분을 보여준다. 

transparent모드를 사용할 경우 animation performance를 떨어뜨리게 되기 때문에 반드시 필요한 경우에만 사용해야 한다. 면적이 넓으면 피하는 것이 좋다.