참고용 CSS technique

=======================================================================

1. HTML 엘리먼트 구분하기

<body>
    <p class="feature1">Styles make the formatting job much easier and efficient.</p>
    <p class="feature2">To give an attractive look to web sites. styles are heavily used.</p>
    <h1 class="feature2">Using jQuery</h1>
    <h1 class="feature3">Power of selectors</h1>
</body>

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

.greencolor{color:green;font-style:italic;}
.highlight{background-color:aqua;color:blue;font-family:arial;}
.redandbold{color:red;font-style:italic;font-family:arial;font-weight:bold;}

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

$(document).ready(function(){
    //HTML 엘리먼트 구분하기
    $('p.feature1').addClass('greencolor');
    $('.feature2').addClass('highlight');
    $('h1.feature3').addClass('redandbold');
});

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

=======================================================================

2. 엘리먼트 안의 엘리먼트에 스타일 적용

<p class="feature">Styles make the formatting job much easier and efficient.
<span>To give an attractive look to web sites.</span> styles are heavily used.
</p>
-----------------------------------------------------------------------------------------------------------

$('p.feature').addClass('greencolor');
$('p.feature span').addClass('highlight');

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

/*클래스가 feature인 HTML element에 적용할 스타일 */
.feature{property:value;property:value;...}
/*클래스가 feature인 HTML element안에 span element에 적용할 스타일 */
.feature span{property:value;property:value;...}
/*클래스가 feature인 문단(p) element안에 span element에 적용할 스타일 */
p.feature span{property:value;property:value;...}
/*클래스가 feature1인 HTML element안에 클래스이름이 feature2인 span엘리먼트에 적용할 스타일 */
.feature1 span.feature2{property:value;property:value;...}
/*클래스가 feature1인 문단(p) element안에 클래스이름이 feature2인 span엘리먼트에 적용할 스타일 */
p.feature1 span.feature2{property:value;property:value;...}

=======================================================================

3. 문단 들여쓰기

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

CSS 해당 Class >> margin-left:10% // 20% // 30%

=======================================================================

4. 문단의 첫 문자를 크게 표시하기

<p><span class="cap">S</span>tyles make the formatting job much easier and efficient.
To give an attractive look to web sites. styles are heavily used..............
</p>

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

.initialcap{font-size:2em}

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

$('span.cap').addClass('.initialcap');

=======================================================================

5. 제목과 문단사이의 간격 없애기
  <h3>Formatting Makes Attractive</h3>
  <p>Styles make the formatting job much easier and efficient.
  To give an attractive look to web sites. styles are heavily used.
  </p>

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

.heading{margin:0;padding:0;}
p{margin:0;padding:0;}

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

$('h3').addClass('heading');

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

=======================================================================

6. 제목에 스타일 적용하기

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

.heading{
     margin:0;
     padding:0;
     font-style:italic;
     border-top:5px solid black;
     border-bottom:5px solid black;
}
p{margin:0;padding:0;}

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

=======================================================================

7. 문단의 첫라인만 들여쓰기

text-indent:10px;

=======================================================================

8. 문단 내어 쓰기

text-indent:-10%;
margin-left:10%;

=======================================================================

9. 경계선으로 텍스트 하이라이트

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

.quote{
     margin:1%;                    /*상하좌우 외부 폭 띄우기*/
     color:#00a;
     font-style:italic;
     border:5px solid black;
     padding:2em;                 /*상하좌우 내부 폭 띄우기*/
     width:500px;
}

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

=======================================================================

10. 이미지를 사용하여 텍스트 하이라이트

<div>
<p>Styles make the formatting job much easier and efficient.
To give an attractive look to web sites. styles are heavily used.
</p>
<p class='feature'>Styles make the formatting job much easier and efficient.
To give an attractive look to web sites. styles are heavily used.
</p>
<p>Styles make the formatting job much easier and efficient.
To give an attractive look to web sites. styles are heavily used.
</p>
</div>
-----------------------------------------------------------------------------------------------------------

.quote{
    background-image:url( image path );
    background-repeat:no-repeat;
    margin:1%;
    color:#00a;
    font-style:italic;
    padding:20px 5px 5px 20px;
}

.closing{
    background-image:url( image path );
    background-repeat:no-repeat;
    background-position:bottom right;
}

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

$('p.feature').addClass('quote');
$('div').addClass('closing');

=======================================================================

11. 리스트항목에 리스트 속성 적용

.dispdisc{list-style-type:disc}

=======================================================================

12. 선택한 리스트 항목에만 스타일 적용

.dispdisc{color:green;font-style:italic;}

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

// 아이디가 drink 인 순서없는 리스트의 자식에 스타일 규칙 .highlight 적용

$('#drink > li').addClass('highlight');

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

// CSS클래스가 적용되지 않는 리스트 항목에 스타일 적용

$('#drink > li').addClass('highlight');
$('#drink li:not(.highlight)').addClass('Class Name');

=======================================================================

13. 리스트 항목사이 구분선 넣기

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

/*리스트 항목사이 구분선*/
/*모든 리스트항목에 적용하여 위 경계표시*/
.applytopborder{
    border-top:1px solid black;
}
/*마지막 리스트항목에 적용하여 위 경계표시*/
.applytopborder{
    border-bottom:1px solid black;
}
/*순서없는 리스트에 적용 글머리기호 없애고 계층별 들여쓰기도 없앰*/
.liststyle{
    list-style-type:none;
    margin:0;
}

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

$('ul').addClass('liststyle');
$('li').addClass('applytopborder');
$('li:last').addClass('applybottomborder');

=======================================================================

14. 리스트에 글머리 기호로 이미지 사용

.liststyle{
list-style-type:none;
list-style-image:url( image path );
}

=======================================================================

15. 인라인 리스트 작성

## 리스트 항목을 계층적 구조가 아닌 하나의 라인에 표시

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

.liststyle{
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}

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

$('ul').addClass('liststyle');
$('li').addClass('liststyle');

=======================================================================

16. 하이퍼링크에 스타일 적용

.linkstyle{
    font-weight:bold;
    background-color:#00f;
    color:#fff;
    text-decoration:none;                    /*하이퍼링크 기본 밑줄제거*/
}

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

## 하이퍼링크에 .linkstyle 스타일 적용);
$('a[href]').addClass('linkstyle');

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

## Mail To 하이퍼링크에 .linkstyle 스타일 적용);
$('a[href^="mailto:"]').addClass('linkstyle');

=======================================================================

17. HTML엘리먼트에 다양한 크기 할당

jQuery

$('.feature').css({property:value;property:value;...});

=======================================================================

18. HTML엘리먼트 위치 정하기

## 문단(p) Element 가 다른문단 왼쪽 or 오른쪽에 위치
float:left; >> 왼쪽
float:right >> 오른쪽

=======================================================================

19. 여러 칼럼의 레이아웃 만들기

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

## 세 문단(p) Element 가 각각위치에 배치 jQuery
$('.leftalign').css({'position':'absolute';'left':'50px';'width':'300px';});
$('.centeralign').css({'position':'absolute';'left':'400px';'width':'300px';});
$('.rightalign').css({'position':'absolute';'left':'750px';'width':'300px';});

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

## float 적용 jQuery
$('p').css({'float':'left';'width':'300px';'margin':'5px';});

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

## 컬럼사이 간격 늘리기 jQuery
$('p').css({'float':'left';'width':'290px';'margin':'15px';});

=======================================================================

20. 이미지를 텍스트로 감싸기

$('img').wrap('<div></div>');
$('<p>Style make the formatting~~~~~~~~~~~......</p>').appendTo('div');
$('img').css({'float':'left';'width':'200px';'height':'200px';});
$('p').css({'clear':'right'});

=======================================================================

21. 이미지에 그림자 효과 넣기

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

# backgroud : url (Image Path);
url 속성을 배경에 Image Path 파일에 저장된 이미지를 표시

# backgroud-repeat : no-repeat;
Image Path 에 있는 이미지를 한번만 표시함.

# backgroud-position: bottom right;
그림자 이미지가 이미지 오른쪽 아래에 표시되게 처리

# padding
실제 이미지와 그림자 이미지 사이에 거리를 두고, 그림자의 너비를 정한다.

=======================================================================

22. 마우스를 링크위로 움직일때 커서모양 변경

- Hover 시- $(this).css({'cursor':'wait'}); >> 모래시계 // $(this).css({'cursor':'default'}); >> 기본 화살표

=======================================================================

23. 긴텍스트를 지정한 영역에 표시

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

# $('p').css({'overflow':'scroll'});
문단 엘리먼트의 텍스트가 지정한 너비와 높이에 보이지않으면 스크롤바를 표시하게됨.

# $('p').css({'overflow':'hidden'});
문단 엘리먼트의 텍스트가 지정한 너비와 높이를 벗어나면 보이지 않게됨

# $('p').css({'overflow':'auto'});
스크롤바가 필요한 곳에만 표시됨

# $('p').css({'overflow':'visible'});
문단 엘리먼트의 텍스트가 모두 표시됨 >> 지정한 영역으로 제한되지 않음.

=======================================================================

24. Text Decoration 적용

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

jQuery
$('p.feature1').css({'text-decoration':'underline'});             /*밑줄*/
$('p.feature2').css({'text-decoration':'overline'});               /*윗줄*/
$('p.feature3').css({'text-decoration':'line-through'});         /*취소Line*/

=======================================================================

25. 배경 이미지 정하기

- background-image:url(Image Path) -

=======================================================================

26. 배경 이미지를 브라우저 중앙에 배치

- background-position:center -

=======================================================================

27. 배경 이미지 고정하기

- background-attachment:fixed -

'웹프로그래밍 > HTML/CSS' 카테고리의 다른 글

CSS 작성 TIP 10 (0)	2011.02.07
트위터, 페이스북 버튼으로 공유하기 (0)	2010.09.27
ime-mode 옵션 (0)	2010.09.15

참고용 CSS technique

'웹프로그래밍 > HTML/CSS' 카테고리의 다른 글

'웹프로그래밍/HTML/CSS' Related Articles

티스토리툴바