Level Up 1 - 기타 style
position은 absolute, relative, fixed, static의 속성을 지정할 수 있습니다.
스타일 | 속성 | 설명 |
position | absolute | 절대 좌표를 기준으로 표시한다. |
| relative | 개체의 현재 위치로부터 상대좌표로 표시한다. |
| fixed | 항상 그 위치에 띄운다. |
| static | 기본 설정 |
이전 실습에 이어서 absolute 부터 시작하겠습니다.
<div style="width: 300px; height: 200px; background-color: blue; color: #fff;">A</div><div style="top: 35px; left: 40px; position: absolute; width: 200px; height: 150px; background-color: orange; color: #ffffff;">B</div>
여기까지 진행하셨을 겁니다.
이때 만약 주황색 B보다 파란색 A가 중요하다고 판단되면, z-index 속성을 통해 순서를 바꿀 수 있습니다. 박스 A에 z-index: 1000이라 하고, 박스 B에 z-index:999라 하면, z-index 값이 높은 A가 더 위에 올라오게 되고, B는 가려지게 되죠. z-index는 0~9999 사이의 값을 사용할 것을 권장합니다.
<div style="width: 300px; height: 200px; background-color: blue; color: #fff; position: absolute; z-index: 1000;">A</div><div style="top: 35px; left: 40px; position: absolute; width: 200px; height: 150px; background-color: orange; color: #fff; z-index: 999;">B</div>
absolute을 설정하면 top, bottomm right, left는 맨 위/아래/오른쪽/왼쪽이 기준이 됩니다. 이와는 조금 다르게 relative를 설정하면, 현재 개체가 놓인 위치 그 자체가 기준이되는 거죠.
absolute과 똑같은 기준을 사용합니다. 다만 스크롤을 움직여서 창이 보고 있는 화면이 바뀌어도 해당 좌표에 고정된 개체가 따라옵니다. 뉴스 기사를 읽다보면 오른쪽 아래에 '맨 위로'라는 버튼이 계속 떠 있는 것을 볼 수 있는데요. 이 같은 경우 fixed로 고정해두어 항상 그 자리에 위치하게끔 설정해둔 것 이랍니다.
이번에는 레이아웃의 형태를 결정하는 display를 배워보겠습니다. 말이 조금 어려운데요, 정의에 신경쓸 필요 없이 실제로 어떻게 동작하는지를 보면 이해가 쉽습니다.
display 설정을 안했을때 해당되는 기본 설정입니다. 평소 박스를 그리는 방식과 일치합니다. 박스하나가 한 줄을 통째로 차지하게 되죠.
안녕하세요. 저는 <div style="background-color: blue; color: #fff; width: 100px; height: 30px; display: block;">최도근</div>입니다.
마치 박스가 글자처럼 변합니다. 이때는 width, height 같이 블럭의 크기를 지정하는 속성들이 무시됩니다. 글자와 똑같은 상태가 되니까요.
안녕하세요. 저는 <div style="background-color: blue; color: #fff; width: 100px; height: 30px; display: inlin;">최도근</div>입니다.
박스처럼 부피를 갖으면서 동시에 글자처럼 한줄에 함께 표시될 수 있는 방식입니다. 잘 사용한다면 레이아웃을 만드는데 큰 도움이 됩니다.
안녕하세요. 저는 <div style="background-color: blue; color: #fff; width: 100px; height: 30px; display: inline-block;">최도근</div>입니다.
사라져버립니다.
안녕하세요. 저는 <div style="background-color: blue; color: #fff; width: 100px; height: 30px; display:none;">최도근</div>입니다.
