-
CSS와 박스 모델
블록 레벨 요소
요소를 삽입했을 때 혼자 한 줄을 차지하는 요소
인라인 레벨 요소
줄을 차지하지 않는 요소
화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 ( img,strong 등등)
박스 모델
실제 콘텐츠영역, 패딩, 박스의 데두리, 그리고 마진등의 요소로 구성됨
(웹 페이지에서 f12 누르고 올바르게 스타일 적용한지 확인할수 있음)
width, height 속성
실제 콘텐츠 영역의 크기 지정
예제) width, height (퍼센트로 웹 페이지 크기마다 변함)
<!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> .box1{ width: 400px; height: 100px; background: #ff6a00; } .box2{ /* 웹 페이지의 크기에 따라 변화한다. */ width: 50%; height: 100px; background: #0094ff; } div{ margin: 10px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>display 속성
display:block - 줄바꿈이 들어가 다른줄을 밀어내고 혼자 한 줄 차지
display:inline - 줄바꿈 없이 한줄에 나란히 배치
display:inline-block - inline처럼 줄바꿈 없이 한줄에 배치되고 너비,높이,마진,패딩 등 지정이 가능하다
테두리 관련 속성들
border-style 속성
테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정
border-width 속성
테두리 두께 지정
예제) border (실선,점선,선으로 된 점선)
<!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> div{ width: 200px; height: 100px; /* border-width : 테두리 굵기 */ border-width: 5px; margin: 15px; display: inline-block; } .box1{ /* border-style : 선종류 */ border-style: solid; } .box2{ /* border-style : 선종류 */ /* dotted : 점선 */ border-style: dotted; } .box3{ /* border-style : 선종류 */ /* dashed : 선으로 된 점선 */ border-style: dashed; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>border-color 속성
테두리 색상 지정
border 속성
데두리 스타일과 두께, 색상 등을 묶어 표기
예제) border (테두리 두께,색상)
<!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> div{ width: 200px; height: 100px; border-style: dashed; margin: 15px; /* border-width: 2px;는 네방향 적용 */ /* border-width: thick thin; 가로로 두껍고 세로로 얇게 표시 */ /* border-width: thick thin; */ /* top right bottom left 순서대로 적용 */ border-width: 5px 10px 15px 20px; } .box1{ border-color: red; } .box2{ border-color: blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>border-radius 속성
박스 모서리 부분을 둥글게 처리
예제) border radius (모든 모서리 적용)
<!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> div{ width: 300px; /* height: 1200px; */ height: 200px; margin: 20px; display: inline-block; } .round{ border: 2px solid red; border-radius: 20px; } #bg{ /* background: url(images/pic1.jpg); */ background: url(images/pic1.jpg) no-repeat; /* cover는 테두리 안에 사진이 잘려서 꽉 채워줌 */ /* background-size: cover; */ /* background-size: 100% 100%; 늘려서 꽉 채워주기 때문에 사진이 깨짐 */ background-size: 100% 100%; } </style> </head> <body> <div class="round"></div> <div class="round " id="bg"></div> </body> </html>가로 반지름 크기와 세로 반지름 크기를 함께 지정
예제) border radius (한쪽 모서리)
<!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> div{ border: 2px solid black; width: 200px; height: 100px; background: #ffd800; margin: 15px; display: inline-block; } .round1{ /* 100px 50px : 가로 세로 크기만큼 둥글게 */ /* border-top-left-radius는 위 왼쪽 둥글게 */ border-top-left-radius: 100px 50px; } .round2{ /* border-top-right-radius 오른쪽 아래 둥글게 */ border-bottom-right-radius: 50% 30%; } .round3{ /* border-top-right-radius 위 왼쪽 둥글게 */ border-top-right-radius: 50px; } </style> </head> <body> <div class="round1"></div> <div class="round2"></div> <div class="round3"></div> </body> </html>box-shdow 속성
선택한 요소에 그림자 효과 내기
예제)box-shadow (그림자 방향)
<!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> div{ width: 200px; height: 100px; border: 2px solid; display: inline-block; margin: 15px; border-radius: 20px; } .box1{ /* 가로 세로 흐림 번짐 그림자 색상을 순서대로 표시 */ box-shadow: 12px -12px 5px 0px black; } .box2{ /* 가로 세로 흐림 번짐 그림자 색상을 순서대로 표시 */ box-shadow: -12px 12px 15px 10px black; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>'CSS' 카테고리의 다른 글
HTML5와 시맨틱 태그 (0) 2023.06.22 CSS 레이아웃 (0) 2023.06.22 색상과 배경을 위한 스타일 (0) 2023.06.22 텍스트 관련 스타일 (0) 2023.06.22 css 기초 (0) 2023.06.22