선

display 속성 완전 이해하기

· 2025-07-10 (목) 19:22:08 · 1021
display: block
- 한 줄 전체를 차지하며 줄바꿈이 발생
- 예: <div>, <p>, <section>, <header>

display: inline
- 줄바꿈 없이 옆으로 붙음. width/height 지정이 안 됨
- 예: <span>, <a>, <strong>

display: inline-block
- inline처럼 나열되지만 block처럼 width/height 지정 가능
- 버튼 만들 때 자주 사용

display: flex
- 수평/수직 정렬, 공간 분배가 자유로운 최신 레이아웃 방식
- 예:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}

* 실무에서는 flex가 가장 많이 쓰임 → 반응형 퍼블리싱 필수 스킬!
|
댓글을 작성하시려면 로그인이 필요합니다.
+
분류 제목 글쓴이 날짜 조회
CSS 25-12-27 조회 696
CSS 25-12-07 조회 871
CSS 25-11-20 조회 915
CSS 25-10-10 조회 874
CSS 25-09-19 조회 1,070
CSS 25-08-16 조회 1,110
CSS 25-08-16 조회 1,031
CSS 25-08-02 조회 1,018
CSS 25-07-18 조회 1,157
CSS 25-07-11 조회 1,087
CSS 25-07-10 조회 1,022
CSS 25-07-03 조회 1,033
CSS 25-07-02 조회 1,089
CSS 25-06-29 조회 1,053
CSS 25-06-20 조회 1,228
CSS 25-06-18 조회 1,182
CSS 25-06-17 조회 1,091
CSS 25-06-16 조회 1,108
CSS 25-06-13 조회 959
CSS 23-03-13 조회 2,258
CSS 23-01-11 조회 3,365
CSS 21-03-29 조회 5,011
CSS 21-03-29 조회 5,491
반응형웹 20-06-29 조회 3,762
반응형웹 20-06-29 조회 3,641
부트스트랩 18-01-08 조회 5,806
부트스트랩
[부트스트랩]
18-01-08 조회 7,434
부트스트랩 18-01-08 조회 5,412
부트스트랩 18-01-04 조회 7,515
부트스트랩 18-01-04 조회 4,135