CSS: 구글 맵

실제로 CSS와 z-index가 활용되는 사례를 보여드릴게요 바로 구글 지도에요 아마 구글지도나 온라인 지도를 한 번씩은 사용해봤을 거예요 여러분이 가고싶은 곳을 찾게 도와주죠 온라인 지도는 정말 유용합니다 주변을 탐색할 수도 있고 확대해 볼 수도 있고 축소도 해볼 수 있고 뭔가를 찰아볼 수도 있죠 지금 저는 바르셀로나에 있으니까 성가족 성당을 찾아볼게요 굉장히 아름다운 성당이죠 이건 사실 HTML, CSS와 자바스크립트에요 여기서 어떻게 z-index들이 적용되는지 보여드릴게요 그래서 우리가 보는 모든 요소들이 CSS를 사용해서 서로 겹쳐져 있다는거죠 그들은 z-index를 굉장히 특정한 방법으로 사용해요 그 순서를 정확하게 맞추기 위해서요 제 크롬 도구를 이용해서 몇 가지를 보여드릴게요 여기 구석의 미니맵은 position은 absolute이고 bottom 여백은 0픽셀 left 여백은 0픽셀 그리고 z-index는 1이네요 이 미니맵은 z-index가 0인 어떤 요소의 위에 있다는거죠 이 창과 옵션들은 position은 fixed이고 z-index는 10이네요 그러면 꽤 많은 것들이 겹쳐있다는 거네요 확대버튼은 z-index가 2고 그렇다면 저 창보다 아래에 있다는 말이군요 여기로 옮겨서 어떻게 되는지 볼게요 보이세요? 이 창은 확대버튼의 위에 나타나죠 왜냐하면 이 z-index는 4인데 확대버튼은 z-index가 2니까요 여기서 볼 수 있듯이 구글 지도는 많은 CSS와 z-index를 사용해요 여러 지도를 배치하고 그 위에 조작버튼을 둬야하니까요 다른 CSS나 자바스크립트도 많이 사용하지만 이제 여러분들은 이해할 수 있을거에요 어떻게 웹사이트가 만들어지는지에 대해서요 우리가 여태까지 한 것들과 꽤 다르게 보이는 사이트들 말이에요 이게 바로 CSS의 힘이에요