얼마 전 플로팅 기술을 적용하고 다음으로 헤더를 고정시키려 검색 해 보았다.
모두들 마크쿼리님을 언급하면서 숨겨진 코드를 풀어 고정시켜라고 가르쳐 준다.
...
필자가 사용하는 스킨은 이 님 것인지도 모르겠고 그렇다하더라도 그 비밀 코드는 보이지 않았다.
...
그러던 中 적용 가능성이 높은 이론을 발견하여 적용 해 보았다.
html에 <div>태그로 헤더부분과 콘텐츠 부분으로 나누고 각 <div>태그에 id 명을 기입 한 뒤 이를 css에서 소환하여 속성을 지정 해 주면 된다.
처음에는 css의 header부분의 position이라는 속성에 fixed;를 지정 해 보았지만 이 스킨에서는 header와 컨텐츠를 wrap으로 구현 해 놓아 헤더부분이 fixed;로 인해 레이아웃에서 공중으로 이동하고 컨텐츠가 그 빈 공간을 차지 해 위로 올라가 버리는 현상이 발생하였다.
콘텐츠 부분에만 <div> 태그를 적용해도 된다.
<div id=Content> 왜 만들어 줘야 할까?
빈 공간에 컨텐츠가 침범하지 않게 position top이라는 속성을 지정 하기 위함이다.
물론 이렇게 하지 않아도 기존의 header부분은 나두고 다른 header를 만들어 움직이게 만들면 되지만... 귀찮아 질 것 같아 콘텐츠를 내려버렸다.
그렇다면 이제 끝?
이대로 하면 이제는 카테고리가 망가져 나오는 현상이 발생한다. 원인은 모르겠다. 딱히 알고 싶지도 않고. 그래서
헤더 각 개체의 position속성에다 fixed를 지정하였다.
css를 살펴보니 대부분 relative 속성으로 지정 되어 있었다. 이는 한 가지가 망가지면 다른 관련 레이아웃도 망가진다는 의미이다. 즉, 헤더 전체에 fixed;를 지정 해 놓으면 카테고리 메뉴 또한 고정 되어 배경도 망가지고 카테고리 스크롤도 고정 되어 버려 작동이 안 된다. 이에 각 개체를 고정하기로 하였고 좋은 결과를 얻었다.
지금 스크롤을 위아래로 움직여 보면 제목이 그대로 따라오는 것을 확인 해 볼 수 있다.
물론 지금까지 기술 이외에도 z-index로 어느 레이아웃이 제일 위에 있을지 지정해야 하고 제목 text를 가운데 지정하기 위해 text-align:center; 이외에 별도로 width를 제약하여 지정 해야 한다.(header 각 개체를 fixed 시켰으니 제목 text위치는 왼쪽으로 치우쳐 메뉴와 겹치게 된다.)
하다보면 된다.
어려워 보이지만 차례 차례 하다보면 뭔가 해 보고 싶은 욕구가 생기고 차분하게 검색 해 보면 관련 내용이 나온다.
필자가 추구하는 기술은 ‘기존의 운영체제나 프로그램에 간섭하지 않고 정상적으로 작동하는 플로팅 기술’이다.
기존의 코드를 수정하는 것을 지양한다. 보통 사람들은 자바를 유치한 언어라 하지만 극에 달하면 자바나 c나 똑같다 생각하기에 이 극에 달한 기술을 어느 프로그램에서나 사용 할 수 있게 만들고 싶은 것 뿐이다. 이 기술은 돈이 되지 않아 고용자들은 좋아하지 않는다. 일괄적으로 수정, 편집이 가능하면 그 만큼 일거리도 줄기 때문이다.
지금 pc로 보고 있다면 양쪽에 이상한 것들(?)이 많이 떠 있는 것을 볼 수 있다.
창 크기를 줄여보면 그대로 있지 않은가? 본 내용을 침범해서 까지 있으면 안 된다. 그러니 약간 스크롤을 위아래로 움직여보라.
그럼 사라질 것이다. 그런데 왼쪽 아래 add this는 그대로 남아있다. 필자가 만든 것이 아니라 외부에서 따 온 것이기에... 안 나오게 할 수는 있지만... 이 분 왠지 허술하네... 이것도 고려 안해 놓고...
쨌든 이건 나중에 수정하고, 별도의 레이아웃을 만들어 fixed한다면 굳이 가로값을 받아 창크기에 반응하도록 만들필요는 없지만 플로팅 기술을 위해 창크기에 반응하도록 만들었다.
오른쪽 아래에 있는 것은 일부러 고정 시켜 놓은 것이다. 이들은 모바일에서도 나타나는데 본문을 보는데 크게 문제가 없다 판단하였기 때문이다. 음악 아이콘에는 유투브를 기반으로 한 최신 음악을 감상 할 수 있는 사이트 소개글을 걸어 놓았는데 사실, 음악플레이어 자체를 올려 놓을려다가 기존의 게시글에도 음악이 첨부 된 것들이 있고 음악 소리를 싫어하는 분들도 있기에 그만 두기로 하였다.
그런데 제목이 더 잘 보이게 왜 백그라운드를 설정 안 했어?
과유불급, 지나치게 제목을 부각시키다 보면 지겨워지게 마련이니 은연 중에 익숙 해 지도록 백그라운드는 투명으로 지정 해 놓았다. 마음 편하게 보고 싶을 때 보면된다. 모바일에서 보고 있다면 스크롤을 내리는 중간에 박스에 담긴 대게 또는 매운탕도 보일 것인데 잠깐 잠깐 보이게 만든 것도 이를 염두 해서이다.
박스 안에 담긴 대게는 영덕대게이다. 전체적으로 보면 붉은색을 많이 띠지 않은가? 이는 일반적으로 수입산은 크고 껍질이 두꺼운데 반해 영덕박달대게의 경우 상대적으로 껍질이 얇음으로서 발생하는 현상이다. 껍질이 얇으니 손질하기도 쉽고 붉은 정도에 따라 살 수율도 쉽게 알 수 있으며 맛도 보는 美에서도 수입산을 웃돈다.
이렇게 은연 中 에 그 가치를 알리면 된다.
#태양광 상담은(010-2668-3897)...
RECENT COMMENT