박스 모델
- 웹 브라우저는 HTML 내의 요소들을 사각형으로 간주하고 웹 페이지에 출력시킨다.
- 요소들을 박스 형태로 그리는 것을 박스 모델이라 한다.
- 박스는 배치, 색상, 경계 등의 속성을 가진다.
- 각 박스는 margin(바깥쪽 여백),border(경계선),padding(안쪽 여백)을 가진다.
- 경계선(border)
- 경계선과 내용 사이의 간격 : 안쪽여백 (padding)
- 요소와 요소 사이의 간격 : 바깥여백(margin)
- 스타일 측면에서 문서는 하나 이상의 엘리먼트 박스(body)들로 구성되어있다.
- 안쪽 박스 모델 영역은 바깥쪽 상위 박스 모델의 내용 영역 안으로 제한됨 (박스 안에 박스가 포함되어 있을 수 있음)
예) <div>상위박스<div>중간<div>제일안쪽</div></div> </div>
박스 모델 스타일 속성
| width | 100px | 글자 입력 영역 너비 |
| height | 30px | 글자 입력 영역 높이 |
| margin | 10px -상하좌우 모두 10 10px 20px -위,아래 10 좌/우 20 10px 20px 30px-위 10,좌/우 20, 아래 30 10px 20px 30px 40px-위 10,우-20,아래30,좌40(시계방향) |
경계선 바깥 외부 여백 크기 |
| padding | 10px auto(자동 조절) |
경계선 바깥 내부 여백 크기 |
| margin-top, margin-right, margin-left,margin-bottom | 10px -상하좌우 모두 10 10px 20px -위,아래 10 좌/우 20 10px 20px 30px-위 10,좌/우 20, 아래 30 10px 20px 30px 40px-위 10,우-20,아래30,좌40(시계방향) |
경계선 바깥 외부 여백 크기 (위치) |
| padding-top,padding-right,padding-left,padding-bottom | 10px auto(자동 조절) |
경계선 바깥 내부 여백 크기 (위치) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin_padding</title>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
/* 기본적으로 제공되는 값들을 초기화 */
}
p {
width: 300px;
text-align: center;
margin: 0px;
padding: 0px;
background-color:yellow;
border: 1px solid blue;
}
#target {
margin : auto;
padding-top : 10px;
padding-right : 20px;
padding-bottom: 30px;
padding-left: 40px;
background-color: lime;
border: 1px solid green;
}
</style>
</head>
<body>
<p>문단1</p>
<p id="target">문단2</p>
</body>
</html>
박스 모델인 div 등의 요소를 화면의 가운데에 배치하려면 margin: auto 를 활용하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box_model</title>
<style type="text/css">
div.test{
background-color:yellow;
width:200px;
padding:10px;
border: 5px solid red;
text-align: right;
margin:auto;
}
</style>
</head>
<body>
<div class="test">div요소</div>
</body>
</html>
경계선
border-style
- solid 실선, dahsed 점선, dotted 점선, double 이중선, hidden, none 기본값, inset 오목, outset 볼록, ridge 볼록선, groove 오목선
- border-top style, border-right-style, border-bottom-style, border-left-style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-style1</title>
<style type="text/css">
p {
border-width:5px; /* 테두리 두께 */
border-color:green;
/*border-radius: 5px; 테두리 모서리 */
}
</style>
</head>
<body>
<p style="border-style:none;">none</p>
<p style="border-style:dashed;">dashed</p>
<p style="border-top-style:dotted;border-bottom-style:solid;">dotted-solid</p>
<p style="border-style:double;">double</p>
<p style="border-style:groove;">groove</p>
<p style="border-style:ridge;">ridge</p>
<p style="border-style:inset;">inset</p>
<p style="border-style:outset;">outset</p>
</body>
</html>none
dashed
dotted-solid
double
groove
ridge
inset
outset
border-width : 경계선 굵기 지정 - 대체로 px 추천
- 5px, thick,medium,thin
- border-top-width, border-right-width, border-bottom-width,border-left-width
border-color : 경계선 색상 지정
- #ff0000, rgb(255,0,0), 등
-border-top-color, border-right-color,border-bottom-color,border-left-color
border : 경계선 유형 굵기유형 색상 (한꺼번에 지정)
border-radius : 경계선 모서리 반지름(둥글게 경계선 처리)
-border-top-left-radius, border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius
box-shadow : x,y,blur,color 로 그림자 만들어 줄 수있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border-style2</title>
<style type="text/css">
h1{
padding-bottom:5px;
border-bottom:3px solid #ccc;
}
p {
padding: 10px;
border: 2px dotted black;
}
p.green {
border-style:solid;
border-color: green;
}
div {
border: 2px solid red;
border-radius: 10px;
text-align: right;
}
#shadow{
width:300px;
height: 50px;
background-color: green;
box-shadow: 20px 10px 5px #666666;
}
</style>
</head>
<body>
<h1>박스 모델</h1>
<p>박스 모델은 실제 컨텐츠 영역, 박스와 컨텐츠 영역 사이의 여백인 패딩(padding),
박스의 테두리(border), 박스간의 여백인 마진(margin) 등의 요소로 구성되어 있다.</p>
<p class="green">경계선의 색상 : green</p>
<div>border-radius 속성 사용하면 둥근 경계선을 만들 수 있다.</div>
<div id="shadow"></div>
</body>
</html>
border-image 경계선 이미지 (테두리로 활용 가능)
border-image:url(주소) 크기 round/stretch;
- round : 영역을 채울 이미지 타일이 필요한 경우 이미지 패턴 조정
- stretch : stretch옵션은 이미지가 영역을 채우도록
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#borderimage1{
border: 10px solid;
padding: 15px;
border-image: url(../image/border.png) 30 round;
}
#borderimage2{
border: 10px solid;
padding: 15px;
border-image: url(../image/border.png) 30 stretch;
}
</style>
</head>
<body>
<h1>border image property</h1>
<p>border-image 속성은 주위의 경계로 사용할 이미지를 지정</p>
<p id="borderimage1">round옵션은 영역을 채울 이미지 타일이 필요한 경우 이미지 패턴 조정</p>
<p id="borderimage2">stretch옵션은 이미지가 영역을 채우도록 </p>
<p>원본 이미지 : </p>
<img alt="" src="../image/border.png">
<p><strong>Note : </strong> Internet Explorer 10 및 이전 버전은
이미지 테두리를 지원하지 않는다.</p>
</body>
</html>
표현 효과 스타일 속성
| display | 박스 모델 표시 유형값 예) block, inline,none,inline-block |
표시 유형 지정 |
| visibility | 숨김여부 예) visible, hidden | 엘리먼트의 공간 표시 여부 지정 |
| opacity | 투명도(0.0~1.0) | 엘리먼트 공간의 투명도 지정 |
| box-shadow | x축간격 y축간격 번짐크기 그림자크기 그림자색상 4px 4px 10px 6px orange |
박스 모델 영역에 그림자 효과 |
- display 속성값으로 'none' 지정하면 해당 공간(자식 엘리먼트 공간 포함)이 생략되어 화면에서 사라진다.
- visibility 속성값을 hidden으로 설정 (화면에 보이지 않도록 숨겨지면서 엘리먼트 내용 대신 빈 공간 표시)
- inline-block 속성 값 : 인라인 형식이면서도 블록 형식처럼 상하좌우 여백과 블록 공간의 폭과 높이를 설정하고자 하는 경우
컨테이너
- 공간 배치에서 상위 엘리먼트와 하위 엘리먼트의 관계는 중요
- 컨테이너 : 하위에 자식 엘리먼트를 포함하는 부모 엘리먼트의 공간 배치상의 역할(상위 엘리먼트 박스 공간) 으로 물건을 담는 상자처럼 하위 엘리먼트들을 자신의 공간 안에서 좌표를 통해 배치
- 컨테이너의 위치가 이동하면 포함된 자식 엘리먼트의 박스 공간도 같이 이동한다.
<body>
<div>AAA
<span>BBB</span>
</div>
</body>
정렬 방식
text-align
-left, right, center, justify
배경 설정
-배경 색상 : background-color
-배경 이미지: background-image:url('이미지 경로')
- background-size: cover; 이미지 원본 크기 유지 상태에서 이미지가 들어있는 요소의 가로,세로에 이미지를 맞춘다.
- fixed : 배경 위에 텍스트가 떠 있는 처리
- 고정 위치 : left bottom, left top, right bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
background-color: aqua;
background-repeat:no-repeat;
background-image:url("../image/autumn.jpg");
background-size: cover;
/* 이미지 원본 크기를 유지한 상태에서 이미지가 들어 있는 요소의 가로,세로에 이미지 맞춘다. */
}
</style>
</head>
<body>
<h1>배경이미지설정</h1>
<p>background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*fixed: 배경 위에 텍스트가 떠 있는 느낌처리
이미지의 고정 위치 : left top, left bottom, right bottom*/
body{
background: url("../image/autumn.jpg") no-repeat right bottom fixed;
}
div {
width: 300px;
padding: 20px;
border : 1px solid black;
}
</style>
</head>
<body>
<div class="bg">
<p>background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.
background-image 속성을 사용하면 원하는 곳에 배경 이미지를 삽입할 수 있습니다.</p>
</div>
</body>
</html>
하이퍼링크 스타일
- a:link ) 링크가 연결되어 있을 때 스타일
- a:visited ) 이미 방문한 링크 일 때 스타일
- a:hover ) 마우스 올라갈 때 스타일
- a:active ) 마우스 클릭 스타일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LINK</title>
<style type="text/css">
a:link{
color:red;
text-decoration:none;
}
a:visited{
color:green;
}
a:hover{
color:blue;
font-size:1.5em;
text-decoration:underline;
}
a:active{
text-decoration:line-through;
color:yellow;
}
</style>
</head>
<body>
<a href="http://google.com">사이트로 이동</a>
</body>
</html>
컨텐츠 영역 예시
- resize : both; 크기 조절 옵션으로 우측 하단에 조절 마크
- overflow : auto; 컨텐츠가 길어지면 스크롤바가 자동으로 생김
- height: auto; 내용에 맞춰 높이 자동 결정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>elem_size</title>
<style type="text/css">
#target1 {
width:100px;
height:50px;
background-color: yellow;
resize:both; /* 크기 조절 옵션 : 우측 하단에 조절 마크가 생긴다.*/
overflow:auto; /* 컨텐츠가 길어지면 스크롤바가 생긴다.*/
}
#target2 {
width: 100px;
height: auto; /* 컨텐츠에 맞춰서 높이 영역이 자동 결정 */
background-color: aqua;
}
</style>
</head>
<body>
<p id="target1">문단 문단 문단 문단 문단 문단 문단 문단</p>
<div id="target2">구역 구역 구역 구역 구역 구역 구역 구역 구역 구역 구역 구역</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>liststyle1</title>
<style type="text/css">
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
list-style-position: inside;
}
ul.c {
list-style-type:none;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="c">
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
제이쿼리 모바일에서 많이 사용되는 기법
<ul>
<li><a href="#"></a></li>
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>liststyle2</title>
<style type="text/css">
ol {
list-style:none;
text-align:center;
border-top:1px solid red;
border-bottom:1px solid red;
padding: 10px 0; /*위,아래 10px 좌,우 0px */
}
ol li{
display: inline; /* li는 block요소이지만 inline으로 변경하여 가로라인으로 배치 */
text-transform: uppercase;
padding:0 10px;
letter-spacing: 10px; /* 글자 간격 */
}
ol li a{
text-decoration:none;
color:black;
}
ol li a:hover{
text-decoration:underline;
}
div {
display:inline;
float:right;
/*화면에서 오른쪽에서 왼쪽방향으로 배치 */
border:1px solid red;
}
</style>
</head>
<body>
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ol>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>