![[CSS] CSS에서 위치를 담당하는 요소들](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb3Fdgk%2FbtrwXy5atou%2FVZUIVtd7nsd1jaMjOXNVNk%2Fimg.png)
디스플레이(Display)
display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 중요한 속성 중 하나이다. html의 모든 요소는 각각의 기본 display 속성 값을 가지고 있고, CSS를 통해 속성 값을 바꿀 수 있다.
li {
display: inline;
}
/* <li> 요소를 inline으로 변경하면 가로메뉴를 만들 수 있다 */
인라인-블록(inline-block)
- 요소 자체는 인라인(inline) 요소처럼 동작하지만, 내부에서는 블록(block) 요소처럼 동작한다.
- 인라인 요소와 다르게 너비와 높이를 설정할 수 있다.
- 블록 요소처럼 margin을 이용하여 여백을 지정할 수 있다.
- 주로 메뉴나 내비게이션 바를 만들 때 사용된다.
HTML 요소 숨기기
- display 속성 값을 none으로 설정
- 해당 요소는 보이지 않고, 레이아웃에도 영향을 미치지 않는다.
- 하지만 기능은 한다. (ex. <script> 태그는 default가 display: none; 이다.)
- visibility 속성 값을 hidden으로 설정
- 해당 요소는 보이지 않지만, 레이아웃에는 영향을 준다.
최대 너비(Max-width)
max-width를 설정하면 목적에 따라 화면에 보이는 레이아웃을 적절히 조절할 수 있다. (ex. 반응형 웹)
| 속성 | 설명 |
| max-width | 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함. |
| min-width | 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함. |
| max-height | 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정함. |
| min-height | 해당 HTML 요소가 가질 수 있는 최소 높이(height)를 설정함. |
포지션(Position)
position 속성은 html 요소가 위치를 결정하는 방식을 설정한다. CSS에서 요소의 위치를 결정하는 방식은 5가지다.
- static(정적) - 기본 방식으로 top, right, bottom, left 속성 값에 영향받지 않는다.
- relative(상대적) - 해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치한다.
- fixed(고정적) - 뷰포트(viewport) 기준으로 특정 위치에 고정된다.
- absolute(절대적) - 위치가 설정된 바로 상위의 조상(ancestor) 요소에 상대적으로 위치한다. (like <body> 태그)
- sticky(끈적) - 사용자의 스크롤 위치에 따라 상대적으로 위치하다가, 주어진 위치가 뷰포트를 만나면 고정된다.
| 속성 | 설명 |
| position | HTML 요소의 위치를 결정하는 방식을 설정함. (static, relative, fixed, absolute, sticky) |
| top | 위치가 설정된 조상 요소의 위로부터의 여백을 설정함. |
| right | 위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정함. |
| bottom | 위치가 설정된 조상 요소의 아래로부터의 여백을 설정함. |
| left | 위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정함. |
| z-index | 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정함. |
플로트(Float)
float 속성은 해당 html 요소가 주변의 다른 요소들과 잘 어우러지게 해 준다. 레이아웃(layout) 작성할 때 주로 사용된다.
div.page {
border: 3px solid #CD5C5C;
overflow: auto;
}
h2 {
text-align: center;
}
header {
border: 3px solid #FFD700;
}
nav {
border: 3px solid #FF1493;
width: 150px;
float: left;
}
section {
border: 3px solid #00BFFF;
margin-left: 156px;
}
footer {
border: 3px solid #00FA9A;
}- left - 컨테이너 왼쪽
- right - 컨테이너 오른쪽
- none - 기본값
- inherit - 상위 요소의 float값을 상속
| 속성 | 설명 |
| float | HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정함. |
| clear | float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정함. |
| overflow | 내용(content)의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정함. |
정렬(Align)
블록(block) 타입의 요소를 정렬하기 위한 방법
- margin 속성을 이용한 가운데 정렬 - 해당 요소에 width 속성 값을 설정한 후, margin 속성 값을 auto로 설정한다.
- position 속성을 이용한 좌우 정렬 - <body> 요소에 margin과 padding 속성 값을 0으로 설정한 후, position 속성 값을 absolute로, right 또는 left 속성 값을 설정한다.
- float 속성을 이용한 좌우 정렬 - 마찬가지로 <body> 요소에 margin과 padding 속성값을 0으로 설정한 후, float 속성값을 right 또는 left로 설정한다.
인라인(inline) 타입의 요소를 정렬하기 위한 방법
- text 속성을 이용한 가운데 정렬 - text-align 속성 값을 center로 설정한다.
- line-height 속성을 이용한 수직 정렬 - 자식 요소의 line-height을 부모 요소의 height과 동일하게 설정한다. (참고자료)
이미지(img) 요소를 정렬하기 위한 방법
- display 속성을 이용한 가운데 정렬 - display 속성 값을 block으로 설정한 후, margin 속성 값을 auto로 설정한다.
화면 정중앙에 요소를 정렬하는 방법
- position 속성과 transform 속성을 이용하여 화면의 정중앙에 정렬한다.
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
※ 참고자료
'🌎 Web > CSS' 카테고리의 다른 글
| [CSS] background-size, origin, clip (0) | 2022.03.27 |
|---|---|
| [CSS] background img 꽉차게 채우는 법 (0) | 2022.03.25 |
| [CSS] CSS에서 공간을 나누는 요소들(feat. 박스모델) (0) | 2022.03.21 |
| [CSS] CSS의 기본 속성(property) (0) | 2022.03.21 |
| [CSS] CSS의 다양한 선택자(selector) (0) | 2022.03.20 |