'css'에 해당되는 글 2건

  1. 2012.08.08 css 정리 <2>
  2. 2012.08.03 css 정리 <1>

css 정리 <2>

css
posted by changhozz 2012. 8. 8. 14:34

글꼴 꾸밈 관련 스타일 시트

 

속성 

값 

설명 

color 

색 이름, RGB값 

글자색 

font-family 

글꼴이름 

글꼴(글씨체) 

font-size 

절대값, 상대값, 길이, 퍼센트 

글자크기 

font-style 

normal, italic, oblique 

글자모양 

font-variant 

normal,small-caps 

작은 크기의 대문자로 지정하기 

font-weight 

normal,bold,bolder,lighter,100~900 

글자의 굵기 

 

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

텍스트관련 스타일 시트

 

속성 

값 

설명 

text-indent 

길이, 퍼센트 (ex) 3cm)

들여쓰기 

text-align 

left, right, center 

문자열 정렬 

line-height 

normal, 숫자, 길이, 퍼센트 

줄간격(행간격)
*행의 높이가 아님. 

vertical-align 

top,bottom,middle 

수직 정렬 

letter-spacing 

normal,auto, 길이 

문자 간격 

word-spacing 

normal, 길이 

단어 간격 

white-spacing 

normal,pre,nowrap 

빈칸 및 줄바꿈 처리 

text-decoration 

none, underline, overline, line-through, blink 

문자열 처리 

text-transform 

none,capitalize, uppercase,lowercase 

 문자열 대소문자 변경

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

배경 관련 스타일 시트

 

속성 

값 

설명 

background 

대표속성 

 

background-color 

색이름,RGB값,transparent 

배경색 지정 

background-image 

url,none 

배경이미지 경로/파일 지정 

background-repeat

repeat, repeat-x , repeat-y , no-repeat 

배경이미지의 반복여부,
반복방법 

background-attachment 

scroll,fixed 

 배경이미지의 스크롤 여부 

background-position

(퍼센트,길이), (top,center,bottom= 세로위치),
 (left,center,right = 가로위치)

배경이미지의 시작위치 설정 

1. 이 중 background-image / background-repeat 속성--------------------------------------------------------

배경에 이미지를 설정하려면 background-image속성을 사용하는데,
삽입할 이미지의 파일명을 기술하려면 url을 기술하여 지정한다.
문서는 물론이고 테이블이나 박스에도 이미지를 설정할 수 있다.

사용법,

selector{ background-image : url("경로") }

 

타일 효과를 주기 위해서는 background-repeat 속성을 사용하는데, 속성 값은 다음과 같다.

 

 

속성 값 

설명 

 no-repeat

배경이미지를 반복하지 않고 한번만 나타낸다. 

repeat-x 

배경이미지를 가로 방향으로 반복하여 나타낸다. 

repeat-y 

배경이미지를 세로 방향으로 반복하여 나타낸다. 

repeat 

배경이미지를 바둑판식 배열로 나타낸다. 

기본값은 repeat 임.

 

2. 이 중 background-position 속성-------------------------------------------------------

background-position 속성에 비율로 위치를 지정하거나 키워드로 설정할 수 있다.
특정 위치를 지정하지 않으면 기본적을 왼쪽 상단에 나타낸다.

사용법,

selector{ background-position : 속성값 }

 왼쪽 상단을 "0%0%"로 보고 오른쪽 하단을 "100%100%"으로 보고 원하는 위치에 계산하여
이미지를 나타낼 수 있다.    

 속성값

설명 

0%0% = left top 

왼쪽 상단에 배경이미지를 나타냄. 

100%100% = right bottom 

오른쪽 하단에 배경이미지를 나태냄 .

 50%50% = center center

문서 가운데에 배경 이미지를 나타냄. 

 

3. 이 중 background-attachment 속성 ------------------------------------------------------

스크롤을 이동하면 문서내의 내용들이 스크롤 된다. 일반적으로는 배경 이미지도 내용들과 함께
스크롤이 된다. 하지만 background-attachment 속성을 fixed로 지정하면 배경그림은 그대로 멈춰 있고
문서내의 내용들만 스크롤 된다. 기본적으로는 속성값이 scroll 지정되어 있으므로 다른 내용들과 함께
배경이미지가 스크롤되는 것이다.

사용법,

selector { background-attachment : 속성값 }

 

속성 값 

설명 

fixed 

배경이미지가 현재 위치에 고정되어 나타남. 

scroll 

배경이미지가 HTML 문서의 스크롤 크기에 따라
함께 스크롤 됨. 

 

4. 배경 스타일 한꺼번에 설정하기------------------------------------------------------------

배경에 관련된 속성을 한꺼번에 지정할 수 있다.  background 속성 다음에 적용하고자 하는 속성들에
대한 값들을 나열하면 된다.

body { color : white ; 
           background : black url("mulan2.gif") center no-repeat fixed; 
        }

 

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

목록 관련 스타일 시트

 

list-style 

대표 속성 

설명 

list-style-type 

disc, circle, square, decimal,
lower-roman, upper-roman,
lower-alpha, upper-alpha, none 

목록표시의 형태 

list-style-position 

inside,outside 

목록표시의 위치 

list-style-image 

URL,none 

 목록표시에 이미지를 사용할 수 있다. 

 

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

하이퍼링크 관련 스타일 시트

보통 우리가 홈페이지의 링크된 부분에 마우스를 가져다 대면 색이 바뀌면서 밑줄이 생기기도 하고
한번 클릭한 링크부분은 다른 색으로 달라지기도 한다. 이것을 사용하는 것이 <a> 태그이므로
앞에 a가 붙게 되고 그 다음 link는 아직 방문을 하지 않은 링크부분, visited는 한 번 이상 방문한 부분,
active는 마우스로 클릭하는 순간의 스타일을 지정해주는 것이다.
마지막으로 hover의 경우는 마우스를 링크위에 올려놨을 때의 스타일을 지정하는 것이다.

 

a 

설명 

a : link 

하이퍼링크에 대한 모든 설정 

a : visited 

방문한 적이 있는 링크 속성 설정 

a : active 

링크를 클릭하려는 순간의 속성 설정 

a : hover 

마우스가 링크 위에 올라가 있을 때 속성 설정. 

ex)

<html>
 <head>
  <STYLE TYPE = "text/css">
   a:link {text-decoration : none; color : green}
   a:visited{ text-decoration : none; color : blue}
   a:active{text-decoration : none; color : red}
   a:hover{ text-decoration : underline; color:purple}
  </STYLE>
 </head>
 <body>
  <h3>방문전 스타일 : <a href = "http://www.daum.net"> 다음 </a> <br>
    방문후 스타일 : <a href = "http://www.naver.com">네이버</a> <br>
    마우스 올린 스타일 : <a href = "http://www.yahoo.com">야후</a> <br>
  </h3>     
 </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

'css' 카테고리의 다른 글

css 정리 <1>  (0) 2012.08.03

css 정리 <1>

css
posted by changhozz 2012. 8. 3. 17:25

css ( cascading style sheets )

-----------------------------스타일 시트란.----------------------------------

HTML만으로 웹을 꾸밀때 많은 태그들을 쓰게 되는데, 태그들을 너무 남발하다보면,
복잡해지기 쉽다. 또한, 세부적으로 태그들을 지정해주기엔 비효율적이다.
태그들을 하나의 스타일로 설정한 후 이를 HTML문서에 적용함으로써 깔끔하게 문서를 작성할 있다.

스타일 시트로 가능한 작업은?

1.HTML 문서 내에 글자의 글꼴 종류, 크기 ,색, 여백 등을 지정한다.

2.글자의 정렬 방식을 결정하거나 글자에 그림자를 지정하는 등 다양한 효과를 줄 수 있다.

3.박스에 다양한 효과를 줄 수 있다.

4.사용자의 웹 브라우저 환경에 상관없이 일정한 화면을 보여줄 수 있다.

--------------------------스타일 시트의 기본 형식------------------------------

selector{ 속성 : 값 }  

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

스타일을 적용할 대상이 있어야 하는데 , selector가 바로 스타일 적용 대상이다.
주의할 점은 태그의 이름이 기존에 HTML에서 사용하고 있는 것이어야 한다.
예를 들면 'H1'은 스타일을 적용할 대상으로 적당하지만 'K1'은 HTML에서 사용하는
태그가 아니므로 스타일 적용 대상으로는 불가능하다.

속성

기본(디폴트)으로 설정된 스타일 중 변경하고자 하는 속성이다. 글자의 크기나 글자의 색상 등이
바로 이 속성에 해당된다. 이 속성에 변경하고자 하는 값을 지정하기 위해서는 콜론을
기술한 후 값을 설정한다. "속성 : 값"과 같이 한 쌍으로 기술한다.

ex) H1 { color : red } 

--------------------------------여러가지 속성 설정하기---------------------------------

속성에 값을 설정하기 위해서는 콜론을 사이에 두고 속성과 값을 한 쌍으로 기술한다.
태그에 여러 가지 속성을 지정하고 싶을 때에는 각 쌍들을 구분하기 위해 세미콜론(;)을
기술한다. 
★★★★★★★얘네는 값에 " " 이거 쓰지 않아!!★★★★★★★★★ 

ex)

selector { 속성1 : 값1; 속성2 : 값2; 속성N : 값N; }

P{ font-size : 18pt; font-family: 굴림; color : green ; }

-------------------------HTML 문서에 스타일 시트를 적용하는 방법 3가지----------------------

 

종류 

 설명

embedding (삽입)

<head> 태그에 스타일 설정을 삽입하는 형식. 

link 

외부 파일에 존재하는 스타일 시트 파일을 HTML에 삽입하는 형식. 

inline 

HTML 문서의 태그에서 직접 스타일을 설정하는 형시 

 

-----------------------<head> 태그에 스타일 설정하는 embedding 스타일----------------------

embedding 스타일은 <head> 태그에 스타일 설정을 삽입하는 형식이며, 스타일을 설정하기 위해서는
HTML문서의 <HEAD>태그에 <STYLE> 태그를 삽입한다.
<STYLE>과 </STYLE> 태그 사이에 스타일을 설정하는 내용을 기술한다.
이 때 주의 할 점은 TYPE속성에 "text/css"를 기술하여야 한다.

ex)

<haed>
<STYLE TYPE = "text/css">
selector { 속성1 : 값1; 속성2 : 값2; ...속성N  : 값N ;}
selector { 속성1 : 값1; 속성2 : 값2; ...속성N : 값N ;}
selector { 속성1 : 값1; 속성2 : 값2; ...속성N : 값N ;}
</STYLE>
</head>

<head> 태그에 <style> 태그를 삽입하여 스타일을 설정한 후 이를 <body>태그에서 적용한다.

ex)

<html>
 <head>
  <STYLE TYPE = "text/css">
  H1{font-family : 굴림체; color : #FFFFFF}
  H2{font-family : 궁서체; color : pink;}
  </STYLE>
 </head>
 <body bgcolor = "#400040">
   <center>
  <H1>스타일 시트 적용하기</H1>
  <br><hr>
  <H2> embedding 스타일</H2>
  <hr>
   </center>
 </body>
</html>

----------------외부 파일에 존재하는 스타일 시트 파일을 HTML에 삽입하는 link스타일.----------------------

여러 문서에서 동일한 스타일을 적용할 경우에는 매번 동일한 스타일을 적용할 필요 없이,
스타일 시트를 설정부분만 따로 파일로 작성하여 이를 HTML 문서에서 불러와 사용한다.

★★★★  스타일 시트를 설정하여 저장할 때에는 확장자를 "CSS"로 지정한다.★★★★
또한 따로 존재하는 파일을 HTML 문서에서 가져다 쓰기 위해서는 <LINK> 태그를 사용한다. 

사용법,

<link rel = "stylesheet" type="text/css" href = "경로">

ex)

파일명 ㅡ> css01-02.css
H1{ font-family : 굴림체; color : #FFFFFF }
H2{font-family : 궁서체; color : pink ;}

파일명 ㅡ>css01-02.html
<html>
    <head>
        <link rel = "stylesheet type" = type = "text/css" href = "css01-02.css">
    </head>
    <body bgcolor = "#400040">
        <center>
            <H1>스타일 시트 적용하기</H1><br><hr>
            <H2> LINK 스타일 </H2><hr>
        </center>
    </body>
</html>

------------------HTML 문서의 태그에서 직접 스타일 설정하는 inline 스타일-------------------

HTML 문서 내의 태그에 직접 스타일을 지정할 수 있는데, 이 방식을 인라인 방식이라 하며,
인라인 방식으로 스타일을 설정할 때에는 내용 전체를 이중 따옴표로 둘러쌓아서 기술한다.

사용법,

<html>
 <head>
 </head>
 <body bgcolor ="#400040">
  <center>
   <H1 STYLE = "font-family : 굴림체; color : #FFFFFF">
   스타일 시트 적용하기
   </H1>
   <br><hr>
   <H2 STYLE = "font-family : 궁서체 ; color  : pink;">
   inline 스타일
   <H2>
    <hr>
  </center>
 </body>
</html> 

 

----------------------------특정 부분에서만 스타일 적용하기--------------------------------

태그에 스타일을 설정하고 나면 그 태그가 사용된 문자열은 모두 동일한 스타일로 지정된다.
H1 태그의 color 속성을 하얀색으로 지정하면 H1태그가 사용된 모든 문자열의 색상이 하얀색으로
나타난다. 이때 모든 경우가 아니라 특정 부분에서만 선택적으로 스타일을 적용하기 원할 경우,
class나 ID속성을 이용하여 특정 태그에서만 스타일을 적용할 수 있다.

1. class로 속성 정의하기.-----------------------------------------------------------------

사용법,

<STYLE TYPE = "text/css">
.클래스이름 {속성1 : 속성값1; 속성2 : 속성값2; 속성N: 속성값N;}
★★★ 클래스 이름앞에 "." 이 중요 !!!★★★

ex)
<STYLE TYPE = "text/css">
.style1{ color : #FFFFFF }
.style2 { color : yellow; }
</STYLE>

이렇게 클래스 이름을 새롭게 설정하였으면 이를 HTML 문서에서 사용한다.
이를 사용하기 위해서는 태그를 기술한 후에 class라는 키워드 다음에 선택적으로 기술한다.

ex)
<H1 class = style1> 김창호 </H1><br>
<H2 class = style1> 김창호 </H2><br>
<H2 class = style2> 김창호 </H2><br>
<H3 class = style2> 김창호 </H3><br>

2.ID로 속성 정의하기----------------------------------------------------------------------

스타일을 정의한 후 이에 새로운 이름을 지정하는 것으로 , 이름을 지정할 때에는 #기호를
새로운 이름 앞에 기술한다.

사용법,

<STYLE TYPE = "text/css">
    #새로운속성{속성1 : 속성값1; 속성2 : 속성값2; 속성N : 속성값N;}
</STYLE> 

ex)
<STYLE TYPE = "text/css">
#type1{color : gold;}
#type2{color : silver;}
</STYLE>

스타일을 설정한 후 새로운 이름을 설정하였으면 이를 HTML 문서에 적용하기 위해서 태그를 기술한 후에
ID라는 키워드 다음에 선택적으로 기술하여 사용한다.
<H1 ID = type1> 여기는 황금색 </H1><br>
<H2 ID = type1> 여기도 황금색 </H2><br>
<H2 ID = type2> 이제는 은색 </H2><br>
<H3 ID = type2> 여기도 은색 </H2><br>

 

 

 

 

 

 

 

 

'css' 카테고리의 다른 글

css 정리 <2>  (0) 2012.08.08

티스토리툴바