안녕하세요. 명월입니다.
이 글은 CSS에서 위치(postion)과 요소 객체 스타일(display)에 대한 글입니다.
HTML은 기본적으로 태그가 위에서 아래로, 왼쪽에서 오른쪽 순으로 배치가 됩니다. 사람이 문서를 해독할 때, 가장 자연스러운 흐름이 위에서 아래이고 왼쪽에서 오른쪽으로 흐르기 때문에 이런 흐름도 크게 나쁘지 않습니다. 그러나 UX나 UI의 디자인 패턴으로는 이런 흐름의 디자인으로 한계가 있습니다.
각 태그마다 위치와 객체 스타일이 정해져 있지만 이것을 CSS 스타일에서 재설정할 수 있고, 위에서 아래, 왼쪽에서 오른쪽의 형태가 아닌 자유스럽게 브라우져의 픽셀 위치로 계산해서 강제적으로 위치를 설정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
/* 기본 배경을 회색으로 설정 */
body {
background: gray;
}
/* div태그 배경을 흰색으로 설정 */
div {
background: white;
}
</style>
</head>
<body>
<!-- 위치 스타일 설정할 태그 -->
<div class="item">item</div>
</body>
</html>
div.item {
/* div는 기본적으로 display가 block이 기본 설정입니다. 이 기본 설정을 초기화 시킴*/
display: initial;
/* 위치 옵션 absolute는 태그의 순서로 위치가 정해지는 것을 무시하고 부모 태그, 즉 body의 위 왼쪽 기준으로 절대 px값으로 위치를 설정*/
position: absolute;
/* 브라우져 위에서 100px 위치*/
top: 100px;
/* 왼쪽에서 100px 위치*/
left: 100px;
/* 요소의 너비 */
width: 200px;
/* 요소의 높이*/
height: 300px;
}
각 태그들은 기본 display가 설정되어 있습니다. div는 block으로 table은 table, span은 inline(태그의 기본 요소)등으로 설정되어 있습니다. initial를 설정하면 요소의 태그 특성을 없애고 기본적인 span 태그처럼 기본 태그 요소 설정이 됩니다.
display 태그는 CSS 스타일 요소 중에서도 꽤 중요한 설정입니다.
아래는 display의 설정 값에 대한 설명입니다.
| 값 | 설명 |
|---|---|
| inline | 요소를 인라인 요소(<span>등)로 표시합니다. 높이와 너비 속성은 효과가 없습니다. |
| block | 요소를 블록 요소(<p>와 같은)로 표시합니다. 행의 폭 전체를 차지합니다. |
| contents | 컨테이너를 비표시하고, 요소의 자식 요소를 DOM의 다음 단계로 올립니다. |
| flex | 블록 레벨 flex 컨테이너로 요소를 표시합니다. |
| grid | 요소를 블록 레벨의 그리드 컨테이너로 표시합니다. |
| inline-block | 요소를 인라인 레벨의 블록 컨테이너로 표시합니다. 요소 자체는 인라인 요소로 포맷되지만, 높이 및 너비 값을 적용 할 수 있습니다. |
| inline-flex | 요소를 인라인 레벨의 flex 컨테이너로 표시합니다. |
| inline-grid | 요소를 인라인 레벨의 그리드 컨테이너로 표시합니다. |
| inline-table | 요소는 인라인 레벨 테이블로 표시됩니다. |
| list-item | 요소를 <li>요소처럼 작동시킵니다. |
| run-in | 문맥에 따라 요소를 차단 또는 인라인으로 표시합니다. |
| table | 요소를 <table>요소처럼 표시합니다. |
| table-caption | 요소를 <caption>요소처럼 표시합니다. |
| table-column-group | 요소를 <colgroup>요소처럼 표시합니다. |
| table-header-group | 요소를 <thead>요소처럼 표시합니다. |
| table-footer-group | 요소를 <tfoot>요소처럼 표시합니다. |
| table-row-group | 요소를 <tbody>요소처럼 표시합니다. |
| table-cell | 요소를 <td>요소처럼 표시합니다. |
| table-column | 요소를 <col>요소처럼 표시합니다. |
| table-row | 요소를 <tr>요소처럼 표시합니다. |
| none | 요소를 완전히 비표시합니다. |
| initial | 요소를 태그의 기본 요소치로 설정한다. |
| inherit | 부모 요소에서이 속성을 상속합니다. 상속에 대해 읽습니다. |
div태그는 기본 display가 block으로 설정되어 있습니다. block의 경우는 행의 폭을 전체를 차지하기 때문에 width가 100%입니다.
그래서 위의 예제에서는 div의 display를 initial로 설정하고 width를 설정했습니다.
또한 position스타일 요소의 위치를 결정하는 것입니다.
기본적으로 Html 태그 및 큐멘과 스타일로 위에서 아래, 왼쪽에서 오른쪽 방식으로 만듭니다. 요소 위치를 변경할 때 사용합니다.
아래는 postion의 설정 값에 대한 설명입니다.
| 값 | 설명 |
|---|---|
| static | 기본값. 문서 흐름에 표시되도록 요소는 순서대로 표시됩니다. |
| absolute | 요소는 부모 요소의 절대적 위치에 따라 배치됩니다. |
| fixed | 요소는 브라우저 창에 상대적으로 배치됩니다. |
| relative | 요소는 정상 위치를 기준으로 배치되기 때문에 "left : 20px"는 요소의 왼쪽 위치에 20 픽셀을 추가합니다. |
| sticky | 요소는 사용자의 스크롤 위치에 따라 배치됩니다. 끈적 요소는 스크롤 위치에 따라 상대 요소와 고정 요소를 전환합니다. 뷰포트에서 지정된 오프셋이 충족 될 때까지 상대적인 위치에 배치됩니다 - 그리고 (position : fixed처럼) 제자리에 "고정"됩니다. 참고 : IE / Edge 15 이전 버전에서는 지원되지 않습니다. -webkit- 접두사가있는 버전 6.1 Safari에서 지원되고 있습니다. |
| initial | 이 속성을 기본값으로 설정합니다. |
| inherit | 부모 요소에서이 속성을 상속합니다. |
위의 예에서 position을 absolute로 설정했습니다. div의 부모 요소는 body이므로, 화면 상단 왼쪽 기준으로 top이 100px, left이 100px을 설정합니다.
CSS스타일에서 display와 position은 잘 사용하지 않는 것 같으면서 정말 자주 사용하고 중요한 스타일 설정입니다.
특히, display에서 none설정을 이용하여 보이지 않게 하거나 보이게 하는 동적 설정이 가능하고,position에서 fixed과absolute를 설정하여 메뉴의 위치를 결정하고 동적으로 움직이게도 할 수 있습니다.
<style>
.test:hover {
display:none;
}
</style>
<input type="button" class="test" value="클릭 해보세요." onclick="alert('정말??');" >
예제
위의 예제는 버튼 박스에 마우스를 올리면(hover) diplay가 none으로 설정되면서 버튼이 사라집니다. 확인해 보세요.
여기까지 CSS에서 위치(postion)과 요소 객체 스타일(display)에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [CSS] 트랜스폼 (transform) (0) | 2020.02.19 |
|---|---|
| [CSS] 트랜지션 (transition) (0) | 2020.02.18 |
| [CSS] Column 요소 스타일 (0) | 2020.02.17 |
| [CSS] 정렬 스타일(float) (0) | 2020.02.12 |
| [CSS] 테두리 및 여백 스타일 - border, margin, padding (0) | 2020.01.28 |
| [CSS] 문자 스타일 (0) | 2020.01.27 |
| [CSS] 의사 선택자 - link, visited, target, enabled, disabled, not, active, hover, focus (0) | 2020.01.23 |
| [CSS] 의사요소 - fist-line, first-letter, before, after (2) | 2020.01.22 |