728x90
반응형
display 속성은 HTML요소 (Element)들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성
- dispaly: inline; 텍스트처럼
- dispaly: block; 상자처럼
inline 요소들 <span>, <a>, <img>, <strong>
- 기본적으로 옆으로 쭉 나열 되다가, 공간이 모자라면 다음 줄로 넘어감.
block 요소들 <div>, <p>
- width, height으로 크기를 설정할수 있고, 옆에 공간이 남아도 다음 줄로 넘어감.
inline-block속성은 위 두가지의 특징을 모두 가짐,
inline처럼 텍스트 흐름대로 쭉 나열되고, block처럼 박스 형태라 width, height로 크기 설정 가능.
.box1 {
display: inline-block;
width: 300px;
}
.box2 {
display: inline-block;
width: 200px;
}
728x90
반응형
'Programming > HTML & CSS' 카테고리의 다른 글
[CSS] grid (0) | 2020.12.26 |
---|---|
[HTML] form 이해하기 (0) | 2020.12.24 |
[CSS] flex사용 배치 연습 (1) | 2020.12.24 |
크리스마스 카드 만들기 (0) | 2020.12.19 |
[HTML] 간단한 로그인 페이지 만들기-2 (0) | 2020.12.19 |
댓글