태그 자료실

- CSS 박스 모델

CSS 에서는 각각의 요소에 생성된 사각형 영역을 '박스'라고 표현하고 네영역으로 구성된다.

•요소에 포함된 '내용'(content)
•내용과 보더 사이의 여백인 '패딩'(padding)
•테두리선을 표시하는 '보더'(border)
•보더와 다른 요소 사이의 여백인 '마진'(margin)

박스의 폭과 높이는 아래와 같이 계산

•박스의 폭 = 좌우의 마진 + 좌우의 테두리 + 좌우의 패딩 + 내부영역의 폭
•박스의 높이 = 상하의 마진 + 상하의 테두리 + 상하의 패딩 + 내부영역의 높이

- 마진(margin) 관련속성

•속성 : margin-top, margin-right, margin-bottom, margin-left
•값 : 길이, 퍼센트, auto, inherit
•기본값 : 0
•적용대상 : 모든 요소(표 내부요소제외)

p{
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}

또다른 방법은 마진값을 일괄 지정 할수가 있다. 값은 공백문자로 구분하여 복수지정할 수 있고 지정하는 값에 따라 적용대상이 달라진다.

•값이 한 개 : '상하좌우'
•값이 두 개 : '상하' '좌우'
•값이 세 개 : '상' '좌우' '하'
•값이 네 개 : '상' '우' '하' '좌'

p{
margin: 10px;
}
p{
margin: 10px 10px;
}
p{
margin: 10px 10px 10px;
}
p{
margin: 10px 10px 10px 10px;
}

마진과 블록 레벨 요소 중앙 정렬

블록 레벨 요소의 좌우마진 값에 'auto'를 지정하면 중앙 정렬 할수 있다.

/* div 중앙정렬 시키기 */
div#test1{
width: 700px;
margin-right: auto;
margin-left: auto;
}
div#test2{
width: 700px;
margin:0 auto;
}

- 패딩(padding) 관련속성

•속성 : padding-top, padding-right, padding-bottom, padding-left
•값 : 길이, 퍼센트, auto, inherit
•기본값 : 0
•적용대상 : 모든 요소(테이블 관련 요소 중 셀 요소 이외 제외)

p{
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

또다른 방법은 패딩값을 일괄 지정 할수가 있다. 값은 공백문자로 구분하여 복수지정할 수 있고 지정하는 값에 따라 적용대상이 달라진다.

•값이 한 개 : '상하좌우'
•값이 두 개 : '상하' '좌우'
•값이 세 개 : '상' '좌우' '하'
•값이 네 개 : '상' '우' '하' '좌'

p{
padding: 10px;
}
p{
padding: 10px 10px;
}
p{
padding: 10px 10px 10px;
}
p{
padding: 10px 10px 10px 10px;
}

	홈으로 \| 무료회원가입 \| 아이디/비번찾기 \| 즐겨찾기