박스 모델의 방향
- top : 윗 부분
- right : 오른쪽
- bottom : 아랫 부분
- left : 왼쪽
테두리 스타일을 지정하는 속성
- border-style 속성
- 기본값은 none
- border-style 속성값
- none : 테두리가 없음 / 기본값
- hidden : 테두리를 감춤 / 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않음
- solid : 테두리를 실선으로 표시함
- dotted : 테두리를 점선으로 표시함
- dashed : 테두리를 짧은 직선으로 표시함
- double : 테두리를 이중선으로 표시함 / 두 선 사이의 간격이 border-width 값이 됨
- groove : 테두리를 창에 조각한 것처럼 표시함 / 홈이 파인 듯 입체 느낌
- inset : 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시됨
표에서 border-collapse: collapse일 경우 groove와 똑같이 표시됨 - outset : 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시됨
표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시됨 - ridge : 테두리를 창에서 튀어나온 것처럼 표시함
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테두리 스타일 지정</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
text-align: center;
font-size:20px;
line-height:100px;
border-width:5px;
}
#box1 {
border-style: solid;
}
#box2 {
border-style: dotted;
}
#box3 {
border-style: dashed;
}
</style>
</head>
<body>
<div id="box1">실선</div>
<div id="box2">점선</div>
<div id="box3">짧은 직선</div>
</body>
</html>-(결과) :
테두리 두께를 지정하는 속성
- border-width 속성
- 테두리 두께를 지정할 수 있음
- 크기를 직접 입력하거나 예약어 중에서 선택할 수 있음
- 1개 값만 지정할 수도 있고 2개, 3개, 4개를 각각 다르게 지정할 수도 있음
- 기본형 :
border-width: <크기> | thin | medium | thick
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테두리 두께 지정</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border-style:solid;
}
#box1 {
border-width: 2px;
}
#box2 {
border-width: thick thin;
}
#box3 {
border-width: thick thin thin;
}
#box4 {
border-width: 10px 5px 5px 10px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>
</html>-(결과) :
테두리 색상을 지정하는 속성
- border-color 속성
- 박스 모델에서 테두리 색상을 지정할 수 있음
- border-color 속성을 사용하여 4개 방향의 테두리 색상을 한꺼번에 지정할 수도 있고,
border-top-color처럼 border와 color 사이에 테두리 방향을 넣어 주면 색상을 하나씩 지정할 수도 있음
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테두리 색상 지정</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border-style:dashed;
border-width:2px;
}
#box1 {
border-color: red;
}
#box2 {
border-top-color: blue;
border-left-color: red;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>-(결과) :
테두리 스타일을 묶어 지정하는 속성
- border 속성
- 테두리 스타일과 두께, 색상을 한꺼번에 표현할 수 있음
- 테두리의 색상과 두께, 스타일의 속성값 순서는 상관 없음
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테두리 스타일 묶어서 지정하기</title>
<style>
h1 {
padding-bottom: 5px;
border-bottom: 3px solid rgb(75, 70, 70);
}
p {
padding: 10px;
border: 3px dotted blue;
}
</style>
</head>
<body>
<h1>예제</h1>
<p>This is an Exmaple</p>
</body>
</html>-(결과) :
둥근 테두리를 만드는 속성
- border-radius 속성
- 박스 모델의 테두리를 둥글게 만듦
- 꼭짓점 부분에 원이 있다고 가정하여 둥글게 처리함
- 원의 반지름(radius)를 이용하면 둥근 정도를 나타낼 수 있음
- 이미지 요소의 너비와 높이를 똑같이 만든 후 border-radius의 반지름값을 너비나 높이의 50%로 지정하면 이미지를 원으로 만들 수 있음
- 기본형 :
border-radius: <크기> | <백분율>
- border-radius 속성값
- <크기> : 반지름 크기를 px, em의 단위와 함께 수치로 표시함
- <백분율> : 현재 요소의 크기를 기준으로 비율(%)로 지정함
-(예시) 1:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>둥글게 표시하기</title>
<style>
#round {
border-radius: 25px;
}
</style>
</head>
<body>
<img src="example.jpg">
<img id="round" src="example.jpg">
</body>
</html>-(결과) 1:
-(예시) 2:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 원 만들기</title>
<style>
#circle {
border-radius:50%;
}
</style>
</head>
<body>
<img src="example.jpg">
<img id="circle" src="example.jpg">
</body>
</html>-(결과) 2:
꼭짓점마다 따로 둥글게 처리하기
- 꼭짓점 4개를 모두 다르게 지정하려면 border와 radius 사이에 위치를 나타내는 예약어를 사용하면 됨
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>꼭짓점마다 따로 둥글게 처리</title>
<style>
div {
width:200px;
height:150px;
}
#round1 {
border:2px solid blue;
border-top-left-radius:20px;
border-top-right-radius:20px;
}
</style>
</head>
<body>
<div id="round1"></div>
</body>
</html>-(결과) :
