■ display 속성
| none | block | inline | inline-block |
| 보이지 않음 | 블럭 | 인라인 | 인라인 블럭 |
○ 인라인 요소
- 위치 같은 줄에 나란히 배치, 이전요소 바로 뒤에서 시작
- 크기는 콘텐츠의 너비만 차지 즉 너비와 높이를 직접 설정할수 없음
- 여백 상하 여백 미적용 또는 예상과 다르게 작동, 좌우여백은 적용
○ 블록 요소
- 새 줄에서 시작 사용 가능한 전체 너비를 차지, 다음요소는 블록 아래에 새줄로 배치
- 크기는 부모 요소의 전체 너비를 차지 너비와 높이 직접 설정 가능
- 여백은 상하 좌우 모든 방향의 여백 적용
○ 인라인 - 블록 요소
- 인라인 요소처럼 같은 줄에 나란히 배치, 블록 요소처럼 너비와 높이를 지정가능
- 크기는 콘텐츠의 너비만 차지 명시적으로 너비 높이 설정가능
- 여백은 상하좌우 모든 방향의 여백이 적용
■ 사용시나리오
○ 인라인 요소
- 텍스트의 일부를 스타일링할 때 사용
예를 들어, <span>을 사용하여 문장 내 특정 단어에 다른 색상, 폰트 또는 강조 스타일을 적용할 때.
- 하이퍼링크 생성
<a> 태그로 텍스트나 이미지에 링크를 추가할 때. 이는 문서 내에서 다른 섹션으로 이동하거나
다른 웹페이지로 네비게이션하는 데 사용
- 이미지나 다른 미디어
<img> 태그를 사용하여 텍스트와 함께 이미지를 인라인으로 배치할 때.
○ 블록 요소
- 주요 섹션 또는 레이아웃 요소를 구성할 때
<div>는 웹 페이지를 섹션으로 나누고, 컨테이너로서 스타일링과 구조를 제공하는 데 자주 사용됨
- 문단을 구분할 때
<p> 태그는 텍스트 블록을 문단으로 나누는 데 사용됨
- 제목과 하위 제목구분
<h1>부터 <h6>까지의 제목 태그는 문서의 제목과 하위 제목을 나타내는 데 사용됨
- 목록 생성
<ul>, <ol>, <li> 태그를 사용하여 순서가 있는(번호가 매겨진) 또는 순서가 없는(점으로 표시된) 목록을 만들 때.
○ 인라인 블록 요소
- 너비와 높이가 필요한 인라인 요소
예를 들어, 버튼 또는 작은 폼 요소를 인라인으로 배치하면서도 크기를 조정해야 할 때 사용됨
- 수평 메뉴 또는 네비게이션 바
메뉴 아이템을 가로로 나열하면서 각 아이템의 패딩, 마진, 크기를
조절할 수 있어야 할 때 인라인-블록이 사용됨
- 그리드 또는 타일 레이아웃
여러 요소를 가로로 나란히 배열하면서도 각각의 요소에 대한 레이아웃 제어가 필요한 경우
예를 들어 사진 갤러리나 카드 레이아웃을 구현할 때 사용됨
■ Inline-block 특징 및 종류
| 형태 | 특징 | 종류 |
| 인라인 요소 Inline Elements |
기본 너비 : 컨텐츠의 너비 한줄에 여러 개 배치 크기값을 가질수 없음 상하 마진은 가질 수 없음 |
span, a, small, big, em, u, ins, i, s, del, br, q, b, strong, mark, sub, sup, label, map, cite, addr, time |
| 블럭 요소 Block Elements |
기본 너비 : 100% 한 줄에 하나만 배치 너비와 높이를 가질수 있음 상하좌우 마진 가질 수 있음 |
div, p, table, ul, ol, li, dl, dd, td, tr, td th, form h1~h6, header, nav, footer, main, section, article, fiure figcaption, symmary, details, address, blockquote, aside |
| 인라인 블록요소 (Inline Block Elements) |
기본 너비 : 컨텐츠의 너비 값 한 줄에 여러개 배치 크기값을 가질수 있음 상하좌우 마진 가질수 있음 |
img, button, select input, textarea, video, audio 대부분의 font icon 태그 |
■ display 속성
○ 여러속성
- none
요소가 차지하던 공간도 사라지고, 화면에 표시되지 않음
- block
새 줄에서 시작하며, 가능한 한 많은 너비를 차지
- inline
블록 레벨과 달리, 너비와 높이를 갖지 않으며, 내용의 너비만큼만 공간을 차지
- inline-block
인라인 레벨로 배치되지만, 블록 레벨 요소처럼 너비와 높이를 가질 수 있음
- flex
플렉스 컨테이너로 만들어, 자식 요소를 플렉스 아이템으로 배치
플렉스박스 레이아웃을 사용하여 요소를 효율적으로 정렬하고 분배
- grid
그리드 컨테이너로 만들어, 자식 요소를 그리드 아이템으로 배치
그리드 레이아웃을 사용하여 복잡한 두 차원 배열을 쉽게 설계
- table, table-row, table-cell
전통적인 HTML 테이블 레이아웃을 CSS로 재현
- inline-flex
인라인 플렉스 컨테이너로 만들어, 플렉스 아이템으로 자식 요소를 배치
요소가 인라인 요소처럼 배치되면서도 내부에서는 플렉스박스 레이아웃의 이점을 활용
- inline-grid
요소를 인라인 그리드 컨테이너로 만들어, 그리드 아이템으로 자식 요소를 배치
인라인 요소처럼 배치되면서도 내부에서는 그리드 레이아웃을 활용
○ display 처리
- 인라인요소 및 블록으로 변경
<body>
<div>안녕</div><div>안녕2</div>
<span>우리</span>
<span>우리</span>
</body>
div{
display: inline;
background-color: red;
}
span{
display: block;
background-color: blue;
}
○ border 속성
요소가 차지하고 있는 영역에 테두리를 그릴수 있다.
border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정이러한 속성을 단축속성이라고 한다.
| 속성명 | 속성값 |
| border-color | color 정의와 동일 |
| border-width | thin(1px), medium(3px), thick(5px) 또는 px, em, rem |
| border-style | none(기본), solid(직선), dotted(점선), dashed(긴 점선) 등 |
-border 사용방법
a{
border: 5px solid blue;
/*크기 종류 색*/
}
-border-width 사용
a{
/* 상,하 | 좌,우 */
border-width: 5px 20px;
/* 상 | 좌,우 | 하*/
border-width: 5px 20px 3px;
/* 상 | 우 | 하 | 좌*/
border-width: 1px 10px 1px 10px;
}
- 적용
<body>
<div>안녕</div><div>안녕2</div>
<span>우리</span><span>우리</span>
</body>
span{
border-width: 5px;
border-style: solid;
border-color: red;
}
div{
border: 5px solid blue;
}
'UIUX > 내용' 카테고리의 다른 글
| 메뉴바 (0) | 2024.04.18 |
|---|---|
| position 속성 (0) | 2024.04.17 |
| box모델 (0) | 2024.04.17 |
| img 태그 (0) | 2024.04.15 |
| 레이아웃(Layout) (0) | 2024.04.09 |