display, visibility 속성
display 속성
1. 기본 속성
- HTML 요소를 block 혹은 inline 혹은 inline-block 으로 지정한다
| block | inline | inline-block |
| 전체 너비 차지 기본 위아래 여백 있음 |
콘텐츠 크기만큼만 공간 차지 | inline 처럼 같은 줄에 나란히 배치 가능 게시판 하단의 페이징(1, 2, 3 ...) 부분을 꾸미는데 유용 |
| width, height O | width, height X | width, height O |
| text-align O | text-align X 인라인 요소가 포함된 블록 요소에는 text-align 속성을 적용 가능 |
text-align O |
<span style="text-align: center;">이 텍스트는 정렬되지 않습니다.</span>이 텍스트는 정렬되지 않습니다.
<div style="text-align: center;">
<span>이 텍스트는 가운데 정렬됩니다.</span>
</div>이 텍스트는 가운데 정렬됩니다.
| display : inline | 인라인 지정 |
| display : block; | 블록 지정 |
| display : inline-block; | 인라인 블록 지정 |
| display : none; | 존재하지 않는 것으로 만든다 |
2. 목록 표현
- 지정하는 요소가 인라인 요소라도 목록과 같이 블록 형태로 나타낸다
| display : list-item; | 해당 요소가 목록의 형태로 나타난다 |
3. 테이블 형태 표현
| display : table; | table 지정 |
| display : table-caption; | caption 지정 |
| display : table-cell; | td 지정 |
| display : table-column; | col 지정 |
| display : table-column-group; | colgroup 지정 |
| display : table-footer-group; | tfoot 지정 |
| display : table-header-group; | thead 지정 |
| display : table-row; | tr 지정 |
| display : table-row-group; | tbody 지정 |
visibility 속성
기본값은 'visible;'이며 'hidden;'을 지정할 경우에는 지정된 요소가 보이지 않게 된다
display: none; vs visibility: hidden;
| display: none; | 원래 없었던 것처럼 표현 |
| visibility: hidden; | 보이지만 않고 공간은 유지된다 |
⚒️ 예제
| CSS\webapp\05cssPositioning | |
| exam01.html | inline, inline-block, bloc |
| exam02.html | <a href="#">1</a> |
| exam08.html | 다음 빈 곳에 숨은 단어? |
포지셔닝(positioning) 스타일
1. float 속성
left, right
- float를 지정하면 다음에 오는 컨텐츠가 float를 지정한 블록 주위를 감싸게 된다
- html 요소 중에서 인라인 요소나 블록 요소는 그 결과가 무척 다르다
- 그러나, float를 지정하면 두 요소는 같은 결과를 보여준다
- 인라인 요소가 블록 요소처럼 크기를 지정할 수 있게 된다
2. clear 속성
| clear: left; | float: left; 해지 |
| clear: right; | float: right; 해지 |
| clear: both; | float: left; , float: right; 둘 다 해지 |
3. 예제
| CSS\webapp\05cssPositioning | |
| exam03.html | 학기말 공지 #float{ float: right; } |
| exam04.html | Navigation, Content |
position 속성
1. 개념
- 값으로는 크게 absolute , relative , fixed 3개가 있다
- 이렇게 설정된 후에는 left , right , top , bottom 속성으로 그 위치를 지정하게 된다
2. value;
- position: absolute;
- 부모 <tag> 의 위치를 기준으로 상대적으로 배치
- HTML 문서에 2개 이상의 요소가 나열되면, 뒤에 배치되는 요소는 앞에 놓인 요소를 기준으로 배치
- 하지만, ‘position: absolute;’ 으로 지정하면, 다음 요소가 이 블록을 인지하지 못한 채 오로지 주어진 절대값을 기준으로 배치
- 'position: absolute;’ 지정한 후, left , right , top , bottom 속성으로 그 위치를 지정 가능
- position: relative;
- 자기 자신을 기준으로 상대적으로 배치
- 기준값 기준으로 상대적으로 배치
- ‘position: relative;’ 로 지정된 후, left , right , top , bottom 의 위치 값들은 relative; 가 지정된 블록 그 자신의 위치에서 지정한 값만큼 이동
- ‘position: absolute;’ 를 지정하는 경우, 이를 감싸는 블록에는 ‘position: relative’ 로 지정해야 함
- position: fixed;
- 뷰포트를 기준으로 상대적으로 배치
- 위치는 항상 <body>를 기준으로 위치된다
- 위치는 고정
z-index: 속성
- position 을 지정한 여러 블록이 겹치게 되면, 나중에 작성한 블록이 위로 올라가게 된다
- z-index 속성으로 블록의 위, 아래의 위치를 조정할 수 있다
- z-index 의 큰 값이 위로 올라간다
- 기본값이 0, 음수 ~ 양수까지 줄 수 있다
cf) Position Property
position: 문서상에 요소를 배치하는 방법을 지정
| static; | default값 top right bottom left, z-index 속성이 아무런 영향을 주지 않는다 |
| relative; | 자기 자신을 기준으로 top right bottom left 의 값에 따라 오프셋을 적용한다 |
| absolute; | 현재 위치랑 무관하게 부모 tag의 위치를 기준으로 상대적으로 배치한다 |
| fixed; | 뷰포트를 기준으로 상대적으로 위치가 지정된다 화면이 스크롤을 하더라도 항상 그 위치에 고정된다 주로 헤더, 플로팅 배너나 우측 하단에 스크롤 탑 버튼에 활용된다 |
| sticky; | 문서 흐름에서 유지하고 마치 포스트 잇처럼 붙어 다닌다 가장 가까운 스크롤 되는 부모에 귀속된다 |
⚒️ 예제
| CSS\webapp\05cssPositioning |
|
| exam05.html | 상대배치, relative |
| exam06.html | Merry Christmas!! |
| exam07.html | z-index 프로퍼티 |
inline & block
inline
- inline줄바꿈 없이 순서대로 한 줄에 다른 엘리먼트들과 나란히 배치된다
- 컨텐트의 크기 만큼만 공간을 차지하므로 width, height 속성을 지정해도 무시된다
- padding, margin 속성은 좌우 간격만 반영이 되고 상하 간격은 반영되지 않는다
- <span>, <a>, <em> 등
block
- 혼자 한 줄을 차지한다
- 매번 줄바꿈이 되어 여러 줄에 보이게 된다
- width, height, padding, margin 속성이 모두 반영된다
- <div>, <p>, <h1> 등
inline-block
- inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다
- inline에서 불가능하던 width, height, padding, margin 속성의 상하 간격 지정이 가능하다
- inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다
- <button>, <select> 등
overflow 속성
1. value
| overflow: hidden; | 박스를 넘어가는 내용이 잘려 보이지 않음 |
| overflow: visible; | 콘텐츠가 박스를 넘어가도 출력 |
| overflow: scroll; | 박스에 스크롤바를 붙여 출력 |
| overflow: auto; | 콘텐츠가 박스를 넘어갔을 때 박스에 스크롤바를 붙여 출력 |
2. 예제
| CSS\webapp\05cssPositioning | |
| exam09.html | overflow property |
Flex
1. 개념
- 여러 태그를 하나로 묶어 정렬
- 정렬할 때 기준이 필요하다
- flex 는 기준을 보무 박스로 두고 움직인다
2. Flex 구조
- 실제 내용이 있는 빨간색의 자식 박스들 & 내용들을 정렬하기 위해 감싸고 있는 파란색의 부모 박스
3. Flex 정렬 핵심
- 파란색의 부모 박스 안에 빨간색의 자식 박스를 가로(row)또는 세로(column)로나열하고,
- 부모박스로 자식박스들을 정렬하는 것
4. 자주 사용되는 flex 속성들
/* 부모박스 */
display: flex;
/* 행기준: row, 열기준: column */
flex-direction: row;
flex-direction: column;
/* flex-direction 기준 수평 방향으로 자식박스 정렬 */
justify-content: center;
/* flex-direction 기준 수직 방향으로 자식박스 정렬 */
align-items: center;
반응형 display: flex
특정 px 이하에서 flex item 가로 길이를 조정해주면 됨
.dishGrid {
display: flex;
/* 해당 요소를 Flex Container 로 만듦 */
/* 내부의 자식 요소들은 Flex Items가 되어, Flexbox 레이아웃 규칙에 따라 정렬 및 배치 */
justify-content: center;
/* 주축(Main Axis)에서의 자식 요소(아이템) 정렬 방식을 정의 */
/* flex-direction: row; 일 경우(default( 가로 방향 중앙에 배치 */
flex-wrap: wrap;
/* Flex 아이템들이 Flex Container의 크기를 초과할 경우, 자동으로 다음 줄로 넘어가게 만듦 */
/* 기본값 : nowrap; 줄바꿈 없이 한 줄에 모든 아이템을 배치 */
gap: 20px;
/* Flex 아이템 간의 공백(간격) 설정 */
}
.dishItem {
width: 22%;
}
@media (max-width: 600px) {
.dishItem {
width: 46%:
}
}
'WEB > CSS' 카테고리의 다른 글
| Shadow & Cursor (0) | 2024.08.18 |
|---|---|
| 리스트, 표, 폼 꾸미기 (0) | 2024.08.14 |
| Box Model (0) | 2024.08.14 |
| 색과 텍스트 꾸미기 (0) | 2024.08.14 |
| Selector (0) | 2024.08.14 |
