[CSS]이미지 위에 글자 올리기

position의 absolute와 relative를 알면 쉽게 할 수 있다.

http://www.w3schools.com/Css/pr_class_position.asp

absolute는 자신을 감싸고 있는 엘리먼트를 기준으로 자리를 잡는 것이고, relative는 가장 근접해 있는 엘리먼트를 기준으로 자리를 잡게 된다.


겹칠글자

이런 구조로 HTML을 잡았다고치자. 나름 깔끔한 구조라고 생각한다. writer_box라는 영역에 글쓴이의 아바타를 이미지로 보여주고 그 이미지 위에 태그로 감싼 이름을 올리고 싶다.

그럼 img와 span이 div를 기준으로 자리를 잡도록.. 즉 absolute로 만들어 버리면 그 둘은 겹쳐지게 된다.

#writer_box img, #writer_box span {
position: absolute;
}

그런데 아마도 이렇게 하면 span으로 감싼 글자가 이미지 위쪽에 겹쳐있을 것이다. 이때는 바닥을 기준으로 위치를 잡도록 span에다가 bottom: 0px; 을 추가할 수 있다.

그리고 img와 span을 감싸고 있는 div의 크기를 정해주는게 좋겠다. 어떨땐 짜부되서 이미지와 span을 알아볼 수 없을 때도 있으니 height 값을 설정해주면 되겠다.

흠냐.. 예전부터 해보고 싶었는데.. 이제사 해보네;


[IBM DW] HTML5 navigator

http://www.ibm.com/developerworks/opensource/library/x-html5mobile1/index.html

HTML5에 대해 궁금하던 찰나 무심코 IBM DW에 들어가봤더니.. 역시나 좋은 글들이 마구 쏟아지고 있었다. 
이 글에서 소개하는  내용은 흔히 GPS라 부르는 기능에 관한 것이다. 그것만 보면 심심할까봐 트위터 API랑 연동해서 접속한 사람 근방의 트위터글을 검색해 주는 애플리케이션을 소개하고 있다.
현재 위치 알아내기
            var gps = navigator.geolocation;
            if (gps) {
                alert(“gps enabled”);
                gps.getCurrentPosition(searchTwitter,
                        function(error) {
                            alert(“Got an error, code: ” + error.code + ” message: ” +
                                    error.message);
                        });
            } else {
                searchTwitter();
            }
첫번째 인자는 성공시 실행할 콜백, 두번째 인자는 실패시 실행할 콜백, 세번째는 옵션인데 생략했군요.
성공시 실행할 콜백에 전달되는 인자는 position
        function searchTwitter(position) {
            alert(“searchTwitter position=” + position);
            var query = “http://search.twitter.com/search.json?callback=showResults&q=”;
            query += $(“kwBox”).value;
            if (position) {
                var lat = position.coords.latitude;
                var long = position.coords.longitude;
                query += “&geocode=” + escape(lat + “,” + long + “,50mi”);
            }
            alert(“query=” + query);
            var script = document.createElement(“script”);
            script.src = query;
            document.getElementsByTagName(“head”)[0].appendChild(script);
        }
저기서 꺼내서 사용할 값은 주로 coords의 latitude(위도)와 longitude(경도). 여기서 잠깐… 위도 경도가 뭐더라.. 어떤게 가로인지 세로인지 햇갈린다. 적도를 기준으로 상하 각도를 위도. 북극과 남극은 그래서 위도 90. 경도는 영국 그리니치 천문대를 기준으로 좌우 각도.  서울은 북위 37도, 동경 126도.
위치 추적하기
trackerId = gps.watchPosition(function(pos){
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
map.setCenter(latLng);
theUser.setPosition(latLng);
showLocation(pos);
});
watchPosition을 사용하면 계속해서 좌표 받아옴.
function stopTracking(){
if (trackerId){
navigator.geolocation.clearWatch(trackerId);
}
}
trackerId를 clearWatch에 넘겨줘숴 종료한다.
트위터 API랑 구글맵 API 사용법도 나오는데… 생략~

[CSS] 탭 만들기

탭에 들어갈 요소들을 일단 ul li 엘리먼트를 사용하여 내용을 정의한다.

<ul id=”nav”>
  <li id=”t-email”><a href=””>E-MAIL</a></li>
  <li id=”t-reportl”><a href=””>KOMA-REPORT</a></li>
  <li id=”t-em”><a href=””>KOMA-EM</a></li>
</ul>

이 상태에서는 세로로 쭉 나열하며 목록에 점 하나씩을 달고 있는 형태가 된다.

이제 ul에 width를 넓히고, li들을 왼쪽에 차곡 차곡 떠있게 설정한다.

            #nav {
                float: left;
                width: 100%;
                margin: 10px 10px 0 0;
                padding: 10px 0 0 0;
                list-style: none;
                background: url(/images/new/bt_line.png) repeat-x bottom left;
            }
           
            #nav li {
                float: left;
                margin: 0;
                padding: 0;
                font-size: 80%;
            }

이때 float을 사용하고 있는 li를 감싸는 nav에도 꼭 float을 설정해야 페이지가 깨지지 않는다.

다음은 a를 탭 모양으로 다듬어 준다. 패딩 주고, 패딩, 마진을 주고, 탭 전체를 클릭할 수 있게 설정한다.

            #nav a {
                float: left;
                display: block;
                margin: 0 1px 0 0;
                padding: 4px 8px;
                color: #333;
                text-decoration: none;
            }

마우스를 올렸을 때 다른 모습으로 효과를 준다.

            #nav a:hover {
                color: #333;
                background: #edf4fc;
                border: #9fc5f6 solid 1px;
                border-bottom: none;
            }

클릭한 탭의 모양이 변경되도록 설정한다. 이 부분이 조금 재미있는데, 클릭을 하면 자바스크립트로 body의 id 값을 변경하고, 해당 id의 body 밑에 있는 특정 탭의 id에 있는 a를 css로 꾸며 주면 된다.

            body#em #t-em a{
                color: #333;
                background: #edf4fc;
                border: #6593cf solid 1px;
                border-bottom: none;;
            }

이런 형태다. body#em #t-em a 이것을 #em #t-em a 이렇게 써도 상관없으며, 모든 탭에 적용해야 하기 때문에.

            #email #t-email a,
            #report #t-report a,
            #em #t-em a {
                color: #333;
                background: #edf4fc;
                border: #6593cf solid 1px;
                border-bottom: none;;
            }

이렇게 설정할 수 있다.

[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기


링크를 걸면 보통 텍스트 부위만 클릭할 수 있는데, 해당 블럭을 클릭할 수 있게 수정하면 좀 더 편리함.

display:block;
=> a 엘리먼튼에 display:block을 적용함.

마우스를 올렸을 때 배경색이나 배경 이미지를 변경하여 현재 선택하려는 요소가 다른 것과 구분되게 함.

a:hover { background-color: #94B8E9;}
=> hover 유사 클래스를 사용하여 간단하게 롤오버 적용.

[CSS]그라데이션 배경 사용하기


가로 폭 1px 짜리 그라데이션 이미지를 만들고, 가로로 쭉 반복 시켜줌.

background: url(배경이미지) repeat-x;

=> 배경 이미지를 가로로 반복시킴. 세로로 반복하는 repeat-y도 있음.

배경이 커서 그라데이션 이미지로 커버가 안 될 때는 그라데이션이 끝나는 지점과 같은 색을 배경으로 깔아줌.

background: 색상코드 url(images/new/level1_bg.png) repeat-x;