Html/css

< >

css basic Cascading Style Sheet

흑묘 2009.09.09 00:01 read.69

Cascading Style Sheet

2009.09.09 00:01:41

1.스타일시트의 문법구조

2.CSS를 따로 파일로 만든후 링크하기

3.STYLE속성을 사용하여 정의하기

HTML태그속에 바로 CSS를 정의하여사용할수 있다.

<FONT STYLE=font-size:13pt;>우리나라만세</FONT>

4.태그전체에 CSS적용하기

<HEAD>
    <STYLE TYPE="text/css">
        B {font-size:20pt; color:red;}
    </STYLE>
</HEAD>
<BODY>
    <B>서울특별시</B>
</BODY>

B : 태그이름
font-size, color : 속성
20pt : CSS속성값

5.동일한 태그라도 태그의 CLASS라는 속성을 이용하여 서로다른 스타일을 줄수도 있다.

<HEAD>
    <STYLE TYPE="text/css">
        B {font-size:20pt; color:red;}
        B.ONE {color:green;}
        B.TWO {color:blue;}
    </STYLE>
</HEAD>
<BODY>
    <B>글꼴크기 20이면서 빨간색</B>
    <B CLASS=ONE>클래스 ONE가 적용된 문장</B>
    <B CLASS=TWO>클래스 TWO가 적용된 문장</B>
</BODY>

6.ID태그를 이용한 다양한 적용

<HEAD>
    <STYLE TYPE="text/css">
        B {font-size:20pt; color:red;}
      B#ONE {color:green;}
        B#TWO {color:blue;}
    </STYLE>
</HEAD>
<BODY>
    <B>글꼴크기 20이면서 빨간색</B>
    <B ID=ONE>ID가 ONE인 태그</B>
    <B ID=TWO>ID가 TWO인 태그</B>
</BODY>

CLASS는 같은 클래스의 이름이 여러 개 존재할수 있지만, ID는 하나만 존재해야한다.
즉, 다음과 같은 선언은 틀렸다.

FONT#TEST{ color:red; }
B#TEST{ color:blue; }
TD#TEST{ font-size:9pt }

7.CSS의 주석

//한줄주석..
/*
여러줄 주석
*/

8. 가상클래스
가상클래스의 종류 : link, visited, hover, active

<HEAD>
    <STYLE TYPE="text/css">
        A:link{text-decoration:none; color:blue;}
        A:visited{text-decoration:none; color:yellow;}
        A:active{color:red;}
        A:hover{font-size:20pt; color:green;}
    </STYLE>
</HEAD>
<BODY>
    <A HREF=http://yahoo.co.kr>야후가기</a>
</BODY>

9. CSS의 속성들(글씨체관련)

* font-family : 글씨체의 종류를 설정하는 속성으로 <FONT FACE=...>속성을 가졌다.
* font-size : 글자의 크기(단위:px,pt,%)
* font-style: 글자의 모양(italic, oblique)
* font-weight: 글자의 두께
* font-variant:글자가 영문자일경우 크기가 작은 대문자로 나타나게 해준다. 속성값으로 normal과 small-caps가 있다. Normal은 아무변화도 주지않는 속성값이며 small-caps는 크기가 작은 대문자로 표시해준다.
* font : 위의 font속성들을 한번에 지정해 줄 때 사용한다.

<HEAD>
    <STYLE TYPE="text/css">
        P {font:italic small-caps bold 20pt /150% 굴림;}
    </STYLE>
</HEAD>
<BODY>
    <P ALIGN=CENTER>
        이번에는 CSS의 <br>
        font속성을 한번에<br>
        정의한 것이다.
    </P>
</BODY>

10. CSS의 속성들(텍스트관련)

* letter-spacing : 글자간 여백
* text-indent : 들여쓰기
* text-decoration : 글자에 여러가지효과를 주는 속성(none, underline, overline, line-through)
* text-align : 가로정렬위치지정(left, center, right, justify(양쪽))
* vertical-align : 인접한 박스에서 세로정렬을 설정(top, middle, bottom, baseline(기본값))
* text-transform : 문자의 모양을 전부 대문자 또는 전부 소문자로 변경시켜서 출력하는 역할

(uppercase,lowercase,capitalize,none)
* line-height : 줄간간격
* color : 글자색

<HEAD>
    <STYLE TYPE="text/css">
        .line130{line-height:130%;}
        .ucase{text-transform:uppercase;}
        .lcase{text-transform:lowercase;}
    </STYLE>
</HEAD>
<BODY>
    <P CLASS=line130>
        <font CLASS=ucase STYLE=letter-spacing:10px;>uppercase</font><br>
        <font CLASS=lcase STYLE=color:green;>LowerCASE</font><br>
        <P CLASS=text-align:center;>가운데정렬</P>
    </P>
</BODY>

11. CSS 관련속성들(박스배경속성)
* background-color : 배경색(특정색의 투명효과를 내려면 transparent)
* background-image : 박스의 배경이미지(url)
* background-repeat : 배경이미지의 반복설정
(repeat:타일모양, repeat-x:가로반복, repeat-y:세로반복, no-repeat:반복없음)
* background-attachment : 배경은 움직이지 않고 내용만 움직이도록 할때
* background-position : 배경이미지를 특정위치로 이동
* background : 배경에 관련된 속성을 한번에 설정

<HEAD>
    <STYLE TYPE="text/css">
      .bgimage{
          background-image: url(bg.jpg);
          background-position:200px 100px;
          background-repeat:no-repeat;
        }
    .yellow_bg{background-color:yellow;}
    .tablebg{
        background:url(bg2.jpg) no-repeat fixed #CCCCEE 100px 100px
    }
    </STYLE>
</HEAD>
<BODY CLASS=bgimage>
    <P CLASS=yellow_bg>해당박스의 배경색이<br>노란색으로 설정됩니다.</P>
    <table border=1 CLASS=tablebg>
        <tr>
            <td>
                배경관련 속성을<br>
                한번에 적용한예
            </td>
        </tr>
    </table>
</BODY>

12. CSS관련 속성들(리스트관련속성)
* list-style-type : 목록앞에 붙일 숫자나 기호
    - disc : 동그라미
    - circle : 가운데 비어있는 동그라미
    - square : 네모
    - decimal : 아라비아숫자
    - lower-roman : 로마소문자
    - upper-roman : 로마대문자
    - lower-alpha : 영어소문자
    - upper-alpha : 영어대문자
    - none : 없음
* list-style-image : 목록앞에 이미지를 붙임
    - url
* list-style-position : 목록기호의 붙이는 위치지정
    - outside
    - inside
* list-style : 한꺼번에 지정

<HEAD>
    <STYLE TYPE="text/css">
        .first{list-style-type:upper-alpha; list-style-position:outside;}
        .second{list-style-type:circle;list-style-position:inside;}
        .image{list-style-image:url(icon.gif);}
    </STYLE>
</HEAD>
<BODY>
    <ol class=first>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
    </ol>

13. CSS관련 속성들(텍스트박스, 버튼 등의 속성들)
* width, height : 크기변경
* border-위치-style : 경계선의 위쪽, 아래쪽, 왼쪽, 오른쪽의 모양을 각각 따로 변경할수 있는 속성이며 각각을 설정할 수 있는 속성 이름은(border-top-style, border-bottom-style, border-left-style, border-right-style)가 있다.
    - none : 기본값
    - hidden : 경계선 없음
    - solid : 실선
    - double : 두줄
    - ridge : 경계선이 밖으로 튀어나온듯한 모양
    - groove : 경계선이 안으로 들어간듯한 모양
    - outset : 경계선안의 내용이 밖으로 튀어나온듯한 모양
    - inset : 경계선안의 내용이 안으로 들어간듯한 모양
    - dashed : 경계선이 긴 점선으로 설정
    - dotted : 경계선이 짧은 점선
* border-style : 경계선과 관련한 스타일을 한번에 적용

* padding-위치 : 박스와 박스안의 내용과의 여백
* padding : 박스안의 여백크기를 한꺼번에 적용

* margin-위치 : 박스와 바깥쪽여백의 크기를 설정
* margin : 한꺼번에 설정

* border-위치-width : 경계선의 두께를 위치별로 설정
* border-width : 한꺼번에 설정

* border-위치-color : 경계선의 색깔을 위치별로 설정
* border-color : 한꺼번에 설정

* position : 개체의 위치를 조정
    - absolute : 브라우저상단 왼쪽에 절대적인 위치로 설정
    - relative : 개체바로 이전의 내용에서 부터 상대위치
    - fixed : 개체를 브라우저 창의 특정위치에 고정시켜 스크롤을 하더라도 위치가 이동되지 않음
    - static : 기본값

* top, bottom, left, right : position속성으로 위치의 타입을 설정하고 이 속성들로 실제 개체의 위치를 설정할 수 있음

<HEAD>
    <STYLE TYPE="text/css">
        DIV#layer1{
            position:absolute;background-color:yellow;    top:50px; left:30px; width:300px; height:150px;
        }
        DIV#layer2{
            position:absolute;background-color:silver;top:110px; left:80px; width:200px; height:110px;
        }
    </STYLE>
</HEAD>
<BODY>
    <DIV ID=layer1>aaaaaaa</DIV>
    <DIV ID=layer2>bbbbbbb</DIV>
</BODY>

* z-index : 레이어의 순서
* over-flow : 개체의 크기가 박스보다 클경우의 처리
    - visible
    - hidden
    - auto
    - scroll

* visibility : 화면에 보일지의 여부

14. CSS관련 속성들(테이블관련속성)

* border-collapse : 표의 외곽선과 셀간의 경계선사이의 여백
* caption-side : 제목의 위치설정
* empty-cell : 셀의 내용이 없을때 셀의 경계선을 표시할지의 여부를 설정
- show : 경계선보임
- hide : 경계선 감춤
* vertical-align : 세로정렬방식

**************간단한 샘플들 입니다.*******************

* 간단한 하이퍼링크 구현(샘플)

* 리스트페이지에 마우스 가져가면 색깔 변함(샘플)
<tr align="center" height="20" onMouseOver="this.style.backgroundColor='#ddeecc'" onMouseOut="this.style.backgroundColor='white'">
.
.
.
</tr>

(설명)
리스트가 뿌려질(루프를 돌면서 뿌려질)행의 시작 <tr> 태그에 위의 소스를 입력합니다.

***배경색 테두리 모두를 설정한 예시입니다...

또는 <HEAD>와 </HEAD>사이에...다음과 같이 코딩합니다.
샘플 CSS입니다..적절하게 변형해서..사용하세요..

* 일반적으로 많이 사용하는 폼개체 테두리설정(샘플)
<input type="text" name="id" style="border-style:groove;">

위에서 style="border-style:groove;" 부분입니다.
groove대신에 dotted 등 값이 다양합니다.

* 스크롤바(Body) 컬러모양 바꾸기 설정(샘플)
<style type="text/css">
    BODY
    {
    /*선색깔*/
    scrollbar-highlight-color:#D8b5C8;
    scrollbar-shadow-color:#D8b5C8;

    /*면색깔*/
    scrollbar-3dlight-color:#ffffff;
    scrollbar-face-color:#ffffff;
    scrollbar-darkshadow-color:#ffffff;

    scrollbar-arrow-color:#D8b5C8;
    scrollbar-track-color:#ffffff;
    }
</style>

* 배경이미지 고정하고 스크롤되는 스타일구현(샘플) 배경이미지를 고정하는 스타일시트입니다.

설명을 하자면 다음과 같습니다.

* 이미지 파일 경로 지정
background-image: url(경로);

* 이미지를 한번만 표시
background-repeat: no-repeat;

* 키워드를 이용한 이미지 위치 설정(left,center,right // top,middle,bottom)
background-position: right bottom;

* 마우스 스크롤에 상관없이 배경 이미지 고정
background-attachment: fixed

subject 리스트페이지의 리스트에 마우스올리면 색상바꾸기

**설명
리스트가 뿌려질(루프를 돌면서 뿌려질)행의 시작 <tr> 태그에 위의 소스를 입력합니다

[출처] [펌] 리스트페이지의 리스트에 마우스올리면 색상바꾸기|작성자 메멘토

추가메뉴 목록

엮인글 0

http://cat.hubweb.net/board_s1h4c2/481/c25/trackback

11	DIV와 CSS를 이용한 웹 표준코딩의 장점	2009.09.09
10	colgroup과 col의 설명	2009.09.09
9	테이블 크기에 맞게 영문 줄바꿈	2009.09.09
8	TextArea 박스 내부에 밑줄이미지 삽입	2009.09.09
7	이미지 위에 나타나는 툴바 없애기	2009.09.09
6	marquee/흐르는 뉴스텍스트 만들기	2009.09.09
5	다양한 테이블 형태(모양)	2009.09.09
>	Cascading Style Sheet	2009.09.09
3	메타태그	2009.09.09
2	회원가입 입력폼등에서 한글을 입력받아야 할 경우와 영문만 입력 받고 싶은 경우	2009.09.08
1	자동 완성 기능 사용하지 못하게 하는 방법 1	2009.09.08

< 1 2 3 4 5

엮인글 0

LOGIN