Web 3일차 2(css 블록)
블록 레벨 요소
요소를 삽입했을 때 혼자 한 줄을 차지하는 요소
요소의 너비가 100%
예) <div>, <p> 등
인라인 레벨 요소
줄을 차지하지 않는 요소
화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지
공간에는 다른 요소가 올 수 있음
예) <img>, <strong> 등
박스 모델
실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨.
개발자 도구 창에서 박스 모델 확인 가능
웹 브라우저에서 웹 문서 열기
박스 모델 확인할 부분을 마우스 오른쪽 버튼으로 누른 뒤 [검사] 선택
개발자 도구 창 위에서 [Computed] 탭 클릭
해당 부분의 박스 모델이 그림으로 표시됨
width, height 속성
실제 콘텐츠 영역의 크기 지정
<style>
div{ /*바뀜*/
width: 500px;
height: 300px;
}
b{ /*글자에 의해 결정 크기를 줘도 변하지 않음*/
width: 1000px;
height: 500px;
}
</style>
box-sizing 속성
실제 박스 모델의 너비를 계산할 때 어디까지 포함할지 결정하는 속성
<!DOCTYPE html>
<html lang="ko">
<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: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>보더를 주면 1px 늘어나기 때문에 2px 씩 줄여야 한다.
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
border: 1px solid black;
width: 198px;
height: 198px;
background-color: blue;
}
</style>
padding
<style>
.box1, .box2{
color: white;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
border: 1px solid black;
padding: 10px;
width: 178px;
height: 178px;
background-color: blue;
}
</style>패낟아 눌오넌 먼쿰 줄이자
box-sizing
<style>
.box1, .box2{
color: white;
}
.box1{
box-sizing: border-box; /*테두리 기준*/
/* box-sizing: content-box; 컨텐츠 기준 으로 잡으라 */
padding: 10px;
width: 200px;
height: 200px;
background-color: red;
}
.box2{
border: 1px solid black;
padding: 10px;
width: 178px;
height: 178px;
background-color: blue;
}
</style>
box-shdow 속성
선택한 요소에 그림자 효과 내기
흐림정도 : 흐려짐
번짐정도 :너비까지 번지는것, 번져도 흐려짐
.container{
border: 1px solid black;
width: 500px;
height: 500px;
background-color: grey;
}.side{ /*container 안에 있다.*/
width: 100px;
height: 100%; /*부모 요소 containter의 content 영역에 영향을 받는다.*/
background-color: white;
box-shadow: 1px 0px 10px 1px black;
}
박스 모델의 값 지정 방향
4개 방향의 값을 한꺼번에 지정할 때는 방향 순서를 지켜야 함
top 🡪 right 🡪 bottom 🡪 left
margin 속성
현재 요소 주변의 여백
마진을 이용하면 요소와 요소 간의 간격 조절 가능
기본적으로 대칭
.container{
margin: 5px 10px 20px 25px;
border: 1px solid black;
width: 500px;
height: 500px;
background-color: grey;
}
.container{
margin: 5px 10px 20px;
border: 1px solid black;
width: 500px;
height: 500px;
background-color: grey;
}right 값을 대칭시킨다.
대칭전
대칭후 (좌우는 오토로 잡힌다 위 아래는 안된다.)
.container{
margin: 5px auto;
border: 1px solid black;
width: 500px;
height: 500px;
background-color: grey;
}
border-style 속성
기본 값이 none 🡪 화면에 테두리 표시안됨
테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정
border-width 속성
테두리 두께 지정
border-color 속성
테두리 색상 지정
border 속성
테두리 스타일과 두께, 색상 등을 묶어 표기
border-top이나 border-right처럼 방향을 함께 써서 4개 방향의
스타일을 따로 지정할 수 있음
순서는 상관없음
.container{
margin: 5px auto;
border-left: 5px solid black; /*보더 왼쪽에만 5px*/
width: 500px;
height: 500px;
background-color: grey;
}
마진 중첩 현상
요소를 세로로 배치할 경우,
마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐지는 것
요소를 가로로 배치할 경우에는 상관없음
언제 마진 패딩을 써야하는가?
a{
margin: 0px 10px;
padding: 10px 30px;
text-decoration: none;
font-size: 30px;
background-color: greenyellow;
}
<style>
a{
margin: 0px 10px;
border: 1px solid black;
padding: 10px 30px;
width: 100px;
height: 50px;
background-color: greenyellow;
text-decoration: none;
font-size: 30px;
}
</style>순서대로 하면 편하지 않을까??