display 속성 및 border 속성
블록 레벨 & 인라인
-
블록 레벨 요소
- 자기가 속한 영역의 너비를 모두 차지
- div, p, h1 등 -
인라인 요소
- 자기에게 필요한 만큼의 공간만 차지
- span, a 등 -
div 요소 → 인라인
-div{ display: inline; } -
a 요소 → 블록 레벨
-a{ display: block; }
display 속성
- 레이아웃 결정할 때도 사용
- inline 속성값 : 인라인으로 처리
- block 속성값 : 블록 레벨로 처리
- inline-block 속성값 : 인라인으로 배치하되 블록 레벨 요소의 속성을 추가할 수 있도록 처리
- none 속성값 : 표시 X
border 속성
- 요소가 차지하는 영역에 테두리를 그림
- 테두리의 두께, 모양, 크기 등을 함께 지정 가능 (단축 속성)
- border-color 하위 속성 : color 정의 방식과 동일
- border-width 하위 속성 : thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위
- border-style 하위 속성 : none, solid, dotted, dashed 등
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>블록 레벨 / 인라인</title>
<style>
div{ border: 3px solid orange;
display: none
}
p{ border: 5px solid magenta;
display: inline;
}
span{ border-width: 5px;
border-style: dotted;
border-color: rgb(100%, 50%, 25%);
display: inline-block;
}
</style>
</head>
<body>
<div>블록 레벨</div>
<p>블록 레벨 문단</p>
<span>인라인</span>
</body>
</html>
ISTJ의 재미없는 velog