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]


www.avast.com/ko-kr/recommend?tag=3bad61c2-2c20-44fc-afd9-387a4433d97a



http://www.favicon.cc/
파비콘 만드는 싸이트
직접 만들어서 사용해도 된다. 35*35 사이즈로 제작후 업로드
예제 -><link rel="shortcut icon" href="http://www.007.com/wp-content/themes/bond/images/favicon.ico?84cd58" />헤드안에 넣어준다 .
그누보드에 적용시 head 에 소스를 넣어도 적용이 안된다.
head.sub 중간에 dtd 선언후<html>다음<head>바로 밑에 
<link rel="shortcut icon" href="http://도메인.co.kr/favicon.ico">또는 png 로 올려도 되지만 ie 낮은버젼에서는 지원이 안됨...
절대경로 또는 상대경로도 적용된다.


모바일코딩시 아이폰에서 숫자를 전화번호로 인식해서 폰트색상이 아이폰 기본 색상스타일로 적용이 될경우가 있다.
<span style="color:#999">010-1111-1234</span>
당연히 색상코드 #999로 적용이 되야하지만, 아이폰 자체에서 숫자를 전화번호로 인식하는 경우가 있어 a 태그에 기본색상이 적용되게 된다.
즉 <span style="color:#999"><a href="tel:010-1111-1234" class="tel">010-1111-1234</a></span>
뭐 이런식으로 아이폰에서는 위처럼 적용이 된다고 보면될것이다. 
다시말해 아이폰에서 전화번호 a태그에 자체 지정한 스타일이나 class 가 적용된다는 얘기다.
이럴경우에는 <span class="num">010-1111-1234</span> 이런식으로 class를 주고 .num a{color:#999} 이렇게 a태그에 색상을 적용하면 해결된다.



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;}








이미지맵은 하나의 이미지를 불러들인 후 그 이미지에 영역을 지정해서 각각의 하이퍼링크를 할수있도록 도와주는 역할을 하는 기능입니다.
그런데 이 이미지 맵으로도 '롤오버 이미지 효과'를 구현할 수가 있다는거 아시나요?
아래의 내용을 참고하시길 바랍니다.

<img src=top_1.gif name=leewidth=87 height=87 border=0 useMap=#button>
<map name=button>
 <area onmouseover="if(document.images) lee.src='top_2.gif'" onmouseout="if(document.images) lee.src='top_1.gif'" shape=CIRCLE coords=43,43,43 href="http://www.naver.com/">
</map>

드림위버의 이미지맵 기능을 이용하신 후 약간의 내용만 수정하심 됩니다.
그럼 내용설명입니다.

㉠ name=lee  : 이미지이름명
㉡ useMap=#button   : 맵기능이름명
㉢ onmouseover="if(document.images) lee.src='top_2.gif'"   : 마우스오버="if(document.images) 이미지이름명.src='나타날이미지경로'"
㉣ onmouseout="if(document.images) lee.src='top_1.gif'"   : 마우스아웃="if(document.images) 이미지이름명.src='원래이미지경로'function hrefMark(){





----------------------------------------------------



이미지맵 태그에서의 script활용법


마우스오버(onMouseOver)를 삽입한 소스
<area shape="rect" coords="364,12,500,28" href="#" onMouseOver="링크경로명">

온클릭으로 팝업창 스크립트를(onClick)를 삽입한 소스
<area shape="rect" coords="364,12,500,28" href="#" onClick="javascript:window.open('링크경로명','','width=510,height=220,top=100,left=100,statusbar=no,scrollbars=yes,toolbar=no');">

자바스크립트 재알창을 삽입한소스
<area shape="rect" coords="364,12,500,28" href="#" onClick="javascript:alert('테스트입니다.');"> 


* 이미지맵 점선 테두리 없애는 소스*

onFocus="this.blur()"


메뉴에 주로 ul li를 많이 사용하는데 가운데 리스트 전체를 가운데 정렬하고싶을때 사용합니다.

문단만 가운데 정렬하기

목록 안에 있는 문단만 가운데 정렬할 때는 text-align 속성을 사용합니다.

ul {
  text-align: center;
}

이때, 목록 요소의 가로 크기는 변하지 않습니다.

목록 요소 자체를 가운데 정렬하기

목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ulol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다.

ul {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.

ul {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

목록 요소 자체가 가운데에 위치하는 것으로, 문단 정렬은 변하지 않습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        font-family: Consolas;
      }
      h1 {
        font-size: 16px;
      }
      ul {
        border: 1px solid #bcbcbc;
      }
      ul.a {
        text-align: center;
      }
      ul.b {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
      }
      ul.c {
        display: table;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h1><code>text-align: center</code></h1>
    <ul class="a">
      <li>Lorem Ipsum</li>
      <li>Dolor Amet</li>
    </ul>
    <h1><code>width: 300px; margin-left: auto; margin-right: auto;</code></h1>
    <ul class="b">
      <li>Lorem Ipsum</li>
      <li>Dolor Amet</li>
    </ul>
    <h1><code>display: table; margin-left: auto; margin-right: auto;</code></h1>
    <ul class="c">
      <li>Lorem Ipsum</li>
      <li>Dolor Amet</li>
    </ul>
  </body>
</html>


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)


+ Recent posts