CSS (Cascading Style Sheet) - 속성

앎/web 2014. 2. 17. 17:04 |

글꼴 색과 배경 관련 속성

 속성

 설명

 상속 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


글꼴 관련 속성

 속성

 설명 

 상속

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


텍스트 관현 속성

 속성

 설명

 상속

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


목록 관련 속성

 속성

 설명

 상속

 

 

 

 

 

 

 

 

 

 

 

 


바깥 여백 관련 속성

 속성

 설명

 상속

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


안쪽 여백 관련 속성

 속성

 설명 

 상속 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


테두리 관련 속성

 속성

 설명

 상속

 

 

 

 

 

 

 

 

 

 

 

 



'앎 > web' 카테고리의 다른 글

[Java Script] Event & Handler  (0) 2014.02.18
CSS (Cascading Style Sheet) - 레이어  (0) 2014.02.17
CSS (Cascading Style Sheet) - 기본  (0) 2014.02.14
HTML 기본 태그 - 폼 관련  (0) 2014.02.13
HTML 기본 태그 - 페이지 관련  (0) 2014.02.13
Posted by 후니아부지
:

블로그에 소스 코드 보기 좋게 넣기 (SyntaxHighlighter, 코드 구문 강조, 티스토리)

앎/et cetera 2014. 2. 16. 02:27 |

정리중........................ 


http://alexgorbatchev.com/SyntaxHighlighter/ 에서 다운로드


syntaxhighlighter_3.0.83.zip

  

압축 풀면 나오는 여러 폴더 중 scripts, styles 폴더의 파일을 업로드해야 한다. 


다음 위치에 scripts 폴더 내의 파일을 모두 업로드 한다. 

TISTORY 관리 -> 꾸미기 -> HTML/CSS 편집 -> 파일 업로드 


모두 올리지 않고 필요한 파일만 올려도 된다. 

단, shCore.js 는 반드시 필요하다. 

styles 폴더의 shCore.css 파일과 적용하고 싶은 테마 파일을 올린다. (여기서는 기본값을 적용) 


shCore****.css 라는 파일은 shCore.css 와 테마 파일을 합친 것이다. 

shCore.css , shTheme****.css 파일을 올리든지 아니면 shCore****.css 파일 하나를 올리면 된다. 


다음 위치로 이동한다. 

TISTORY 관리 -> 꾸미기 -> HTML/CSS 편집 -> HTML/CSS 


</head> 앞에 아래 내용을 써준다.

또는

그 다음 </body> 앞에 아래의 내용을 써준다.

저장하고 글을 작성해 본다.
작성시 HTML로 써야 한다.

<pre class=" brush: c"> /** * SyntaxHighlighter */ #include &amp;amp;lt;stdio.h&amp;amp;gt; int main(int _argc, char** _argv) { printf("코드 삽입 테스트\n"); return 0; } </pre>

확인해보면 아래와 같이 나타난다.

    
/**
 * SyntaxHighlighter
 */

#include <stdio.h>

int main(int _argc, char** _argv)
{
    printf("코드 삽입 테스트\n");
    return 0;
}



Hoya_TISTORY_SyntaxHighlighter_Code.txt

 



'앎 > et cetera' 카테고리의 다른 글

검색 사이트에 블로그 등록하기 - 빙(Bing)  (0) 2014.03.01
애드센스(AdSense) 광고 코드 삽입하기  (0) 2014.02.27
검색 사이트에 블로그 등록하기 - 구글(Google)  (0) 2014.02.25
주소를 영문으로 변환하기 (영문 주소)  (0) 2014.02.20
코드 삽입 테스트  (0) 2014.02.13
Posted by 후니아부지
:

CSS (Cascading Style Sheet) - 기본

앎/web 2014. 2. 14. 00:52 |

CSS (Cascading Style Sheet)


자주 사용하는 스타일을 미리 정해두고 특정 이름으로 스타일을 호출하여 사용한다.


문서와 디자인이 분리되므로 소스의 관리와 수정이 쉬워지며, 웹 페이지 로딩 속도가 빨라진다. 또한 웹 페이지 코드 작성 시간도 줄어드는 장점이 있다. 



스타일 시트는 인라인 스타일, 내부 스타일, 외부 스타일로 크게 3가지로 나눈다.


1. 인라인 스타일 시트

태그의 속성 값으로 스타일을 정의한다.


<태그 style="color:red; font-size:30px;"> 태그 내용 </태그>


style 이라는 속성값으로 스타일을 지정한다. 각 속성간 구분은 ; 으로 한다.




2. 내부 스타일 시트


head 태그 사이에 스타일을 정의한다.

관리가 편하다.

종류에는 태그 스타일, 클래스 스타일, 네임드 스타일이 있다.



태그 스타일

태그를 지정하여 해당 태그에 대해 동일한 속성을 설정할 수 있다.

다음과 같이 정의한다.

태그이름 { 속성: 속성값;

               속성: 속성값;

               ....

}


예를 들어, p라는 태그의 속성을 지정해보면 다음과 같다.


<head>

    <style type="text/css">

        <!--

            p {

                color : #0000ff;

                font-weight : bold;

            }

        -->

</head>


<body>

    <p align="center"> 테스트 </p>

</body>


이 때, body 내의 '테스트' 라는 문자열은 파란색에 두꺼운 속성으로 바뀐다.


특정 태그 안에 있는 태그의 속성을 지정하고자 하면, 아래와 같이 한다.


태그명 태그명 { 속성 : 속성값;


                      속성 : 속성값;


                       .....


}


예를 들어, div 태그 안에 h1 태그가 있을 때 h1 태그의 속성을 변경하려면 아래와 같이 사용한다.

div h1 { color : red;}


동시에 여러 종류의 태그 속성을 정의하려면 스타일 정의 시 여러 태그를 콤마(,)로 구분한다. 


h1, h2, h3 { 속성 : 속성값;}

 

클래스 스타일

태그 중 특정한 태그에만 다른 속성을 지정하거나 속성을 추가할 때 사용한다.


다음과 같이 정의한다.


.스타일이름 { 속성 : 속성값;


                   속성 : 속성값;


                    ....


}




스타일 이름 앞에 .은 정의할 때는 붙이지만 사용할 때는 붙이면 안된다.


<태그명 class="스타일이름" ...>




네임드 스타일

특정 범위를 지정하여 속성을 적용하고 싶을 때 사용한다.


다음과 같이 정의한다.


#스타일이름 { 속성 : 속성값;


                    속성 : 속성값;


                    ....


}




스타일 이름 앞에 #은 정의할 때는 붙이지만 사용할 때는 붙이면 안된다.


<태그명 id="스타일이름" ...>



3. 외부 스타일 시트

외부에 css 파일을 만들고 링크는 거는 형태로 사용한다.

<link rel="stylesheet" type="text/css" href="스타일파일.css" />






'앎 > web' 카테고리의 다른 글

CSS (Cascading Style Sheet) - 레이어  (0) 2014.02.17
CSS (Cascading Style Sheet) - 속성  (0) 2014.02.17
HTML 기본 태그 - 폼 관련  (0) 2014.02.13
HTML 기본 태그 - 페이지 관련  (0) 2014.02.13
HTML 기본 태그 - 표 관련  (0) 2014.02.13
Posted by 후니아부지
:


티스토리툴바