중요한 css 명령어, html 명령어

 

 


● 클래스 및 ID 스타일 기본 형식


.클래스 이름 { 속성:속성값; 속성:속성값; }

#ID이름 {속성:속성값; 속성:속성값; }


ex)

.top {color:red; font-weight:bold; top:10px; left:10px; margin:0px; }

#bottom { position:relative; font-family:바탕; }



● 주석 사용하기

<!-- 주석 사용하기 -->



● background

 

 


background-color : 배경 컬러

{ background-color:색상; }

ex) { background-color:#000; }

 

 


backgorund-image : 배경 이미지

{ backgorund-image:url("파일경로“); }

ex:) { backgorund-image:url("bg1.jpg“); }

 

 


background-repeat : 배경 이미지 반복

repeat : 브라우저 화면이 가득 찰 때까지 가로 세로 반복

repeat-x : 브라우저 창의 너비와 같아질 때 까지 가로 반복

repeat-y : 브라우저 창의 너비와 같아질 때 까지 세로 반복

no-repeat : 한 번만 표기하고 반복 없음

ex) { background-image:url("bg1.jpg"); background-repeat:repeat-x; }

 

 


background-attachment : 배경 이미지 고정

스크롤 해서 화면을 내려도 이미지는 이동하지 않고 브라우저의 특정 장소에 고정

ex)

{ background-image:url("bg1.jpg"); background-repeat:repeat-x;

 background-attachment:fixed; }

 

 


background-position : 배경 이미지 위치 정하기

백분율, 길이, top left center right, 값으로 위치를 정할 수 있음

ex) {background-position: 100px 200px;}

 

 


background : 위의 속성을 한번에 표기하기, 명령어 순서는 상관 없음

ex) {backgorund:url(bg1.jpg); center no-repeat fixed; }


 

 


● ol, li


순서 목록을 작성하는 태그

<ol type="속성값“ start="속성값">

type 속성값 : A(영문 대문자), a(영문 소문자), I(로마숫자 대문자), I(로마숫자 소문자)

start 속성값 : 번호의 시작번호. 3으로 하면 C 등으로 시작


ex) 소문자 b부터 항목이 표기

<ol type="b" start="2">

        <li>항목</li>

        <li>항목</li>

</ol>



● ul, li


순서 없는 목록을 작성하는 태그

<ul type="속성값“>

type 속성값 : disc - ● , circle - ○ , square - ■

 

 


ex) 항목 앞에 ■ 붙음

<ul type="square">

        <li>항목</li>

        <li>항목</li>

</ul>


 

 


● font

 

 


font-family : 글꼴 지정

ex) { font-family:굴림,symbol; }    - 한글은 굴림체, 수학기호는 symbol 체

 

 


font-size : 글자 크기

절대 크기,상대 크기, 길이값, 백분율 등이 있으나 길이값만 서술

ex) { font-size:12px; }    - 웹문서에서는 10px, 12px 가 가장 보기 좋음

 

 


font-style : 이탤릭체 지정하기

속성값 : italic , oblique

ex) { font-style:oblique; }

 

 


font-weight : 글자 굵게 하지

속성값 : nomal, bold, lighter, 100~900 (백단위)

400이 노멀에 해당, 700이 bold에 해당

ex) {font-weight:bold; }

 

 


line-height :  줄간격 지정

속성값 : nomal, 숫자, 길이값, 백분율

ex) {line-height:1.2; font-size:10px;}    - 글자 크기 10포인트에 곱한 값 12포인트가 줄간격이 됨

{line-height:150%; font-size:10px;}    - 글자 크기 10포인트에 곱한 값 15포인트가 줄간격이 됨

 

 


letter-spacing , word-spacing : 글자 간격, 단어 간격 지정하기

속성값 : nomal, 길이값

ex) { letter-spacing:3px; word-spacing:10px; }

 

 



● text

 

 


text-indent : 단락의 첫 글자 들여쓰기

속성값 : 길이값, 백분율

ex) { text-indent:3cm; }

 

 


text-align : 단락 정렬하기

속성값 : left, right, center, justify

ex) { text-align:center; }

 

 


text-decoration : 단락에 효과 주기

속성값 : none, underline, overline, line-througt, blink(깜빡거림, 넷스케이프, 파이어 폭스 지원)

ex) { text-decoration:underline; }



 

 

 

 

div

 

 

 

이하 설명은 css 파일을 작성해서 id 속성으로 당겨오는 것임.


● position : 원하는 위치에 배치하기


속성값

static : 한 요소씩 세로로 배치됨

relative : 해당 요소가 들어갈 부분을 기준으로 위치를 정함. div 태그가 html 상에 기록된 위치가 화면상 기준이 됨. 그 위치를 기준으로 재배치.

absolute : 가장 가까운 상위 요소의 위치를 기준으로 하는 것. 상위 요소가 없다면 브라우저 창의 가장 왼쪽 위 모서리를 기준으로 함.


ex)

{ position:absolue; left:20px; top:40px; } 브라우저 창 왼족 위에서 가로 20px, 세로 40px 지점에 위치함.



● float : 요소의 좌우 위치 지정하기


다른 요소들과 겹쳐서 표시할 수 있게 함.

속성값 : left, right, none


ex) 세가지 요소 한 행에 만들기

 

css 파일을 따로 작성 혹은 head 부분에 작성.

 

#menu {float:right;}

#side {float:left;}

#contents {left:200px;}

 

 

 

body 부분에 작성.

 

<div id="menu">

메뉴

</div>

<div id="side">

사이드 바

</div>

<div id="contents">

내용

</div>


 

● 박스 형태의 텍스트 단락



● margin : 바깥 여백 지정하기

margin-top, right, bottom, left : 위,오른,밑,왼쪽의 여백 지정

margin : 네방향의 여백을 한꺼번에 지정

 

ex)

{ margin-top:10px; }   - top이 10px가 됨

{ margin:3px 2px; }   - top, bottom 은 3px, left, right 는 2px

{ margin:3px 2px 5px; }   - top은 3px, right는 2px, bottom은 5px, left는 따로 지정을 안했으니 right와 같은 2px가 됨



● padding : 안쪽 여백 지정하기, magin과 지정 방식 동일

ex) { padding-top:10px; }



● border : 테두리 지정하기



boder-width : 테두리 두께 지정

속성값 :thin, medium, thick, 길이값

border-top-width : 위쪽 두께 지정. top 대신 right, bottom, left 올 수 있음

 

ex)

{border-top-width:1px; border-right-width:2px; border-bottom-width:3px; border-left-width:4px; }

{ border-width-width:3px; }   - 네방향 모두 3px

{ border-width:thin thick medium; }   - right 속성은 left 속성과 동일하게 적용



border-color : 테두리 색상 지정

속성값 : 색상,  transperant

border-top-color : 위쪽 지정. top 대신에 right, bottom, left 가 올 수 있음

border-width-color : 네방향을 한꺼번에 지정

 

ex) { border-width-color:#efefef #ffffff #000000; }   - right는 left와 동일



border-style : 테두리 스타일 지정하기

속성값

none : 테두리 없음, border-width를 0으로 인식

dotted : 점선으로 표시

dashed : 직선으로 된 점선으로 표시

solid : 실선으로 표시

double : 두줄짜리 실선으로 표시

groove : 홈이 파인 것처럼 입체적으로 표시

inset : 전체적으로 박스가 들어간 것처럼 표시

outset : 전체적으로 박스가 튀어나온 것처럼 표시


border-top-style : top 대신 right, bottom, left 올 수 있음

border-width-style : 네방향을 한꺼번에 지정



아래와 같이 응용할 수도 있음

ex) {border-bottom:1px dotted black; }   - 1픽셀의 검정색 점선으로 된 밑줄이 표시



● list-style : 목록 스타일 지정



list-style-type : 목록의 블릿 유형 지정하기

속성값

none, disc, circle, square, hiragana, katakana

decimal : 1로 시작하는 십진수

decimal-leading-zero : 0이 앞에 붙는 십진수. 01, 02, 03, 11 등

lower-roman : 로마숫자 소문자

upper-roman : 로마숫자 대문자

lower-greek : 그리스 문자

lower-alpha 또는 lower-latin : 알파벳 소문자

upper-alpha 또는 upper-latin : 알파벳 대문자

 

ex) {list-style-type:square;}



list-style-image : 불릿을 이미지로 바꾸기

ex) { list-style-image:url(image/list.jpg) }



● a 태그 꾸미기, 링크 꾸미기


#menu a:link{text-decoration:none; color:black; font-size:12px; }

#menu a:hover { text-decoration:underline; color:red; }

#menu a:active {color:red; text-decoration:dotted; }

#menu a:visited {text-decoration:none; color:black: font-size:12px; }

 

- 한번에 설정하기 (쉼표로 구분해주면 됨)

#menu a:link,

#menu a:hover,

#menu a:active,

#menu a:visited {text-decoration:none; color:black: font-size:12px; }

 


위 언어의 내용은 순서대로 아래와 같다.

텍스트 링크 꾸미기

텍스트 링크에 마우스를 올렸을 때

텍스트 링크를 클릭하는 순간의 상태 지정

방문했던 링크의 상태


위와 같이 css 파일을 만들었을 때 레이아웃 파일에서는 아래와 같이 사용

그러면 ul 태그 안에 있는 링크 메뉴에 적용됨.


<ul id="menu">

<li><a href="_________">메뉴 1</a></li>

</ul>

댓글을 달아 주세요

  1.  댓글주소  수정/삭제  댓글쓰기 timberland 2012.12.25 16:52 신고

    Mohamed Bouazizi, le jeune Tunisien, dont l'immolation par le feu le 17 décembre à Sidi Bouzid a déclenché une révolte contre le ch?mage, http://www.timberlandbaratas.com Timberland Online, a été inhumé mercredi dans un climat de tension, http://www.timberlandbaratas.com timberland niños, après avoir succombé à ses blessures la veille dans un h, http://www.timberlandbaratas.com botas timberland?pital de Tunis, http://www.timberlandbaratas.com zapatos timberland.Entre tristesse et colère, une foule estimée à 5.000 personnes a marché derrière son cortège funèbre en criant vengeance et sa colère contre la cherté de la vie, jusqu'au cimetière.Le geste de Mohamed Bouazizi a été l'origine de manifestations à Sidi Bouzid puis dans d'autres villes, dont Tunis. Les protestations ont dégénéré en heurts avec les policiers, faisant au moins un mort. Depuis une semaine, http://www.timberlandbaratas.com barato timberland, un calme précaire est revenu. Mercredi soir, à Sidi Bouzid, http://www.timberlandbaratas.com timberland, les autorités ont coupé l'électricité pour prévenir un suicide collectif, celui d'une femme et ses trois enfants, selon des syndicalistes témoins. Ces incidents co?ncidaient avec les funérailles de Mohamed Bouaziz.Related articles:


    http://werebear.tistory.com/103 Les autorités sanitaires de Lituanie ont annoncé jeudi deux premiers décès dans le pays suite à

    http://bbulzzum.com/944 Each of the following elements have been accurately programmed into Cessna simulator software to giv