만두야닷컴

padding

웹표준/CSS2011. 5. 28. 13:03

padding:A;
 - 상 하 좌 우 모두 a 값으로 패딩 적용
padding:TB RL;
 - 상하, 좌우 각각의 값이 같을 경우 사용
padding:T RL B;
 - 좌우 값이 같고 상하가 다를때 사용
padding:T R B L;
 - 상 우 하 좌

'웹표준/CSS' 카테고리의 다른 글

padding  (0) 2011.05.28
display,float,clear  (0) 2011.05.28
css 에서 id ,class  (1) 2011.05.27
display:inline; display:block;  (0) 2011.05.27
ul  (0) 2011.05.27
웹표준  (0) 2011.05.18

Comment +0


display:inline 이나 <span>  은  inline 속성을 가지고 있고 inline 의 특성상 left 정렬이 된다.

block 속성은 한줄씩 출력된다

block의 정렬은 float 으로 정렬 (가운데 정렬 margin:0 auto) // width 값 설정
inline은 text-align 으로 졍렬

float 속성
none,left,right

float 해준 후에 해당 정렬을 초기화 하기위해서
clear 해준다

clear 속성
left - 왼쪽 정렬 초기화 ,right - 오른쪽 정렬 초기화,both -모든 정렬 초기화

'웹표준/CSS' 카테고리의 다른 글

padding  (0) 2011.05.28
display,float,clear  (0) 2011.05.28
css 에서 id ,class  (1) 2011.05.27
display:inline; display:block;  (0) 2011.05.27
ul  (0) 2011.05.27
웹표준  (0) 2011.05.18

Comment +0


id 는 # 으로 사용
class . 으로 사용

<div id="css_id"></div>
<div class="css_class"></div>


일겅우
<style type="text/css">
# css_id{
css_id 에 대한 속성
}
.css_class{
css_class 에 대한 속성
}
</style>

'웹표준/CSS' 카테고리의 다른 글

padding  (0) 2011.05.28
display,float,clear  (0) 2011.05.28
css 에서 id ,class  (1) 2011.05.27
display:inline; display:block;  (0) 2011.05.27
ul  (0) 2011.05.27
웹표준  (0) 2011.05.18

Comment +1


<div>1</div>
<div>2</div>
<div>3</div>

-------------
1
2
3
--------------
div 의 경우 display 기본속성이 block


<span>1</span>
<span>2</span>
<span>3</span>

---------------
123
---------------
span 의 경우 display 기본속성이 inline

block 은 줄 바꿈
inline 은 줄바꿈 안됨
inline의 경우 상하 padding , width,height는 사용 불가

'웹표준/CSS' 카테고리의 다른 글

padding  (0) 2011.05.28
display,float,clear  (0) 2011.05.28
css 에서 id ,class  (1) 2011.05.27
display:inline; display:block;  (0) 2011.05.27
ul  (0) 2011.05.27
웹표준  (0) 2011.05.18

Comment +0

ul

웹표준/CSS2011. 5. 27. 01:37

ul{
list-style:none; //불릿 표시 없애기
padding-left:0; // 왼쪽 여백 0으로 만들기
margin:0; //익플에서 padding이 안먹히면 마진값 을 0으로  // dtd 설정 해주면 필요 없음
}

익플 일때 margin:0; 일경우 패딩값이나 불릿을 자동으로 없애버림 // dtd 설정 해주면 필요 없음
파폭 일경우는 해당 값이 다 들어가야 원하는 모양대로 출력
padding: 0 0 10px 0; 패딩 값의 경우 앞에서 부터 순서대로 위 오른쪽 아래 왼쪽 이 된다.
0이상일 경우 무조건 px 을 쓰는 습관!!
padding:0 10px; 일경우 위 아래는 0 좌우는 10px
padding:10px;  위 오른쪽 아래 왼쪽 모두 10px 씩
===============================================================

ul{
list-style-image:url(이미지 주소); //불릿을 이미지로 바꾸기
}


li {
    background:url(이미지 주소) no-repeat 0 50 % // li 배경 이미지 넣기, 왼쪽에서 0 위쪽으로부터 50% 위치
}


'웹표준/CSS' 카테고리의 다른 글

padding  (0) 2011.05.28
display,float,clear  (0) 2011.05.28
css 에서 id ,class  (1) 2011.05.27
display:inline; display:block;  (0) 2011.05.27
ul  (0) 2011.05.27
웹표준  (0) 2011.05.18

Comment +0

웹표준

웹표준/CSS2011. 5. 18. 10:18



허세질 작렬 - 책 사면 인증샷은 찍어 줘야지

'웹표준/CSS' 카테고리의 다른 글

padding  (0) 2011.05.28
display,float,clear  (0) 2011.05.28
css 에서 id ,class  (1) 2011.05.27
display:inline; display:block;  (0) 2011.05.27
ul  (0) 2011.05.27
웹표준  (0) 2011.05.18

Comment +0