[Tistory] 2. 주로쓰는 CSS 명령어 모음 - 1

노려라 Tistory!!를
작성하겠다고 한지 꾀지나 버렸습니다.

공증이 아닌 일은 우선순위가 쉽게 밀려버려서
정말 말씀드리기가 그지 없지만
혹시 만약 기다리셨던 분들에게는
죄송하다는 말씀을 드리며

자 이번 포스팅은
주로쓰는 CSS 명령어에대한 기본모음 입니다.
티스토리 스킨을 쉽고 편하고 재미있게 만들려면
CSS를 사용하실수 있어야 합니다.

재미있는 CSS 명령어도 많지만
지금부터 작성하는 것은 가장 주로쓰이고
가장 기본적인것만 골라 간략이 작성했습니다.

덤으 저번에 소개했던 CSS 명령어도
포함해서 다시 소개하도록 하겠습니다.

[선택자]
먼저 선택자에 관한 설명입니다. 

html {}
body {}

이 2문구는 CSS를 적용한
전채 스크립트의 최상단에 먹이는
옵션같은 문구 입니다.

중괄호 안에 CSS 코드를 삽입해 주시면
전체적으로 옵션이 들어갑니다.
참고로 html{}은 IE6에서 작동이 안됩니다.

#name {}
.name {}

여기 2가지의 선택자가 있습니다.
전자는 #이 붙어서 ID라 하며
후자는 .이 붙어서 class라고 합니다.

이용상에 큰차이는 없으나
ID는 고유한것이고
class는 여러종류에 걸칩니다.

무슨 이야긴가 하면
ID를 쓰게 되면 그아이가 적힌 대상만 적용되는 반면
class는 그 이름이 들어간 모든것에 영향을 미칩니다.
자세한 설명을 하기엔 너무 복잡할수 있으니
기회가 되면 그때가서 설명하며

class와 id는 동시에 가실수 있으며
우선순위는 id가 더 높음을 먼저 알려드립니다.

[출력/정돈 엘레먼트]
지금부턴 출력과 정돈에 사용되는
인자에 관하여 설명 드리겠습니다.

#test {display: (인자);}
/* inline, block, inline-block, none */

display는 출력 형태를 담당 합니다.

inline: 대상을 인라인 박스로 만듭니다.
- 특징 -
- 줄바꿈되지 않고, 자동 left 정렬
- margin, padding, width, height 사용불가
- <span> 태그는 기본 inline 속성 이지만
float을 줄경우 margin, padding, width, height 사용가능

block: 대상을 블록 박스로 만듭니다.
- 특징 -
- 자동 줄바꿈
- margin, padding, width, height 사용가능
- margin: 0 auto;로 중앙정렬 가능

inline-block: 블록박스로 만들어지지만
인라인 박스처럼 작동
- 특징 -
- margin, padding, width, height 을 쓰면서도
태그와의 상호작용은 inline처럼 작동

none: 대상을 출력하지 않습니다.
- 특징 -
주로 가리기 할때 씁니다.

#test {clear: both;}

clear는 전방향에 걸린 float속성을 해제 시킵니다.
(float 바로 아래서 소개)

#test {float: (인자);}
/* left, right, none */

float은 대상을 정렬 하는데 사용됩니다.
- 특징 -
left: 왼쪽으로 정렬합니다.
right: 오른쪽으로 정렬합니다.
none: 정렬하지 않습니다.

#test {position: (인자);}
/* static relative absolute fixed */

postion은 대상의 정렬기준을 정하는데 사용됩니다.
 - 특징 -
static: default값으로 일반적 표시흐름 입니다.
상단과 자측에서 거리를 지정할 수 없습니다.
relative: static과 비슷 하게 일반적 흐름 표시이지만
상단과 자측에서 거리를 지정할 수 있으며
가장 보편적으로 사용 됩니다.
absolute: 자신의 상속 개로부터의 절대 위치입니다.
absolute가 지정한 위치는 변함 없이 그곳에 있으며
이는 위치를 지정해서 사용하실 수 있습니다.
fixed: 고정 적으로 이용 한다인데
absolute와 비슷하면서도 다릅니다.

이것은 브라우저의 위치에 고정이 된다는 말로
스크롤이 일어나도 항상 그곳에 있습니다.

종전의 IE(특히 IE6)는 버그로
인해서 인지 작동이 안되었지만
현재의 IE는 작동합니다.

단 최근 안드로이드에서 실험결과
안드로이드는 fixed가 작동하지 않습니다.

[크기/이동/정렬 엘레먼트]
지금부턴 크기와 이동, 정렬에 사용되는
인자에관하여 설명드리겠습니다.

#test{margin: 100px auto};
/* 상 좌 하 우 */

margin는 외부여백입니다.
- 특징 -
인자는 4개까지 들어가며
각각 상 좌 하 우의 px값이 들어갑니다.

참고로 위에 100px auto는
대상을 가운대 정렬해주는
기능을 가지고 있습니다.

#test {padding: 30px 70px 20px}
/* 상 좌 하 우 */

padding은 내부 여백입니다.
- 특징 -
margin과 똑같이 인자는 4개까지 들어가며
각각 상 좌 하 우의 px값이 들어갑니다.

참고로 padding은 중앙정렬 기능 없습니다.

추가사항: margin, padding속성의
인자를 하나 혹은 두개만 입력하시면
하나 입력한경우는 전체가 그속성으로
둘만 입력한경우 상하 좌우가 대칭으로
속성이 적용됩니다.

#test {
	left: 30%;
	right: 30%;
	top: 50px;
	bottom: 150px;
}

위의 4가지 속성은
각각 그방향으로 부터
대상을 인자만큼 이동시킵니다.

주로 특정 비율만큼 이동이나
혹은 중앙정렬을 위해서 사용됩니다.

#test {width: 100px; height: 100px;}
/* %도 가능 */

이 속성들은 각각
가로 세로의 크기지정 입니다.
인자로 %도 전달이 가능한대
주로 가변을 위해서 100% 인자를
자주 씁니다.

다만 이 100% 인자를 세로에 쓰실때
주의 하셔야 할점이 있다면

100%는 정해진 공간에서만
세로로 100% 출력이 됩니다.

즉 외부에 다른 매체가 세로가 500px이고
그안에 다른 매체를 만들어 세로 를 100% 주셨다면
500px만큼 세로가 늘어나지만

만약 body안 에서 세로를 100% 주면
표시가 안되거나 약 100px 미만정도의
세로모습만을 보여줍니다.

팁: 이런세로를 100%를 주시려면
다음 세가지 경우중 하나에 가능합니다.

1. 세로가 정해진것의 안에 있을경우
2. 비 웹표준(웹표준 犬무시)
3. position: absolute상황

이번 포스팅에선
선택자와 출력, 정돈, 정렬, 크기, 이동
엘레먼트와 그 인자에 관해 알아 보았습니다.

다음 포스팅 때는 나머지
기본적 CSS에 관해 소개후
그다음 포스팅은

스킨 치환자를 설명해
드리도록 하겠습니다.