heenam
5. CSS3 박스 모델과 응용 본문
박스 모델
css 개요
css3는 W3C에서 한창 개발중인 규격이다. W3C사이트에서 보면 CSS3 규격 중에서 완료된 것도 있고 아직 한창 토의
중인 규격도 있음을 알 수 있다.
박스 모델
웹 브라우저는 각 HTML요소를 사각형으로 간주하고 웹 페이지 위에 그리게 된다. 요소를 배치할 때도 사각형으로
간주한다. 이런 식으로 요소를 박스 형태로 그리는 것을 박스 모델 이라고 부른다.
CSS는 각 박스의 특징(배치, 색상, 경계 등)을 결정하게 된다.
CSS 박스 모델은 기본적으로 HTML 요소를 감싸는 가상적인 박스를 생각하는 것이다. 각 박스는 마진, 경계, 패딩을
가진다.
콘텐츠: 박스의 내용물이다. 텍스트와 이미지가 나타나는 부분이다.
패딩: 콘텐츠 주위의 영역이다. 패딩은 투명하다.
경계: 패딩과 내용물을 감싸는 경계이다. 경계는 박스의 경계색에 의하여 영향을 받는다.
마진: 경계 주위의 영역이다. 마진은 투명하다.
경계선
CSS border 속성을 이용하면 HTML 요소 경계선의 스타일과 색상을 지정할 수 있다.
경계선 스타일
경계선 스타일은 border-style로 설정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p style = "border-style: 사용할 스타일 이름">내용</p>
</body>
</html>
만약 상하좌우 경계선 스타일을 모두 다르게 설정하고 싶으면 다음과 같이 설정한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p style="border-top-style: 위에 적용할 스타일;
border-right-style: 오른쪽에 적용할 스타일;
border-botton-style: 밑에 적용할 스타일;
border-left-style: 왼쪽에 적용할 스타일;>"
</p>
</body>
</html>
border-style: 상 우 하 좌 ; 순으로 입력 하면 한줄로도 설정이 가능하다.
경계선의 폭
border-width 속성은 경계선의 폭을 지정한다. 단위는 픽셀이거나 thin, medium, thick 중의 하나일 수 있다.
border-style이 설정되어 있어야 border-width가 동작을 한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.thick{
border-style: solid;
border-width: thick;
/* thick는 굵은선 medium 은 중간선 1px는 숫자에 따라 조절가능한선 */
}
</style>
</head>
<body>
<p class="thick">경계선이 thick으로 설정되었음</p>
</body>
</html>
경계선 색상
HTML 요소의 성계선 생산은 border-color로 지정한다. 색상은 물론 다음과 같은 3가지 방법으로 지정이 가능하다.
+ "green" 색 이름으로 색상을 나타내는 방법
+ rgb(0, 255, 0) RGB 값으로 색상을 나타내는 방법
+ "#00ff00" 16진수로 색상을 나타내는 방법
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p.green{
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<p class="green">경계선이 green으로 설정되었음</p>
</body>
</html>경계선에 대한 속성을 한 줄로 정의
경계선의 스타일을 한 줄에 한꺼번에 설정할 수도 있다. 이것을 축약 속성이라고 한다.
반드시 border-width, border-style(필수), borther-color 순서로 적어주어야 한다.
border: 5px solid red;둥근 경계선
CSS3에서는 둥근 경계선, 그림자 경계선, 경계 이미지 같은 고급 기능을 포토샵 프로그램 없이도 생성할 수 있다.
border-radius는 둥근 경쟁선을 만드는 속성이다.
border-radius: 25px; /* 둥근 코너의 반지름 */
padding: 10px 20px; /* 10px는 글의 앞부분 여백, 20px는 글 위아래 부분 여백 */경계에 그림자 생성
box-shadow 속성을 사용하면 그림자가 있는 경계를 생성할 수 있다.
box-shadow: 20px 10px 5px #666666; /* 가로 오프셋, 세로 오프셋, 번지는 정도, 그림자색 순으로 입력한다.*/경계 이미지
border-image 속성을 사용하면 이미지로 경계선을 만들 수 있다. 경계선을 만드는 이미지는 9구역으로 나누어져서
다음과 같이 사용한다. 따라서 이미지를 제작할 때부터 신경을 써야 한다.
마진과 패딩
요소 크기 설정
이제까지는 HTML 요소의 크기를 설정하지 않았다. 콘텐츠의 자연스러운 크기를 사용하였다 CSS에서는 모든 요소의
크기를 width와 height 속성을 이용해 설정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#target{
width: 100px; /*가로길이*/
height: 50px; /*세로길이*/
background-color: yellow;
}
</style>
</head>
<body>
<p id="target"> 이것은 p요소입니다.</p>
</body>
</html>
요소 크기 변경
resize 속성을 both라고 설정하면 양방향 크기 조정 메커니즘을 제공하여 사용자가 요소의 높이와 너비를 모두 조정
할 수 있게 한다. resize의 값은 both, horizontal, vertical, none등이 가능하다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
border: 1px solid red;
background-color: yellow;
width: 100px;
height: auto;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<div> 박스의 크기를 조절하여 보세요!</div>
</body>
</html>
마진 설정하기
마진은 CSS에서 지정이 가능하다.
마진은 음수로 지정될 수 있다. 이경우에는 요소가 중첩된다. 따라서 이런 효과를 원한다면 음수를 지정하도록 하자.
margin: 상px 우px 하px 좌px;
or
margin: 숫자px; /* 4 방향이 같은 숫자로 변경됨*/패딩 설정하기
패딩은 콘텐츠와 경계 사이의 간격이다. 패딩은 다음과 같은 값이 가능하다.
패딩설정도 마진 설정과 동일하다.
박스의 크기 계산
CSS를 통하여 요소의 width와 heigth 속성을 설정하면 요소 안에서 콘텐츠 영역의 크기가 설정된다. 요소의 전체 크기
를 계산하려면 여기에 패딩, 경계, 마진을 더해야 한다.
배경 설정하기
CSS를 이용하면 요소의 배경을 설정할 수 있다.
배경색 설정
<style>
body {background-color: red;} /* 색이름 넣기 */
body {background-color: rgb(255, 0, 0);} /*RGB 사용하기*/
body {background-color: #ff0000;} /*16진법 사용하기*/
</style>배경 이미지 설정
background-image 속성을 사용해 배경으로 사용할 이미지를 지정할 수 있다.
<style>
body {background-image: url('이미지이름.속성');}
body {background-repeat: repeat-x;} /*x방향으로만 반복한다.*/
body {background-repeat: no-repeat;} /*이미지를 한번만 표시하고 반복하지 않을 경우*/
</style>배경 이미지는 수평이나 수직 방향으로 반복되면서 칠해진다. 이미지에 따라서는 수평이나 수직으로만 반복되는 것이
필요할 수 있다. 이런 경우에는 background-repeat 특성을 설정하여 준다.
배경 이미지 부착 방법
background-attachment 속성은 배경 이미지의 부착 방법을 설정한다.
+ scroll: 배경이 요소와 같이 스트롤 된다. 디폴트 값이다.
+ fixed: 배경이 뷰포트에 대하여 고정된다.
+ lacal: 요소의 콘텐츠와 같이 스트롤 된다.
여기서 fixed로 설정하면 스크롤해도 배경 이미지는 움직이지 않는다.
배경 이미지 위치 설정
background-position 속성은 배경 이미지의 위치를 설정한다. 위치는 물론 100px 200px과 같이 픽셀 단위 또는
퍼센트 단위로 지정할 수 있다.
background-position: 100px 200px;추가로 다음과 같은 키워드를 사용할 수도 있다.
+ left top, left center, left bottom
+ right top, right center, right bottom
+ senter top, senter center, senter bottom
배경에 대한 속성을 한 줄로 설정하기
배경에 관한 특성은 상당히 많다. 따라서 이것을 한 번에 표시할 수 있는 방법이 있다.
body {background: #ffffff url('사진이름.속성') no-repeat right top; }
/*배경색을 흰색으로 설정, 배경 이미지 설정, 반복하지 않음, 오른쪽 상단에 표시*/배경 이미지의 크기 지정
background-size 속성은 배경 이미지의 크기를 지정한다. CSS3 이전에는 배경 이미지 크기가 이미지의 실제 크기에
의하여 결정되었다. CSS3에서는 배경 이미지의 크기를 지정할 수 있다. 픽셀 또는 퍼센트 단위로 지정이 가능하다.
만약 퍼센트를 사용하면 기준이 되는 크기는 부모 요소의 가로와 세로이다.
<style>
background-size: 100px 100px;
</style>링크 스타일
링크는 사용자가 클릭하면 정해진 웹 페이지로 이동하는 수단이다. CSS에서는 링크의 스타일도 여러 가지로 설정할 수
있다. 추가로 링크는 어떤 상태이냐에 따라서 스타일을 다르게 할 수 있다. 링크의 4가지 스타일은 다음과 같다.
+ a:link: 방문되지 않은 링크의 스타일
+ a:visited: 방문된 링크의 스타일
+ a:hover: 마우스가 위에 있을 때의 스타일
+ a:active: 마우스로 클릭되는 때의 스타일
링크의 스타일을 설정할 때는 반드시 지켜야 할 규칙이 있다. a:hover는 a:link와 a:visited 다음에 위치해야 한다.
a:active는 a:hover 다음에 위치해야 한다.
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color: red;}
a:visited {color: green;}
a:hover {color: blue;}
a:active {color: yellow;}
</style>
</head>
<body>
<p><a href=""target="_blank">여기가 링크 입니다.</a></p>
</body>
</html>
링크의 다른 스타일
앞에서는 랑크의 색상이 변경되었다. 하지만 링크의 텍스트 크기가 변경되도록 할 수도 있다.
color 자리에 font-size: 150%; 를 입력하게 되면 폰트의 크기가 1.5배가 된다.
또한 background: #66ff66; 를 입력하게 되면 배경색이 변화한다.
리스트 스타일
리스트의 스타일도 CSS로 지정이 가능하다.
CSS를 리스트에 사용하면 리스트 항복 마커를 변경할 수 있고 이미지를 마커로 사용할 수도 있다.
ul.style {list-style-type: 변경할 마커 이름;}
or
ol.{list-style-image: url('변경하고 싶은 이미지 이름.속성';}마커 종류는 circle, square, upper-roman, lower-alpha 가 있다.
테이블 스타일
테이블의 스타일도 CSS를 사용하면 공장히 개선될 수 있다. 테이블에서 많이 사용되는 속성은 다음과 같다.
테이블의 경계
테이블의 경계를 CSS로 설정하려면 border 속성을 사용한다. 경계선을 border속성을 사용하는데 이 border속성은
테이블에만 사용되는 속성은 아니다. border 속성은 HTML요소의 경계선을 설정할 때 사용하는 아주 중요한 속성이다.
border는 스타일, 색상, 두께 등의 많은 속성을 가지고 있다.
border: 5px solid red;경계선의 속성을 한 줄로 설정할때는 반드시 border-width(경계선의 두께), border-style, border-color 순서로 적어주
어야 한다.
경계 통합하기
+ collapse: 이웃하는 셀의 경계선을 합쳐서 단일선으로 표시한다.
+ separate: 이웃하는 셀의 경계선을 합치지 않고 분리하여 표시한다.
테이블의 배경색
테이블의 배경색과 텍스트 색상을 변경하면 상당히 다른 테이블을 생성할 수 있다.
테이블의 가로 길이와 세로 길이 지정
테이블의 가로 길이와 세로 길기는 width와 height속성으로 설정할 수 있다.
<style>
table {width: 100%}
th {height: 30px;} /* th의 높이를 30픽셀로 한다.*/
th {text-align: center;} /*th의 텍스트 정렬을 중앙으로 설정한다.*/
</style>
테이블 텍스트 정렬
text-align 속성은 테이블 안의 텍스트 정렬을 설정한다. left, right, center 등으로 설정할 수 있다.
테이블 캡션
테이블에는 캡션을 추가할 수 있다. 캡션의 위치는 CSS로 지정할 수 있다.
+ caption-side: 캡션의 위치를 지정한다.(top/ bottom/ inherit)
<head>
<style>
caption {caption-side: bottom;} /* 캡션의 위치를 "bottom" 으로 지정한다.*/
</style>
</head>공백 셀 표시 여부
내용을 가지고 있지 않은 공백 셀의 표시 여부는 empty-cells 로 지정할 수 있다.
+ empty-cells: 공백 셀의 표시 여부(show/ hide/ inherit)
<style>
table{
border-collapse: aeparate;
empty-cells: hide; /*내용이 없으면 셀을 그리지 않는다.*/
}
</style>'Wep Programming > CSS3' 카테고리의 다른 글
| 부트 스트랩이란? (0) | 2020.06.12 |
|---|---|
| 7. HTML과 CSS로 웹 사이트 만들기 (0) | 2020.06.10 |
| 6. CSS3 레이아웃과 애니메이션 (0) | 2020.06.05 |
| 4. CSS3 스타일 시트 기초 (0) | 2020.05.27 |