고정 헤더 영역
상세 컨텐츠
본문
4장. 블록 레벨 요소를 위한 포맷 프로퍼티
이 장에서는 블록 레벨 요소에 대한 포맷팅 옵션에 대해 설명한
다. 블록 레벨 요소는 새로운 행에서 시작되는 것을 가리키는
것으로, 예를 들어, <H1>이나 <P>은 블록 레벨 요소이고,
<EM>은 아니다.
블록 레벨 요소의 포매팅 방법은 여러 가지인데, 우선, 각 포매
팅 요소에 대해 자세히 설명하고, 블록 레벨 요소를 포매팅하는
데 사용한 프로퍼티의 동작 상속에 대한 개요를 살펴본다.
4.1 블록 레벨 포매팅 개요와 예제
스타일 시트는 블록 레벨 요소 각각이 상자로 둘러싸여 있는 것
처럼 처리한다. 각 상자는 여백과 테두리, 안여백 등 형식 스
타일 특성을 가질 수 있고, 배경 이미지나 색상을 가질 수도 있다.
여백은 웹 문서(혹은 부모 요소) 모서리에서 상자 모서리 간의
공간을 가리킨다. 각 상자는 평면이나 3차원 형태의 테두리를
가질 수도 있고, 안여백은 각 요소 테두리와 요소 컨텐트간의
거리를 가리킨다.
또한 특정 값을 사용하던지, 아니면 문서(혹은 부모 요소) 폭에
대한 백분율을 사용해서 블록 레벨 요소의 폭을 설정할 수 있다. 왼쪽 여백과 오른쪽 여백을 사용하여 폭을 설정할 수도 있다.
폭이나 양쪽 여백을 특정 값으로 설정할 경우, 왼쪽 여백값이
가장 우선한다. 이 경우, 오른쪽 여백값은 오른쪽 모서리로부터
컨텐트를 포괄할 수 있는 위치까지의 최대 거리를 가리키게 된다.
폭에 대한 설정값으로 인해 요소가 오른쪽 여백까지 넘치게 될 경우,
폭 값은 무시된다. 폭 값으로 인해 요소가 오른쪽 여백까지 넘치지
않을 경우에만 폭 값이 사용된다.
float 프로퍼티(CSS 구문)나, align 프로퍼티(자바스크립트 구문)을
설정하여 요소를 왼쪽이나 오른쪽, 혹은 가운데로 정렬할 수 있다.
마찬가지로, 왼쪽이나 오른쪽 여백을 설정하여 정렬할 수도 있다.
다음은 여백과 안여백, 테두리 폭, 배경색, 폭 및 정렬 프로퍼티를 사용한 예제이다.
========
CSS 구문
========
<STYLE TYPE="text/css">
P {
background-color:#CCCCFF;
/* 여백 */
margin-left:20%; margin-right:20%;
/* 테두리 폭 */
border-top-width:10pt; border-bottom-width:10pt;
border-right-width:5pt; border-left-width:5pt; /* 테두리 스타일과 색상 */
border-style:outset; border-color:blue;
/* 안여백 */
padding-top:10pt; padding-bottom:10pt;
padding-right:20pt; padding-left:20pt;
}
H3 {
/* 폰트 크기와 두께 */
font-size:14pt;
font-weight:bold;
/*background-image: URL{"\guide\images\aspincl.gif");*/
/* 폭의 90%만큼의 제목을 가운데 배치한다.*/
width:90%; float:center;
border-color:green;
border-style:solid;
/* 테두리의 네 모서리의 두께를 모두 똑같게 */
border-width:10pt;
/* 네 모서리의 안여백을 모두 똑같게 */
padding:20pt;
}
</STYLE>
===============
자바스크립트 구문
===============
<STYLE TYPE = "text/javascript">
with (tags.P) {
backgroundColor="#CCCCFF";
/* P 테두리 스타일과 색상 */
borderStyle="outset"; borderColor="blue";
/* P 보더 폭 */
borderTopWidth="10pt"; borderBottomWidth="10pt";
borderLeftWidth="5pt"; borderRightWidth="5pt";
/* P 안여백 */
paddingTop="10pt"; paddingBottom="10pt";
paddingLeft="20pt"; paddingRight="20pt";
/* P 여백 */
marginLeft="20%"; marginRights="20%";
}
with (tags.H3) {
/*backgroundImage="images/grenlite.gif";*/
/* 폰트 크기와 두께 */
fontSize="14pt"; fontWeight="bold";
/* H3 테두리 스타일과 색상 */
borderStyle="solid"; borderColor="green";
/* 폭의 90%가 되게 제목을 가운데 배치*/
width=90%; align="center";
/* 테두리의 모든 모서리가 같은 두께가 되게 */
borderWidths("10pt");
/* 모든 모서리의 안여백이 같게 */
paddings("20pt");
}
================
스타일 시트 사용례
================
<H3>H3 with a Solid Border</H3>
<P>Borders have their uses in everyday life. For example,
borders round a paragraph make the paragraph stand out more
than it otherwise would.
</P>
<P>This is another paragraph with a border. You have to be
careful not to make the borders too wide, or else they startto take over the page.
</P>
결과 : 제목 및 두 개의 문단이 테두리로 둘러싸여 나타나는데,
제목은 초록색 테두리로, 두 개의 문단은 파란색 테두리로
디스플레이된다.
(http://developer.netscape.com/one/dynhtml/index.html 참고)
4.2 여백 및 폭 설정하기
여백이란 문서(혹은 부모 요소)의 모서리에서 요소 삽입까지의
거리를 가리키는 것으로, 좌우 여백과 상하 여백을 설정할 수
있다. 부모 요소가 안여백이나 테두리, 혹은 여백 같은프로퍼티를 가지고 있을 경우, 부모의 "모서리"는 이런 것들을
에워싸는 이론상의 사각형이 된다.
다음과 같은 프로퍼티를 지정하면 블록 레벨 요소에 대한
여백을 설정할 수 있다:
· margin-top/marginTop
· margin-bottom/marginBottom
· margin-left/marginLeft
· margin-right/marginRight
· CSS 구문에서는 margin 프로퍼티를 설정하여, 그리고
자바스크립트 구문에서는 margins() 함수를 사용하여, 네가지
프로퍼티를 모두 같은 값으로 한꺼번에 설정할 수 있다.
요소를 왼쪽이나 오른쪽, 혹은 중앙으로 수평 정렬할 수 있다.
CSS 구문에서는 float 프로퍼티를 설정하여, 자바스크립트
구문에서는 align 프로터를 설정하면 된다. 좌우 여백을
설정하여 요소를 정렬할 수도 있다.
특정 여백값을 설정하는대신, width 프로퍼티를 설정할 수도
있다. (200pt 같이) 특정값을 사용하거나 (60% 같이) 요소나
문서를 포함할 수 있는 백분율을 사용하여 설정하면 된다.
원한다면 폭과 함께 왼쪽이나 오른쪽 여백을 같이 설정할 수도
있는데, 부모 요소의 폭을 100%로 했을 때 이를 초과하지 않는
범위내에서 설정할 수 있다. 그러나, 폭과 양쪽 여백을 모두
설정하면, 두 개의 값이 나머지 하나의 값을 포함하고 있기
때문에, 이런 방법은 좋지 않다. (예를 들어, 왼쪽 여백이
25%이고, 폭이 60%라면 오른쪽 여백은 15%여야 한다.)
인접해 있는 둘 이상의 여백(즉, 인접한 여백 사이에 테두리나
안여백, 혹은 컨텐트가 없는 상태)은 최대 여백값을 사용할 수
있도록 합해져 버린다. 음수의 여백값의 경우에는, 인접한
양수의 여백값 중 최대값에서 음수 여백값의 절대값 중
최대값을 빼게 된다.
문서에서 기본 여백값을 설정하기 위해 <BODY> 태그에 대해
여백 프로터티를 지정할 수 있다. 예를 들어, 아래 코드는
왼쪽과 오른쪽 여백을 20pt로 설정한 것이다.
========
CSS 구문
========
<STYLE TYPE="text/css">
BODY {margin-left:20pt; margin-right:20pt;}
</STYLE>
===============
자바스크립트 구문
===============
<STYLE TYPE = "text/javascript">
with (tags.BODY){
marginLeft="20pt"; marginRight="20pt";
}
</STYLE>
4.3 테두리 폭과 색상, 스타일 설정하기
다음과 같은 프로퍼티를 설정하면 블록 레벨 요소를 둘러싸는
테두리의 폭을 설정할 수 있다:
· border-top-width/borderTopWidth
· border-bottom-width/borderBottomWidth
· border-left-width/borderLeftWidth
· border-right-width/borderRightWidth
· CSS 구문에서는 border-width 프로퍼티를, 자바스크립트
구문에서는 borderWidths() 함수를 사용하면 네 가지프로퍼티를 한꺼번에 모두 같은 값으로 설정할 수 있다.
border-style(CSS 구문)이나 borderStyle(자바스크립트 구문)
프로퍼티를 지정하면 테두리의 스타일을 설정할 수 있다.
테두리 스타일을 solid나 double로 설정하면 테두리를 평면으로
만들 수 있고, groove나 ridge, inse, outset으로 설정하면 3차원
형태를 만들 수 있다.
border-color(CSS 구문)나 borderColor(자바스크립트 구문)
프로퍼티를 지정하면 테두리의 색상을 설정할 수 있다.
4.4 안여백 설정하기
안여백은 컨텐트의 테두리와 컨텐트간의 간격을 가리킨다.
요소의 테두리가 디스플레이되지 않더라도 안여백은
디스플레이된다.
다음과 같은 프로퍼티를 지정하면 블록 레벨 요소를 에워싸는
안여백의 크기를 설정할 수 있다:
· padding-top/paddingTop
· padding-bottom/paddingBottom
· padding-left/paddingLeft
· padding-right/paddingRight
· padding 프로퍼티(CSS 구문)이나 paddings()
함수(자바스크립트 구문)을 지정하면 네가지 프로퍼티를
한꺼번에 같은 값으로 설정할 수 있다.
4.5 블록 레벨 요소의 포매팅 프로퍼티 상속
부모 요소의 폭과 여백, 테두리 특성 및 안여백은 자식 요소에
상속되지 않는다. 그러나, 부모 요소의 값들이 자식 요소에
영향을 주기 때문에, 얼핏 보면 이런 것들이 상속되는 것처럼
보인다.
예를 들어, DIV 요소를 10 포인트로 설정했다고 가정해 보자.
이 DIV 요소를 왼쪽에 10포인트만큼 들어가 있는 커다란
상자로 생각할 수도 있다. DIV 요소에 테두리 폭도 없고
안여백도 없다고 가정해 보자. IDV 내에 있는 모든 요소의
여백이 0이라면 상자의 모서리에 부딪치게 된다. 상자가10포인트만큼 들어가 있기 때문에 모든 요소들은 10포인트만큼
당겨서 끝나게 된다.
이제, 자식 요소가 부모 요소에게서 여백값을 상속했다면
어떻게 될지 생각해 보자. 그럴 경우, DIV 블록은 왼쪽 여백이
10포인트가 되고, 자식 요소 역시 좌측 여백이 10포인트가 되기
때문에, 결과적으로 왼쪽에서 20포인트만큼 들여쓰게 된다.
다음장에서는 스타일시트 레퍼런스를 살펴보기로 한다.
이 장에서는 블록 레벨 요소에 대한 포맷팅 옵션에 대해 설명한
다. 블록 레벨 요소는 새로운 행에서 시작되는 것을 가리키는
것으로, 예를 들어, <H1>이나 <P>은 블록 레벨 요소이고,
<EM>은 아니다.
블록 레벨 요소의 포매팅 방법은 여러 가지인데, 우선, 각 포매
팅 요소에 대해 자세히 설명하고, 블록 레벨 요소를 포매팅하는
데 사용한 프로퍼티의 동작 상속에 대한 개요를 살펴본다.
4.1 블록 레벨 포매팅 개요와 예제
스타일 시트는 블록 레벨 요소 각각이 상자로 둘러싸여 있는 것
처럼 처리한다. 각 상자는 여백과 테두리, 안여백 등 형식 스
타일 특성을 가질 수 있고, 배경 이미지나 색상을 가질 수도 있다.
여백은 웹 문서(혹은 부모 요소) 모서리에서 상자 모서리 간의
공간을 가리킨다. 각 상자는 평면이나 3차원 형태의 테두리를
가질 수도 있고, 안여백은 각 요소 테두리와 요소 컨텐트간의
거리를 가리킨다.
또한 특정 값을 사용하던지, 아니면 문서(혹은 부모 요소) 폭에
대한 백분율을 사용해서 블록 레벨 요소의 폭을 설정할 수 있다. 왼쪽 여백과 오른쪽 여백을 사용하여 폭을 설정할 수도 있다.
폭이나 양쪽 여백을 특정 값으로 설정할 경우, 왼쪽 여백값이
가장 우선한다. 이 경우, 오른쪽 여백값은 오른쪽 모서리로부터
컨텐트를 포괄할 수 있는 위치까지의 최대 거리를 가리키게 된다.
폭에 대한 설정값으로 인해 요소가 오른쪽 여백까지 넘치게 될 경우,
폭 값은 무시된다. 폭 값으로 인해 요소가 오른쪽 여백까지 넘치지
않을 경우에만 폭 값이 사용된다.
float 프로퍼티(CSS 구문)나, align 프로퍼티(자바스크립트 구문)을
설정하여 요소를 왼쪽이나 오른쪽, 혹은 가운데로 정렬할 수 있다.
마찬가지로, 왼쪽이나 오른쪽 여백을 설정하여 정렬할 수도 있다.
다음은 여백과 안여백, 테두리 폭, 배경색, 폭 및 정렬 프로퍼티를 사용한 예제이다.
========
CSS 구문
========
<STYLE TYPE="text/css">
P {
background-color:#CCCCFF;
/* 여백 */
margin-left:20%; margin-right:20%;
/* 테두리 폭 */
border-top-width:10pt; border-bottom-width:10pt;
border-right-width:5pt; border-left-width:5pt; /* 테두리 스타일과 색상 */
border-style:outset; border-color:blue;
/* 안여백 */
padding-top:10pt; padding-bottom:10pt;
padding-right:20pt; padding-left:20pt;
}
H3 {
/* 폰트 크기와 두께 */
font-size:14pt;
font-weight:bold;
/*background-image: URL{"\guide\images\aspincl.gif");*/
/* 폭의 90%만큼의 제목을 가운데 배치한다.*/
width:90%; float:center;
border-color:green;
border-style:solid;
/* 테두리의 네 모서리의 두께를 모두 똑같게 */
border-width:10pt;
/* 네 모서리의 안여백을 모두 똑같게 */
padding:20pt;
}
</STYLE>
===============
자바스크립트 구문
===============
<STYLE TYPE = "text/javascript">
with (tags.P) {
backgroundColor="#CCCCFF";
/* P 테두리 스타일과 색상 */
borderStyle="outset"; borderColor="blue";
/* P 보더 폭 */
borderTopWidth="10pt"; borderBottomWidth="10pt";
borderLeftWidth="5pt"; borderRightWidth="5pt";
/* P 안여백 */
paddingTop="10pt"; paddingBottom="10pt";
paddingLeft="20pt"; paddingRight="20pt";
/* P 여백 */
marginLeft="20%"; marginRights="20%";
}
with (tags.H3) {
/*backgroundImage="images/grenlite.gif";*/
/* 폰트 크기와 두께 */
fontSize="14pt"; fontWeight="bold";
/* H3 테두리 스타일과 색상 */
borderStyle="solid"; borderColor="green";
/* 폭의 90%가 되게 제목을 가운데 배치*/
width=90%; align="center";
/* 테두리의 모든 모서리가 같은 두께가 되게 */
borderWidths("10pt");
/* 모든 모서리의 안여백이 같게 */
paddings("20pt");
}
================
스타일 시트 사용례
================
<H3>H3 with a Solid Border</H3>
<P>Borders have their uses in everyday life. For example,
borders round a paragraph make the paragraph stand out more
than it otherwise would.
</P>
<P>This is another paragraph with a border. You have to be
careful not to make the borders too wide, or else they startto take over the page.
</P>
결과 : 제목 및 두 개의 문단이 테두리로 둘러싸여 나타나는데,
제목은 초록색 테두리로, 두 개의 문단은 파란색 테두리로
디스플레이된다.
(http://developer.netscape.com/one/dynhtml/index.html 참고)
4.2 여백 및 폭 설정하기
여백이란 문서(혹은 부모 요소)의 모서리에서 요소 삽입까지의
거리를 가리키는 것으로, 좌우 여백과 상하 여백을 설정할 수
있다. 부모 요소가 안여백이나 테두리, 혹은 여백 같은프로퍼티를 가지고 있을 경우, 부모의 "모서리"는 이런 것들을
에워싸는 이론상의 사각형이 된다.
다음과 같은 프로퍼티를 지정하면 블록 레벨 요소에 대한
여백을 설정할 수 있다:
· margin-top/marginTop
· margin-bottom/marginBottom
· margin-left/marginLeft
· margin-right/marginRight
· CSS 구문에서는 margin 프로퍼티를 설정하여, 그리고
자바스크립트 구문에서는 margins() 함수를 사용하여, 네가지
프로퍼티를 모두 같은 값으로 한꺼번에 설정할 수 있다.
요소를 왼쪽이나 오른쪽, 혹은 중앙으로 수평 정렬할 수 있다.
CSS 구문에서는 float 프로퍼티를 설정하여, 자바스크립트
구문에서는 align 프로터를 설정하면 된다. 좌우 여백을
설정하여 요소를 정렬할 수도 있다.
특정 여백값을 설정하는대신, width 프로퍼티를 설정할 수도
있다. (200pt 같이) 특정값을 사용하거나 (60% 같이) 요소나
문서를 포함할 수 있는 백분율을 사용하여 설정하면 된다.
원한다면 폭과 함께 왼쪽이나 오른쪽 여백을 같이 설정할 수도
있는데, 부모 요소의 폭을 100%로 했을 때 이를 초과하지 않는
범위내에서 설정할 수 있다. 그러나, 폭과 양쪽 여백을 모두
설정하면, 두 개의 값이 나머지 하나의 값을 포함하고 있기
때문에, 이런 방법은 좋지 않다. (예를 들어, 왼쪽 여백이
25%이고, 폭이 60%라면 오른쪽 여백은 15%여야 한다.)
인접해 있는 둘 이상의 여백(즉, 인접한 여백 사이에 테두리나
안여백, 혹은 컨텐트가 없는 상태)은 최대 여백값을 사용할 수
있도록 합해져 버린다. 음수의 여백값의 경우에는, 인접한
양수의 여백값 중 최대값에서 음수 여백값의 절대값 중
최대값을 빼게 된다.
문서에서 기본 여백값을 설정하기 위해 <BODY> 태그에 대해
여백 프로터티를 지정할 수 있다. 예를 들어, 아래 코드는
왼쪽과 오른쪽 여백을 20pt로 설정한 것이다.
========
CSS 구문
========
<STYLE TYPE="text/css">
BODY {margin-left:20pt; margin-right:20pt;}
</STYLE>
===============
자바스크립트 구문
===============
<STYLE TYPE = "text/javascript">
with (tags.BODY){
marginLeft="20pt"; marginRight="20pt";
}
</STYLE>
4.3 테두리 폭과 색상, 스타일 설정하기
다음과 같은 프로퍼티를 설정하면 블록 레벨 요소를 둘러싸는
테두리의 폭을 설정할 수 있다:
· border-top-width/borderTopWidth
· border-bottom-width/borderBottomWidth
· border-left-width/borderLeftWidth
· border-right-width/borderRightWidth
· CSS 구문에서는 border-width 프로퍼티를, 자바스크립트
구문에서는 borderWidths() 함수를 사용하면 네 가지프로퍼티를 한꺼번에 모두 같은 값으로 설정할 수 있다.
border-style(CSS 구문)이나 borderStyle(자바스크립트 구문)
프로퍼티를 지정하면 테두리의 스타일을 설정할 수 있다.
테두리 스타일을 solid나 double로 설정하면 테두리를 평면으로
만들 수 있고, groove나 ridge, inse, outset으로 설정하면 3차원
형태를 만들 수 있다.
border-color(CSS 구문)나 borderColor(자바스크립트 구문)
프로퍼티를 지정하면 테두리의 색상을 설정할 수 있다.
4.4 안여백 설정하기
안여백은 컨텐트의 테두리와 컨텐트간의 간격을 가리킨다.
요소의 테두리가 디스플레이되지 않더라도 안여백은
디스플레이된다.
다음과 같은 프로퍼티를 지정하면 블록 레벨 요소를 에워싸는
안여백의 크기를 설정할 수 있다:
· padding-top/paddingTop
· padding-bottom/paddingBottom
· padding-left/paddingLeft
· padding-right/paddingRight
· padding 프로퍼티(CSS 구문)이나 paddings()
함수(자바스크립트 구문)을 지정하면 네가지 프로퍼티를
한꺼번에 같은 값으로 설정할 수 있다.
4.5 블록 레벨 요소의 포매팅 프로퍼티 상속
부모 요소의 폭과 여백, 테두리 특성 및 안여백은 자식 요소에
상속되지 않는다. 그러나, 부모 요소의 값들이 자식 요소에
영향을 주기 때문에, 얼핏 보면 이런 것들이 상속되는 것처럼
보인다.
예를 들어, DIV 요소를 10 포인트로 설정했다고 가정해 보자.
이 DIV 요소를 왼쪽에 10포인트만큼 들어가 있는 커다란
상자로 생각할 수도 있다. DIV 요소에 테두리 폭도 없고
안여백도 없다고 가정해 보자. IDV 내에 있는 모든 요소의
여백이 0이라면 상자의 모서리에 부딪치게 된다. 상자가10포인트만큼 들어가 있기 때문에 모든 요소들은 10포인트만큼
당겨서 끝나게 된다.
이제, 자식 요소가 부모 요소에게서 여백값을 상속했다면
어떻게 될지 생각해 보자. 그럴 경우, DIV 블록은 왼쪽 여백이
10포인트가 되고, 자식 요소 역시 좌측 여백이 10포인트가 되기
때문에, 결과적으로 왼쪽에서 20포인트만큼 들여쓰게 된다.
다음장에서는 스타일시트 레퍼런스를 살펴보기로 한다.
