블럭 레벨 요소와 인라인 레벨 요소
블럭 레벨 요소
- 한 줄 전체를 차지하는 요소 (박스 모델이라고도 함)
- 같은 줄에 다른 요소가 올 수 없음
- 크기 조절 가능 (width / height)
- 자동 줄 개행 (한 줄의 모든 공간을 차지하기 때문)
- 종류 : div, h1 ~ h6, 목록 태그, 테이블 태그, form 태그 등등
- 블럭 레벨 요소는 마진, 보더, 패딩, 콘텐트 영역을 포함하고 있음
- margin : 블럭 레벨 요소들 사이 비워져 있는 공간
- border : 블럭 레벨 요소의 외곽선 두께
- padding : border와 content 사이의 공간
- content : 실제 내용이 들어 있는 공간
인라인 레벨 요소
- 한 줄에서 일부분만 차지하는 요소 (자신의 요소만 크기로 잡음)
- 한 줄에 여러 요소가 올 수 있음
- 크기 조절 불가능
- 자동 줄 개행을 안함 (필요한 요소 크기만큼만 잡기 때문)
- 종류 : span, a, input, 글자형식 태그 등등
height, width
- 컨텐츠가 차지하고 있는 영영의 크기 조절할 수 있는 속성
👨🎓 작성 방법
선택자{width: 숫자(단위); height: 숫자(단위);}
✍ 작성 예시
<style> #div1 { width: 100px; height: 100px; border: 1px solid black; } </style> <div id="div1"></div>
display
- 각 태그들의 block, inline 속성들을 변경할 수 있는 속성
| 속성값 | 의미 |
|---|---|
| none | - 박스가 생성되지 않도록 함 - 생성되지 않기 때문에 공간도 차지 하지 않음 |
| block | - block 속성으로 변경 - 크기 조절 가능 - 자동 줄개행 |
| inline | - inline 속성으로 변경 - 크기 조절 불가능 - 자동 줄개행 X |
| inline-block | - 텍스트: line 이지만 영역표시: block 단위 처리 - 크기 조절 가능 - 자동 줄개행X |
✍ 작성 예시
<head>
<meta charset="UTF-8">
<style>
div>* {
width: 200px;
height: 200px;
border: 1px solid black;
}
/* 생성X, 공간 차지 X*/
#none {
display: none;
background-color: antiquewhite;
}
/* inline -> block : 크기 조절 가능 / 자동 줄 개행 */
#block {
display: block;
}
/* block -> inline : 크기 조절 X / 자동 줄 개행 X */
#inline{
display: inline;
}
/* 크기 조절 가능 / 자동 줄 개행 */
#inline-block{
display: inline-block;
}
</style>
</head>
<body>
<div>
<div id="none">none</div>
<span id="block">block</span>
<div id="inline">inline</div>
<div id="inline-block">inline-block</div>
</div>
</body>👉 적용 결과
border-style
- 테두리 스타일 지정
| 속성값 | 의미 |
|---|---|
| none | 테두리가 나타나지 않음 (default 값) |
| hidden | 테두리가 나타나지 않음 (none과 같음) |
| dashed | 짧은 (dotted보다 긴 점선) 선으로 표시 |
| dotted | 점선 테두리 |
| double | 두 개의 실선 |
| groove | 테두리가 안으로 파진것처럼 보이는 선 |
| inset | 테두리를 포함한 컨텐츠 영역이 안으로 들어간것처럼 보임 |
| outset | 테두리를 포함한 컨텐츠 영역이 밖으로 튀어나온것처럼 보임 |
| ridge | 테두리가 밖으로 튀어나온것처럼 보임 |
| solid | 기본 실선 |
✍ 작성 예시
```html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
div>* {
width: 100px;
height: 100px;
background-color: white;
display: inline-block;
text-align: center;
line-height: 100px
}
#div1{
border-style: none;
background-color: aqua;
}
#div2{
border-style: hidden;
background-color: aqua;
}
#div3{
border-style: dashed;
}
#div4{
border-style: dotted;
}
#div5{
border-style: double;
}
#div6{
border-style: groove;
}
#div7{
border-style: inset;
}
#div8{
border-style: outset;
}
#div9{
border-style: ridge;
}
#div10{
border-style: solid;
}
</style>
</head>
<body>
<div>
<div id="div1">none</div>
<div id="div2">hidden</div>
<div id="div3">dashed</div>
<div id="div4">dotted</div>
<div id="div5">double</div> <br>
<div id="div6">groove</div>
<div id="div7">inset</div>
<div id="div8">outset</div>
<div id="div9">ridge</div>
<div id="div10">solid</div>
</div>
</body></html>👉 적용 결과
border-width
- 테두리의 두께를 정하는 속성
| 속성값 | 의미 |
|---|---|
| thin | 얇게 |
| medium | 중간크기 |
| thick | 두껍게 |
👨🎓 작성 방법
선택자 { border-[위치]-width : 숫자(단위) 또는 속성값;}
✍ 작성 예시
<style>
#div1{
width: 100px;
height: 100px;
border-style: solid;
border-top-width: 10px;
border-left-width: 20px;
border-right-width: 30px;
border-bottom-width: 40px;
}
</style>border-color
- 테두리의 색상을 지정하는 속성
👨🎓 작성 방법
선택자 { border-[위치]-color : 색상 ; }
✍ 작성 예시
<style>
#div1{
width: 100px;
height: 100px;
border-style: solid;
border-top-color: red;
border-left-color: blue;
border-right-color: yellow;
border-bottom-color: green;
}
</style>border
- 테두리의 두께, 스타일, 색상을 한번에 지정할 수 있는 속성
👨🎓 작성 방법
선택자 { border-[위치] : 두께 스타일 색상; }
✍ 작성 예시
<style>
#div1{
width: 100px;
height: 100px;
border: 3px solid red;
}
</style>border-radius
- 테두리의 모서리를 둥글게 하는 속성
- 위치 : top-left , top-right, bottom-left, bottom-right
👨🎓 작성 방법
선택자 { border-[위치]-radius : 숫자(단위); }
✍ 작성 예시
<style>
#div1{
width: 100px;
height: 100px;
border: 3px solid red;
border-radius: 50px;
}
</style>여백 스타일
- 여백은 블럭 요소의 상하좌우에 빈 공간을 두는것을 의미
- 요소끼리 너무 인접해 있으면 디자인적으로 빽빽해 보일 뿐만 아니라 터치 환경에서 정확한 터치 입력도 어려움
margin
- 요소의 바깥쪽에 배치되는 여백이며, 외부의 부모나 형제 사이에 삽입되는 빈 공간
- 요소의 크기에서 제외
👨🎓 작성 방법
선택자 {margin-[위치] : 숫자(단위) ; }
✍ 작성 예시
선택자 { margin : 200px; } -- 위,아래,양옆 모두 100px씩 margin값 부여 선택자 { margin : 20px 30px 40px 50px; } --위 오른쪽 아래 왼쪽 순 선택자 { margin : 20px 30px 50px ;} -- 위 20 / 오른쪽,왼쪽 30 / 아래 50px 선택자 { margin : 0px auto; } -- 위 아래 0 / 양옆은 자동으로 조절해서 중앙으로
padding
- 요소의 border와 content 사이에 공간
- 요소의 크기에 포함
👨🎓 작성 방법
선택자 {padding-[위치] : 숫자(단위) ; }
✍ 작성 예시
선택자 { padding : 20px 30px 40px 50px; } --위 오른쪽 아래 왼쪽 순
box-sizing
- 요소들의 크기를 어떠한 영역까지 포함할 것인지를 결정하는 속성
| 속성값 | 의미 |
|---|---|
| content-box | 콘텐츠 영역으로 설정 (default 값) |
| border-box | border까지 영역으로 설정 |
👨🎓 작성 방법
선택자 {box-sizing : 속성값 ; }
✍ 작성 예시
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
div div {
border: 20px solid black;
width: 200px;
height: 200px;
padding: 30px;
margin: 20px;
}
#div1 {
/* 200x200: border+padding+content 크기*/
box-sizing: border-box;
}
#div2 {
/* 200x200: content 크기*/
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
</body></html>👉 적용 결과
포지셔닝
- 페이지 안 요소들을 원하는 위치에 배치하는 속성
- position 스타일, float 스타일이 있음
position
- 페이지의 요소들을 자유롭게 배치해 주는 속성
- top, left, right, bottom 으로 위치 지정
| 속성값 | 의미 |
|---|---|
| static | - 요소를 문서의 흐름에 맞춰 배치 (default) - 위치가 지정되지 않음 |
| relative | - 이전 요소와 자연스럽게 연결해 배치 , 위치 지정 가능 - 현재 자신의 위치로부터 배치 |
| absolute | - 원하는 위치를 지정해 배치 - 현재 자신의 위치와는 상관 없이 배치 - 기본은 브라우저 기준 - top, left 등의 값을 주지 않게 되면 부모의 content 부터 시작 - 부모의 position 스타일이 relative인 경우: 부모 기준으로 설정 |
| fixed | - 지정한 위치에 고정 배치 - 기본은 브라우저 기준 |
👨🎓 작성 방법
선택자 { position : 속성값 [top: 숫자(단위)]; [left:숫자(단위)]; [right:숫자(단위)]; [bottom:숫자(단위)]; }
float
- 페이지 내의 요소 위치를 왼쪽이나 오른쪽으로 지정하는 속성
| 속성값 | 의미 |
|---|---|
| right | 오른쪽 배치 |
| left | 왼쪽 배치 |
| none | 배치 값을 설정하지 않음 |
👨🎓 작성 방법
선택자 { float : 속성값; }
✍ 작성 예시
<head>
<meta charset="UTF-8">
<style>
.f{
border: 3px black solid;
width: 100px;
height: 100px;
}
#f-test1{
background-color: blue;
float: left;
}
#f-test2{
background-color: green;
float: left;
}
/*test1, test2가 float로 띄어져 있고 그 밑(test1)으로 test3이 들어가있다.*/
#f-test3{
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<div id="f-test1" class="f"></div>
<div id="f-test2" class="f"></div>
<div id="f-test3" class="f"></div>
</div>
</body>👉 적용 결과
clear
- 페이지에 float 설정이 되어 있으면 그 속성이 그대로 다음 요소에 영향을 미치는데 이를 초기화 하는 속성
| 속성값 | 의미 |
|---|---|
| right | 오른쪽 배치 취소 |
| left | 왼쪽 배치 취소 |
| none | 설정하지 않음 (앞에 내용 그대로 적용) |
| both | 두 개 다 취소 함 |
👨🎓 작성 방법
선택자 { clear : 속성값; }
✍ 작성 예시
<head>
<meta charset="UTF-8">
<style>
.f{
border: 3px black solid;
width: 100px;
height: 100px;
}
#f-test1{
background-color: blue;
float: left;
}
#f-test2{
background-color: green;
float: left;
}
/*test1, test2가 float 속성 초기화*/
#f-test3{
background-color: red;
clear: left;
}
</style>
</head>
<body>
<div id="wrap">
<div id="f-test1" class="f"></div>
<div id="f-test2" class="f"></div>
<div id="f-test3" class="f"></div>
</div>
</body>👉 적용 결과
visibility
- 페이지에 특정 속성을 보이거나 보이지 않게 하는 속성
- display와의 차이점
- display: none -> 공간X
- visibility: hidden -> 공간은 존재
| 속성값 | 의미 |
|---|---|
| visible | default, 요소가 화면에 보임 |
| hidden | 요소를 화면에서 안보이게 하지만 페이지의 공간은 차지하고 있음 |
👨🎓 작성 방법
선택자 { visibility : 속성값; }
z-index
- 페이지 안의 요소들을 순서대로 위로 쌓는 속성
- 속성값이 크면 위에, 작으면 밑에 위치 시키는 속성
👨🎓 작성 방법
선택자 { z-index : 속성값; }
over-flow
- 표현하는 컨텐츠가 넘쳤을때 표현하는 기법
| 속성값 | 의미 |
|---|---|
| scroll | 가로 세로 스크롤이 무조건 생김 |
| auto | 스크롤이 내용에 따라 생김 |
| hidden | 넘치는 것은 보여주지 않음 |
| visible | 기본 값 (넘치더라도 보여줌) |
👨🎓 작성 방법
선택자 { overflow : 속성값; }
개발자로 매일 한 걸음