YTCW

9. CSS (border, style, width, color, radius) 본문

카테고리 없음

9. CSS (border, style, width, color, radius)

YTCW 2024. 8. 8. 13:51 
border-width: <크기> | thin | medium | thick

1. border-style 속성

테두리 스타일

border-style 속성의 기본값 :  none

-> 속성값을 따로 지정하지 않으면 테두리 색상 두께를 지정하더라도 화면에 표시x

none 테두리❌ : 기본값
hidden 테두리 감추기
표에서 border-collapse: collapse일 경우 다른 테두리도 표시❌  
solid 테두리를 실선으로 표시
dotted 테두리를 점선으로 표시
dashed 테두리를 짧은 직선으로 표시
double 테두리를 이중선으로 표시, border-width값 : 두 선 사이의 간격
groove 테두리를 창에 조각한 것처럼 표시, 홈이 파인 듯한 입체 느낌
inset 표에서 border-collapse: seperate일 경우 → 전체 박스 테두리가 창에 박혀 있는 것 처럼 표시
표에서 border-collapse: collapse일 경우 groove와 똑같이 표시  
outset 표에서 border-collapse: collapse일 경우 → 전체 박스 테두리가 창에서 튀어나온 것처럼 표시
표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시  
ridge 테두리를 창에서 튀어나온 것처럼 표시

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		div {
			width:100px;
			height:100px;
			display:inline-block;
			margin:15px;	
			text-align: center;
			font-size:10px;
			line-height:100px;		
			border-width:5px;  /* 테두리 굵기 */
		}
		#box1 { border-style:solid; }  /* 실선 */
		#box2 { border-style:dotted; }  /* 점선 */
		#box3 { border-style:dashed; }  /* 짧은 점선 */
		#box4 { border-style:double; }
		#box5 { border-style:groove; }
		#box6 { border-style:inset; } 
		#box7 { border-style:outset; } 
		#box8 { border-style:ridge; } 
	</style>
</head>
<body>
	<div id="box1"> 실선 테두리 </div>
	<div id="box2"> 점선 테두리 </div>
	<div id="box3"> 짧은 직선 테두리</div>
	<div id="box4"> 이중선 테두리</div>
	<div id="box5"> groove 테두리</div>
	<div id="box6"> inset 테두리</div>
	<div id="box7"> outset 테두리</div>
	<div id="box8"> ridge 테두리</div>
</body>
</html>

 

2. border-width 

테두리 두께 지정

직접 입력 or 예약어 사용

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>
	/* 네 방향 모두 2px */ 
	<div id="box1"> </div>

	/* top & bottom - thick, left & right - thin */
  <div id="box2"> </div>	

	/* top - thick, right - thin, bottom - thin, left - thin */
	<div id="box3"> </div>

	/* top - 10px, right - 5px, bottom - 5px, left - 10px */
	<div id="box4"> </div>	  
</body>
</html>

 

3. border-color 속성

테두리 색상 지정

- 상하좌우 4개 방향의 테두리 색상을 한꺼번에 지정 가능

or 값을 1~4개를 각각 다르게 지정 가능 ex) border-top-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; /* 테두리 굵기 - 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>

 

4. border 속성

테두리 스타일을 묵어 지정하는 속성

- 테두리 스타일/ 두께/ 색상 속성을 한꺼번에 표현 (순서 x)

- 상하좌우 4개 방향의 테두리 색상을 한꺼번에 지정 가능

- or 값을 1~4개를 각각 다르게 지정 가능 ex) border-top, border-right

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
    body {
      width: 400px;
    }
		h1 {
			padding-bottom: 5px;
			border-bottom: 3px solid rgb(75, 70, 70); /* 아래쪽 테두리만 3px짜리 회색 실선*/
		}
		p {
			padding: 10px;
			border: 3px dotted blue; /* 모든 테두리를 3px짜리 파란 점선 */
		}
	</style>
</head>
<body>
	<h1>박스 모델</h1>
	<p>박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다. </p>	
</body>
</html>

 

5. border-radius

둥근 테두리를 만드는 속성

- 박스 모델의 꼭짓점 부분에 원이 있다고 가정하여 둥글게 처리

border-radius: <크기> | <백분율>
<크기> 반지름 크기를 px, em 단위와 함께 수치로 표시
<백분율> 현재 요소의 크기를 기준으로 비율(%) 지정

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 200px;
      height: 200px;
    }
    #round {
      border-radius: 25px;
    }
    #circle {
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <img src="./ditto-lotte.jpg" />
  <img id="round" src="./ditto-lotte.jpg" />
  <img id="circle" src="./ditto-lotte.jpg" />
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		div {
      width:200px;
      height:100px;
      display:inline-block;
      margin:15px;
      background:#ffd800;
      border:2px solid #222;
    }
    .round1{
			/* 네 군데 꼭짓점을 똑같은 크기로 라운딩 */
      border-radius : 50px/30px;  
    }
    .round2{
			/* 오른쪽 아래 꼭짓점을 가로 50%, 세로 30% 크기로 라운딩 */
      border-bottom-right-radius : 50% 30%;  
    }
    .round3{
			/* 왼쪽 위 꼭짓점을 가로 50px, 세로 30px 크기로 라운딩 */
      border-top-left-radius: 50px 30px;  
    }
    .round4{
			/* 값이  하나 뿐이면 가로 세로 똑같이 30px 크기로 라운딩  */
      border-bottom-left-radius: 30px;  
    }
	</style>
</head>
<body>
  <div class="round1"></div>
  <div class="round2"></div>
  <div class="round3"></div>
  <div class="round4"></div>
</body>
</html>