border 굵기/ 종류/ 색상 ⇒ 파라미터가 3개
파라미터가 1개 이상일 때는 띄워쓰기로 구분함
기본 세팅하기
<!DOCTYPE html> <html lang="en"> <head> <style> div { border: 3px solid skyblue; background-color: aliceblue; height: 50px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
1) display : inline 사용하기
자기 크기만큼만 사이즈를 차지함
<!DOCTYPE html> <html lang="en"> <head> <style> div { border: 3px solid skyblue; background-color: aliceblue; height: 50px; /* 높이 부여하기-> 높이만큼 늘어남*/ display: inline; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
2) display: block 사용하기
div처럼 한 줄을 다 차지하게 바뀜
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> span { border: 3px solid skyblue; background-color: aliceblue; height: 100px; width: 100px; display: block; } </style> </head> <body> <span>가</span> <span>나</span> <span>다</span> <span>라</span> <span>마</span> </body> </html>
Share article
