배경과 박스

박스모델 (1) margin 이 속성은 상하좌우 여백을 설정하는 요소입니다. margin-top, margin-bottom, margin-left, margin-right 를 이용하여 개별적으로 적용할 수도 있고 margin 속성을 이용하여 한꺼번에 지정할 수도 있습니다. 자 그럼 종류를 한번 볼까요.  margin-top  위쪽여백  margin-bottom  아래쪽 여백  margin-left  왼쪽여백  margin-right  오른쪽 여백  margin margin 속성은 상하좌우의 각 여백을 한 번에 지정할 수 있는 속성입니다. 값은 공백으로 구별하여 여러 개를 지정할 수 있지만, 지정한 수에 따라서 다음과 같이 적용됩니다. 값이 1개 : 상하좌우 모두 해당 값이 2개 : 값1(상하), 값2(좌우) 값이 3개 : 값1(상), 값2(좌우), 값3(하) 값이 4개 : 값1(상), 값2(우), 값3(하), 값4(좌) padding 여기는 패딩을 지정하는 속성입니다. 패딩이 뭔지는 아시지요. html 할때 배워는데~~ ^^; 글자를 둘러싸고 있는 박스와 글자와의 거리를 나타내는 겂니다. 여기서도 마찬가지로 padding-top, padding-bottom, padding-left, padding-right 속성을 가지고 각각 지정할 수도 있고 margin 속성을 이용하여 한꺼번에 지정할 수도 있습니다. 자 한번 종류를 보시지요.  padding-top  위쪽  padding-bottom  아래쪽  padding-left  왼쪽  padding-right  오른쪽  padding margin 속성은 상하좌우의 각각의 패팅값을 한 번에 지정할 수 있는 속성입니다. 값은 공백으로 구별하여 여러 개를 지정할 수 있지만, 지정한 수에 따라서 다음과 같이 적용됩니다. 값이 1개 : 상하좌우 모두 해당 값이 2개 : 값1(상하), 값2(좌우) 값이 3개 : 값1(상), 값2(좌우), 값3(하) 값이 4개 : 값1(상), 값2(우), 값3(하), 값4(좌) border-color 외곽선의 색을 하나씩 따로따로 지정할 수도 있고 border 속성을 이용하여 한꺼번에 지정할 수도 있습니다.  border-top-color  위쪽  border-bottom-color  아래쪽  border-left-color  왼쪽  border-right-color  오른쪽  border-color border-color 속성은 상하좌우의 각각의 값을 한 번에 지정할 수 있는 속성입니다. 값은 공백으로 구별하여 여러 개를 지정할 수 있지만, 지정한 수에 따라서 다음과 같이 적용됩니다. 값이 1개 : 상하좌우 모두 해당 값이 2개 : 값1(상하), 값2(좌우) 값이 3개 : 값1(상), 값2(좌우), 값3(하) 값이 4개 : 값1(상), 값2(우), 값3(하), 값4(좌) border-width 외곽선의 굵기를 하나씩 따로따로 지정할 수도 있고 border-width 속성을 이용하여 한꺼번에 지정할 수도 있습니다. 각각의 외곽선의 굵기는 thin(가는 외곽선), medium(중간 외곽선), thick(굵은 외곽선) 로 설정할 수 있습니다. 그러나 실제로 표시되는 외곽선의 굵기는 브라우저에 따라 다르게 보입니다.  border-top-width  위쪽  border-bottom-width  아래쪽  border-left-width  왼쪽  border-right-width  오른쪽  border-width border-width 속성은 상하좌우의 각각의 값을 한 번에 지정할 수 있는 속성입니다. 값은 공백으로 구별하여 여러 개를 지정할 수 있지만, 지정한 수에 따라서 다음과 같이 적용됩니다. 값이 1개 : 상하좌우 모두 해당 값이 2개 : 값1(상하), 값2(좌우) 값이 3개 : 값1(상), 값2(좌우), 값3(하) 값이 4개 : 값1(상), 값2(우), 값3(하), 값4(좌) border-style 외곽선의 형식을 지정하는 속성입니다. 각각 개별적으로 지정할 수도 있고, border-style 속성을 이용하여 한꺼번에 지정할 수도 있습니다. 그리고 외과선 형식의 초기값은 [none]이기 때문에 [hidden]을 제외한 다른 형식을 지정하기 전에는 외곽선은 표시되지 않습니다. 아래의 외곽선의 형식을 잘 기억해 두시기 바랍니다. 요긴하게 써먹을 때가 있을 겁니다. ^^;  border-top-style  위쪽  border-bottom-style  아래쪽  border-left-style  왼쪽  border-right-style  오른쪽  border-style border-style 속성은 상하좌우의 각각의 값을 한 번에 지정할 수 있는 속성입니다. 값은 공백으로 구별하여 여러 개를 지정할 수 있지만, 지정한 수에 따라서 다음과 같이 적용됩니다. 값이 1개 : 상하좌우 모두 해당 값이 2개 : 값1(상하), 값2(좌우) 값이 3개 : 값1(상), 값2(좌우), 값3(하) 값이 4개 : 값1(상), 값2(우), 값3(하), 값4(좌)  박스모델 (2) 자 그럼 전 장에 이어서 border-style 의 외곽선의 형식에는 어떤 것들이 있는지 알아 보겠습니다.  none  외곽선을 표시하지 않으며 굵기도 0으로 설정됩니다. 표의 셀에 외곽선이 중복되는 경우에는 다른값이 우선됩니다.  hidden  외곽선을 표시하지 않으며 굵기도 0으로 설정됩니다. 표의 셀에 외곽선이 중복되는 경우에는 이 값이 가장 우선됩니다.  solid  선으로 표시됩니다.  double  두 줄의 외곽선으로 표시합니다.  groove  외곽선이 들어가 보이도록 입체적으로 표시합니다.  ridge  외곽선이 돌출되어 보이도록 입체적으로 표시합니다.  inset  외곽선의 안쪽 전체가 들어가 보이도록 입체적으로 표시합니다.  outset  외곽선의 안쪽 전체가 돌출되어 보이도록 입체적으로 표시합니다.  dashed  외곽선을 긴 점선으로 표시합니다.(익스플로러에서는 잘 안될걸요~~)  dotted  외곽선을 점선으로 표시합니다.(역시 익스플로러에서는 좀 힘들어 ^^;)   알림 : 아래의 외곽선 모양은 포토샵으로 작업해서 이미지로 올린것입니다. 왜냐하면 익스플로러 5.0 이하 버전에서는 보이지가 않기 때문입니다. 그리고 모양을 일부러 크게 했는데 그 이유는 직관적으로 이런 모양이 되는 것을 알도록 하기 위함입니다. [예제] {margin:10px;border-color:green;border-width:0.6em;border-style:solid} {margin:10px;border-color:green;border-width:0.6em;border-style:double} {margin:10px;border-color:#ffccff;border-width:0.6em;border-style:groove} {margin:10px;border-color:#ffccff;border-width:0.6em;border-style:ridge} {margin:10px;border-color:#ffccff;border-width:0.6em;border-style:inset} {margin:10px;border-color:#ffccff;border-width:0.6em;border-style:outset} {margin:10px;border-color:green;border-width:0.6em;border-style:dashed} {margin:10px;border-color:green;border-width:0.6em;border-style:dotted} border 자 이번에는 앞에서 배웠던 외곽선에 대하여 각각의 색, 굵기, 형식을 한 번에 설정하는 속성에 대해 알아보겠습니다.  border-top 위쪽의 외곽선의 색, 굵기, 형식을 한번에 설정할수 있습니다. 필요한 값을 임의의 순서로 공백으로 구별하여 지정할 수 있지만, 여기에서 지정되지 않은 값은 초기값이 채택됩니다.  border-bottom  아래쪽도 동일합니다.  border-left  왼쪽도 마찬가지 입니다.  border-right  오른쪽도 똑 같습니다.  border border 속성은 상하좌우 외곽선에 대해서 같은 색, 굵기, 형식을 한 번에 설정하는 속성으로써 상하좌우에 대해서 개별적인 설정을 할 수 없습니다. 필요한 값을 임의의 순서로 공백으로 구별하여 지정합니다. 값이 1개 : 상하좌우 모두 해당 값이 2개 : 값1(상하), 값2(좌우) 값이 3개 : 값1(상), 값2(좌우), 값3(하) 값이 4개 : 값1(상), 값2(우), 값3(하), 값4(좌) [예제] <html> <head> <style type="text/css"><!-- h1 { text-align:center; border-bottom:solid 2px #ff9900; } p.sample1{text-align:center;margin:1em 20px;padding:2em;border:solid 12px green;font-size:20px} p.sample2{text-align:left;margin:1em 2em 3em 2em;padding:1em;border:double 10px red;font-size:18px} --></style> </head> <body background=../../image/background/abg04.gif> <h1>예제 샘플 1</h1> <p class=sample1>여기는 예제 소스 1입니다 여기는 송파나루터입니다.(www.studyho.com) </p> <h1>예제 샘플 2</h1> <p class=sample2>여기는 예제 소스 2입니다 여기는 html 과 스타일시트를 공부하는 곳입니다.</p> </body> </html> [설명] h1 태그 사이에 들어가있는 것은 글자를 가운데 정렬하고, 박스 아래쪽만 border-bottom 속성을 이용하여 한번에 지정했습니다. 박스 스타일을 선으로 지정하고, 두께는 2px 로, 색깔은 #ff9900 으로 지정했습니다. sample1 에서는 글자를 가운데 정렬하고, 박스의 여백을 위와 아래에 1em 를 지정하고 좌우를 20px 로 지정했습니다. 그리고 글자와 박스의 간격를 2em 으로 지정하고 border 속성을 이용하여 박스의 스타일을 선으로, 두께를 12px 로, 색깔을 녹색으로 지정했습니다. 박스 안의 글자는 20px 이구요. sample2 에서는 글자를 왼쪽정렬하고 박스의 여백를 위 1em, 우측을 2em, 아래를 3em, 좌측을 2em 으로 지정했습니다. 박스와 글자의 간격은 1 em 으로 지정하고 박스의 스타일은 double 로, 두께는 10px 로, 박스의 색깔은 빨간색으로 지정하고 글자 내부의 크기는 18px로 지정했습니다.  배경 color color 속성은 요소 내의 문자색을 설정하는 속성입니다. 문자색만 설정하면 사용자가 독자적인 스타일시트에서 배경색을 설정하고 있는 경우에 그 색과의 조합에 따라 문자를 알아보기 어려운 경우가 있습니다. 이런 경우를 피하기 위해서 문자색을 지정하는 경우에는 배경도 함께 지정해 둘 수 있습니다. background-color background-color 속성은 요소의 배경색을 설정하는 속성입니다. 여기에서 설정한 값은 박스의 내용과 패딩 부분에 여백 부분은 항상 투명하게 됩니다. background-image 배경이미지의 url 를 설정하는 속성입니다. none 는 배경이미지를 사용하지 않는 것을 표시합니다. 형식은 background-image : url("배경이미지 경로") 형태로 씁니다. background-repeat 이 속성은 배경이미지가 지정되어있는 경우에 이미지의 정렬을 설정하는 속성입니다.  repeat  배경 이미지를 바둑판식 배열로 정렬을 합니다.  repeat-x  배경 이미지를 가로 방향으로 반복해서 정렬을 합니다.  repeat-y  배경 이미지를 세로 방향으로 반복해서 정렬을 합니다.  no-repeat  배경 이미지를 반복되지 않고 한 번만 표시합니다. background-position 이 속성은 배경이미지가 지정되어 있는 경우에 그 표시 위치를 설정하는 속성입니다.  실수값 + 단위 가로와 세로의 위치를 순서대로 공백으로 구별하여 숫자값으로 지정합니다. 값을 한 개만 지정한 경우에는 가로 방향의 위치를 지정한 것이고 세로 방향은 50%로 설정됩니다.   % 가로와 세로의 위치를 순서대로 공백으로 구별하여 비율로 지정합니다. 값을 한 개만 지정한 경우에는 역시 가로 방향의 위치를 지정한 것이고 세로 방향은 50%로 설정됩니다. [예] background-position:30% 70% (왼쪽에서 30%, 위에서 70%지점에 이미지 고정합니다)  left, center, right, top, center, bottom 가로와 세로의 위치를 공백으로 구별하여 키워드를 지정하며 이 경우에는 순서에 상관이 없습니다. [예] background-position:right bottom (오른쪽과 아래에 이미지를 고정합니다) background-position:center top (가운데 위쪽에 이미지를 고정합니다) background-attachment 이 속성은 배경이미지가 지정되어 있는 경우 그 이미지를(윈도우에 대하여) 그 위치에 고정되게 할 것인지, 스크롤에 따라서 내용도 함께 이동시킬것인지를 설정하는 속성입니다. fixed 배경 이미지의 위치를 고정시킵니다. scroll 배경 미미지를 다른 내용과 함께 스크롤하도록 합니다. [소스] <html> <head>  <style type="text/css">   body { color:black;    background-image:url("../../image/background/bg21.gif");    background-repeat:no-repeat;    background-attachment:fixed;    margin-top:100px;    text-align:right}   p{line-height:2em}   </style> </head> <body>     내용생략: 아래 [예제보기]를 누르시면 자세한 내용이 있습니다. </body> </html> [결과] background 배경에 관련 속성을 일괄적으로 한 번에 설정할 수 있는 속성이며 필요한 값을 임의의 순서로 공백으로 구별하여 지정합니다. [예]  <style type="text/css">  <!--  body { background:white url("이미지의 경로와 이름") center repeat-y; }  -->  </style> (설명을 하자면 배경색은 파란색으로 지정을 하고, 그 다음에는 배경이미지의 경로를 적었습니다. 그리고 나서 배경이미지를 중앙에 정렬을 시키고 나서 y축(위아래)로 반복해서 그림이 나오게 한것입니다. [소스] <html> <head>    <style type="text/css">     body {background:blue url("../images/woman.jpg") center repeat-y}    </style> </head> <body> </body> </html>