안드로이드는 전자양의 꿈을 꾸는가

CSS 박스 모델의 이해

웹접근성과 웹표준 2013. 7. 20. 01:30

박스 모델

1. 박스 모델의 구성

2. 렌더링 모델에 따른 박스 모델

3. margin과 padding 값 지정 방법

(margin:5px;)

모든 방향에 동일한 값 지정

(margin:5px 3px;)

위쪽과 아래쪽은 첫번째값(5px), 왼쪽과 오른쪽은 두번째값(3px)으로 지정

(margin:5px3px 1px;)

위쪽은 첫번째 값(5px), 왼쪽과 오른쪽은 두번째 값(3px), 아래쪽은 세번째 값(1px)으로 지정

(margin:5px 3px 1px 0;)

위, 오른쪽, 아래, 왼쪽 순으로 값 지정

4. margin 겹침 현상

위아래로 배치된 두 개 요소의 위쪽 margin과 아래쪽 margin이 겹칠 경우 두 개의 margin 중 큰 값이 적용된다.

5. 요소를 영역의 가운데로 정렬

- margin 프로퍼티의 auto 값을 이용

- width를 사용한 요소에 사용 (margin: 0 auto;)

- 요소안의 컨텐츠 정렬은 text-align을 사용

6. 박스 크기 변환

- 따로 지정하지 않으면 너비는 뷰포트에 꽉 차게, 높이는 모든 데이터를 담을 수 있는 최소한의 높이로 자동 생성

- 가로와 세로 길이지정을 위해 width, height 속성 사용

- height로 세로길이가 고정된 박스에 생긴 overflow 문제를 overflow와 clip 속성으로 조정

7. overflow 속성

- overflow 되는 콘텐츠의 처리방법 결정

- 기본적으로는 상속되지 않음

auto : autooverflow시 브라우저에 스크롤바 생성

hidden : 콘테이너 밖으로 나간 콘텐츠는 사용자에게 보이지 않음. (스크롤바 생성되지 않음)

scroll : 콘테이너 밖으로 콘텐츠가 표시되지 않음 (스크롤바 생성)

visible : 콘텐츠가 콘테이너 밖으로 표시됨 (기본값)

<p> We offer the following toppings on our pizzas: </p>

<p class="top"> pepperoni, sausage, ham, bacon, hamburger, green pepper, onion, black olives, pineapple. </p>

p.top{width:100px; height:100px; overflow:auto;}

예제) overflow 예제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HEAD>

<TITLE> New Document </TITLE>

p, div {

border: 1px solid red;

width: 400px; }

.top {height:100px; overflow:scroll;}

</style>

</HEAD>

<BODY>

<p>무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. </p>

<div>채송화 꽃도 피었습니다.</div>

<p class="top">무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. 무궁화 꽃이 피었습니다. </p>

</BODY>

</HTML>

예제) margin 예제

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

html, body, p, h1, h2, h3, h4 {

padding: 0;

margin: 0;

}

body {

font-family: 'Nanum Gothic', serif;

color: rgb(102, 102, 102);

font-style: normal;

font-size: 12px;

line-height: 20px;

}

h2 {

padding: 15px 0 0;

font-size: 20px;

color: #2d5c88;

line-height: 40px;

}

.news {

margin: 20px 0 30px;

}

#wrap {

padding: 20px;

width: 600px;

background-color : #fff;

}

</style>

</head>

<body>

<h1>미래웹기술연구소</h1>

<h3><span>2012년 7월 10일</span> [보도자료] 미래웹기술연구소 Sencha 공식 트레이닝 파트너쉽 체결</h3>

<p class="newsBy">BY 미래웹기술연구소<p>

</div>

<p>2012년 7월 11일 서울, 대한민국 – HTML5 개발 및 솔루션 공급 전문업체 미래웹기술연구소(주)는

미국 Sencha Inc. 사와 공식 트레이닝 파트너쉽을 체결하였다고 발표하였다.

이로서 미래웹기술연구소는 한국에서 Sencha Touch와 ExtJS 관련된 ...</p>

</div>

<h3><span>2012년 5월 10일</span> [보도자료]HTML5 전문회사 미래웹기술연구소 W3C에 가입!</h3>

<p class="newsBy">BY 미래웹기술연구소 </p>

</div>

<p>[서울, 대한민국 - 2012, 5, 10] 미래웹기술연구소 (http://w3labs.kr , 대표이사 조만영)는

웹표준화 국제기구인 W3C에 회원사로 가입하였다고 발표했다.

국내에서 민간기업으로는 삼성전자, 엘지전자, SKT, 인프라웨어 만이 W3C 회원사로 참여하고 ...</p>

</div>

<h3><span>2012년 4월 27일</span> HTML5 웹소켓 솔루션 글로벌 리더 Kaazing 한국 진출</h3>

<p class="newsBy">BY 미래웹기술연구소</p>

</div>

<p>카징 사의 한국 진출 카징 사가 미래웹기술연구소와 손잡고 한국 시장에 엔터프라이즈 급 HTML5 웹소켓 플랫폼을 공급한다.

대한민국 서울 – 2012년 4월 26일 – 카징 사는 오늘 미래웹기술연구소와 파트너십 협약을 맺고 ...</p>

</div>

<span>주소</span> : 서울시 강남구 논현동 220번지 우연빌딩 5층

</div>

</body>

</html>

저작자표시

'웹접근성과 웹표준' 카테고리의 다른 글

테이블(TABLE)의 웹 접근성 요소 (0)	2013.07.21
배경: 백그라운드 (background) (0)	2013.07.20
CSS 규칙과 선택자 (0)	2013.07.20
HTML 코딩 복습: 헤딩<h1>, 목록<ul><ol><li> (0)	2013.07.20
웹표준, HTML/CSS에 관한 유용한 사이트 (0)	2013.07.20