반응형
블록레벨 - 일정 범위를 포괄해서 적용
(div, p, h1 등)
인라인 레벨 - 자기에게 필요한 영역까지만 적용
(span, a 등)
display 속성
inline - 인라인 처리
block - 블록 레벨 처리
inline-block - 인라인 배치, 블록 레벨 요소 속성 추가
none - 디스플레이 표시x
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
예시)
<style>
div{
border: 3px solid red;
display: inline;
}
-------------------------------------------------
border 속성
-테두리, 단축속성(두께, 모양, 크기)이라고도 한다.
예시)
span{ border: 2px solid green; }
두께가 2px 직선(solid) 초록(green) 테두리
-------------------------------------------------
border 하위속성
border-color - color정의 방식과 동일
border-width - thin, medium, thick, / px, em, rem
border-style - none(기본값), solid(직선), dotted(점선), dashed(긴 점선)
예시)
<style>
div{ border: 3px solid red; }
span{
border-width: 5px;
border-style: dashed;
border-color rgb(100%, 50%, 0%);
}
</style>
.
.
<body>
<div>3px 실선 빨간색</div>
<span>5px 점선 색깔조합 </span>
</body>
|
cs |
반응형
'coding > css(sass,tailwind,materialUi)' 카테고리의 다른 글
| css 풀배경으로 설정하기 (0) | 2022.07.30 |
|---|---|
| css 글 센터설정 (0) | 2022.07.30 |
| css 글자세팅(글꼴, 크기, 정렬, 색상) (0) | 2022.06.23 |
| css선택자, 우선순위 (0) | 2022.06.23 |
| css연결양식 (0) | 2022.06.23 |