반응형
블록 요소 정렬(align)
margin 속성을 이용한 가운데 정렬
- margin 속성값을 auto로 설정하면 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 된다.
- 반드시 해당 요소의 width 속성값을 설정해야하며, 넓이를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백이 된다.
div {
width: 300px;
margin: auto;
}position 속성을 이용한 좌우 정렬
- 절대 위치 지정 방식으로 위치한 요소는 다른 요소와 겹칠 수 있기에, 이 특성을 이용하여 <body>요소에 margin과 padding 속성값을 설정함으로써 HTML 요소를 수평 방향으로 좌우 정렬할 수 있다.
div {
width: 300px;
padding: 10px;
margin: 0;
position: absolute;
right: 0;
}float 속성을 이용한 좌우 정렬
- float 속성을 사용할 때 <body>요소에 margin과 padding 속성값을 설정해서 정렬할 수 있다.
div { width: 350px; padding: 10px; margin: 0; }
div.left { float: left }
div.right { float: right }
position 속성
- 정적 위치(static): 기본 설정값으로 좌표 속성을 같이 사용할 수 없고, 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식이다.
- 상대 위치(relative): 정적 위치를 기준으로 좌표 속성만큼 이동시킨 위치로, 좌표 속성 적용되는 것만 다를 뿐 정적 위치와 동일하다.
- 절대 위치(absolute): 위치가 설정된 조상 요소를 기준으로 좌표 속성만큼 이동시킨 위치로, 다른 요소가 먼저 있어도 덮어쓴다.
- 고정 위치(fixed): 브라우저의 뷰포트를 기준으로 좌표 속성만큼 이동시킨 위치로, 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
- relative 속성은 무조건 부모를 기준으로 위치하는 반면에 absolute 속성은 부모 요소를 벗어나 어디든지 자유롭게 위치할 수 있다.
.static { position: static; }
.relative { position: relative; }
.fixed { position: fixed; }
.absolute { position: absolute; }
z-index 속성
- HTML 요소의 위치를 설정하게 되면 어떤 요소들이 서로 겹칠 수도 있는데, z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택의 순서를 설정한다.
- positon 속성이 static 이외인 요소에만 적용되며, 스택의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치한다.
.last {
position: fixed;
top: 180px;
left: 120px;
z-index: -1;
}
float 속성
- float 속성은 텍스트로 이미지 주위를 감싸는 역할로, 주로 레이아웃을 구성할 때 블록 요소를 가로 정렬하기 위해 사용된다.
- position 속성이 절대 위치일 때는 사용할 수 없고, none값이 기본값으로 좌우 left와 right만 설정할 수 있으며, 중앙 가로 정렬은 margin 속성을 사용한다.
- width 속성의 기본값은 100%이므로 width 속성값이 없으면 가로폭을 가득 채우고, width 속성값이 없는데 float 속성이 선언되면 인라인 요소처럼 컨텐츠에 맞게 가로폭이 최소화된다.
img {
float: left;
margin-right: 20px;
}float 속성이 있거나 없는 요소간 margin이 사라지는 문제
- float 속성이 선언된 요소가 다음 요소 위에 떠있는 상태일 경우에 두 요소간의 margin은 제대로 표현되지 않는데, 두번째 요소에 float 속성을 선언하지 않아서 발생하는 문제다.
- float 속성을 선언하지 않은 요소에 overflow: hidden 프로퍼티를 선언하면 float 속성이 없어서 제대로 표현되지 못하는 요소를 제대로 출력해주고, 두번째 요소에도 float 속성을 선언하면 overflow: hidden 프로퍼티는 선언하지 않아도 되지만 너비가 최소화된다.
.d1 {
float: left;
background: red;
}
.d2 {
overflow: hidden;
background: orange;
}float 속성 요소의 부모 요소 높이가 반영되지 않는 문제
- float 요소는 일반적인 흐름 상에 존재하지 않기 때문에 높이를 알 수 없어서 부모 요소 이후에 위치하는 요소의 정렬에 문제를 발생시킨다.
- float 속성이 선언된 자식 요소의 부모 요소에 overflow: hidden 속성을 선언하거나 또는 부모 요소가 끝나기 직전 빈 요소를 만들고 clear:both를 설정하는 방법으로도 부모 요소에 float 속성하여 문제를 해결할 수 있다.
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
overflow: hidden;
}
.d1, .d2 { float: left; width: 50%; padding: 20px 0; }.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
/* overflow: hidden; */
}
.d1, .d2 { float: left; width: 50%; padding: 20px 0; }
/* 또는 아래 둘 중 하나로 빈요소를 만들어 생성 */
.clear { height: 0; clear: both; }
.clearfix:after { content: ""; display: block; clear: both; }
overflow 속성
- overflow 속성은 내용의 크기가 해당 요소의 박스를 넘어갈 때 어떻게 처리할지를 설정한다.
- float 속성이 적용되면 해당 요소의 일부가 밖으로 흘러넘치는데, overflow 속성값을 auto로 설정하면 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커진다.
.visible { overflow: visible; }
.hidden { overflow: hidden; }
.scroll { overflow: scroll; }
.auto { overflow: auto; }
div { overflow-x: auto; } /* 수평 박스를 넘어갈 때 */
div { overflow-y: auto; } /* 수직 박스를 넘어갈 때 */
clear 속성
- float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해준다.
.left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
.right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
p { clear: both; }
clip 속성
- clip 속성은 절대 위치 지정 방식으로 위치한 요소를 자른다.
.dotted-border {
border: dotted;
position: relative;
width: 536px;
height: 350px;
}
#top-left {
position: absolute;
top: 0;
left: 360px;
clip: rect(0, 175px, 113px, 0);
}
cursor 속성
- cursor 속성은 표시되는 마우스 커서의 모양을 설정한다.
.foo {
cursor: crosshair;
}
.bar {
cursor: zoom-in;
}
Reference
반응형
'Language > Css' 카테고리의 다른 글
| [Css] 배경 속성 - 이미지, 반복, 고정, 위치 (0) | 2023.06.19 |
|---|---|
| [Css] 기본 속성 - 크기 단위, 색상 (0) | 2023.06.19 |
| [Css] 보기 속성 - display, visibility, opacity (0) | 2023.06.19 |
| [Css] 박스 모델 - 콘텐츠, 패딩, 보더, 마진, 아웃라인 (0) | 2023.06.19 |
| [Css] 레이아웃 - UI, 다중 컬럼, 반응형 웹디자인, 플렉서블 박스 (0) | 2023.06.19 |