Whiteship's Note

'View'에 해당되는 글 48건

  1. 2010.07.06 [IBM DW] HTML5 navigator
  2. 2009.09.22 [제이쿼리] 매개변수가 있는 function을 HTML 엘리먼트에서 분리하기 (12)
  3. 2009.07.08 [jQuery] 날짜 선택하기
  4. 2009.05.27 [JQuery] J쿼리 이용해서 속성 값 변경하기, 엘리먼트 셀렉션, 이벤트 추가하기 (2)
  5. 2009.05.26 [JavaScript] id값 변경하기 (4)
  6. 2009.05.26 [CSS] 탭 만들기 (2)
  7. 2009.05.22 [CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기
  8. 2009.05.22 [CSS]그라데이션 배경 사용하기 (2)
  9. 2009.05.15 XPath Path Expression 문법
  10. 2008.12.15 document.location.href 써먹기 (2)
  11. 2008.10.14 태그 파일에서 객체 노출시키기
  12. 2008.10.13 DisplayTag에서 팝업 링크 달기
  13. 2008.10.01 DisplayTag 체크 박스 컬럼 추가하기
  14. 2008.09.30 DisplayTag 히든 컬럼(hidden column) 추가하기 (1)
  15. 2008.09.30 그리드 태그 파일 으윽.. 머리야~ (2)
  16. 2008.09.25 JavaScript Calendar
  17. 2008.09.22 휴.. 폼 태그 파일 완성.
  18. 2008.09.19 items를 사용하는 태그 파일 꺄오~
  19. 2008.09.17 1년 반 만에 다시 찾은, EL 안에 EL 사용하는 방법 (7)
  20. 2008.09.17 태그 파일 중복 제거 예제
  21. 2008.09.17 javascript:void(0) 이게 뭔가? (4)
  22. 2008.09.14 태그 파일 배포하기
  23. 2008.03.31 Chapter 14. Image Replacement
  24. 2008.03.31 Chpater 13. Styling Text
  25. 2008.03.26 Chapter 10. Applying CSS
  26. 2008.03.23 Chapter 9. Minimizing Markup
  27. 2008.03.23 Chapter 8. More Lists
  28. 2008.03.23 Chapter 7. Anchors
  29. 2008.03.23 Chapter 6. Strong, EM and Other Phrase Elements
  30. 2008.03.23 Chapter 5. Forms

[IBM DW] HTML5 navigator

View/HTML/CSS : 2010.07.06 20:41


http://www.ibm.com/developerworks/opensource/library/x-html5mobile1/index.html
http://www.ibm.com/developerworks/kr/library/x-html5mobile1/ (번역)

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 사용법도 나오는데... 생략~




'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top


[제이쿼리] 매개변수가 있는 function을 HTML 엘리먼트에서 분리하기

View/JavaScript : 2009.09.22 17:35


매개변수가 없는 함수는 HTML에서 분리가 쉽습니다.

$(document).ready( function(){

    $("#comment_add").click(function() {
        $("form").submit();
    });

}

이런식으로 제이쿼리를 이용해서 click 이벤트가 발생했을 때 특정 폼을 서브밋하라고 이벤트를 등록할 수 있죠. 그러나;; 매개변수가 들어간 녀석들은 어떻게 할지 좀 난감합니다.

<img id="btn_list" class="action" src="<c:url value="/images/study/back.png"/>" onclick="javascript:fn_click_study(${meeting.study.id});"/>

예를 들어 위와 같이 특정 함수에 어떤 변수 하나를 넘겨줘야하는데, 그 값이 매번 달라지고, 목록 속에 들어있는 모든 요소들에 대한 것이라.. 페이지 로딩시에 위와 같이 등록하기가 좀...

그래서 같이 스터디 하는 형 중에 제이쿼리를 유리갤라만큼 하시는 분이 계셔서 물어봤더니 다음과 같이 해결해 두셨더군요.

<img id="btn_edit" class="action" src="<c:url value="/images/study/edit.png"/>" member="${meeting.study.id}" meeting="${meeting.id})" />

이렇게 엘리먼트에 임의이 속성을 추가합니다. 이제 페이지 로딩시에 등록할 수 있습니다.

$(document).ready( function(){

    $("#btn_edit").click(function(){
        var self = $(this);
        var url = '<c:url value="/study/"/>' + self.attr("study") + "/meeting/update/" + self.attr("meeting") + ".do";
        $(document).attr("location", url);

    });

}

아.. 그나저나 c:url 정말 악몽 같네요. 저거 없으면 context path가 루트여야만 제대로 동작하고.. @_@
아휴 귀차나.. ㅠ.ㅠ
top


[jQuery] 날짜 선택하기

View/JavaScript : 2009.07.08 20:33


jQuery UI 위젯이 제공하는 기본 달력은 다음과 같습니다.


흠.. 이것까진 간단했습니다. 이 것을 이용한 태그 파일 두개를 만들었습니다. 하나는 검색 필드용 하나는 폼 필드용. 검색 필드는 get 방식으로 url뒤에 줄줄이 붙여서 가져올 것이고 폼 필드는 post 방식에서 사용하여 model의 특정 속성에 바로 바인딩 할 겁니다. 둘 다.. 자바스크립트 코드 부분은 다음과 같습니다.

    $(function() {
        $("#${id}").datepicker({
            dateFormat: 'yy/mm/dd',
            changeMonth: true,
            changeYear: true,
            yearRange: '${fromNS}:${toNS}'
         });
    });

적당한 포맷을 설정하고, 연도와 달을 좀 더 변경하기 쉽게 드랍다운으로 설정했고, 연도 범위를 설정했는데, 이 값은 태그에 전달해준 값을 쓰기로 했습니다. 값을 전달해 주지 않으면 기본값을 쓰도록 했지요.

복잡한건, 날짜 범위를 선택하는 것인데, 이건 Ajaxian에서 10가지 date picker중 하나로 선정된 filament group의 daterangepricker를 이용했습니다.


    $(function() {
        $("#${id}").daterangepicker({
            dateFormat: 'yy/mm/dd',
            datepickerOptions: {
                changeMonth: true,
                changeYear: true,
                yearRange: '${fromNS}:${toNS}'
            }
        });
    });

대충 이렇게 보여집니다. 옵션이 다양해서 이 녀석을 써봤습니다. 문제는 하나의 필드에 두 개 날짜 값을 넣어주고 있어서 DateRange라는 클래스를 만들고, DateRangePropertyEditor도 만들어줬습니다. DateRange 클래스는 테스트를 통해서 문자열 값을 생성자에 넣어줬을 때 제대로 동작하는지 확인을 해보았고, DRPE를 등록해서 돌아가는지 웹에서 확인도 해봤습니다.

이 녀석은 검색용 태그파일만 만들었는데.. 만들고 보니 날짜를 한 개만 받는 녀석이랑 용도가 겹치더군요. Today랑 Specific Date는 메뉴에서 빼고 싶어서 옵션들을 살펴봤는데 영~~ 시원찮네요. 흠.. 뺄 수 있을텐데 말이죠.


top


[JQuery] J쿼리 이용해서 속성 값 변경하기, 엘리먼트 셀렉션, 이벤트 추가하기

View/JavaScript : 2009.05.27 16:13


attr을 사용하면 됩니다. 이전에 작성한 탭 만들기 글에서 a 엘리먼트의 onclick 속성을 사용하여, 자바스크립트 함수를 호출했었는데, J쿼리를 이용해서 그런 부분을 완전히 자바스크립트 쪽으로 떼어 낼 수 있게 되었습니다.

            $(document).ready(function() {
                $("#topnav a").bind("click", function () {
                    var id = $(this).parents("li").attr("id");
                    $("body").attr("class", id);
                });
            });

이 간단한 코드에 위 제목에서 언급한 모든 것들이 들어있습니다. 먼저, 이벤트 등록을 html에서 완전히 분리할 수 있게 도와주는 코드는 바로..

$(document).ready(function() {

});

이 녀석입니다. 이 안에서 이벤트 등록 작업을 해주면,

<a href="#" onclick="changeMenu('report');">

HTML에서 이런 코드를 작성하지 않아도 됩니다.

다음은 이벤트를 등록하는 코드입니다.

$("#topnav a").bind("click", function () {

});

그 전에 셀렉션을 보겠는데, #topnav a 이 부분은 topnav id를 가진 엘리먼트 하위의 a 엘리먼트를 모두 선택하라는 것입니다. API를 보면 더 다양한 방법들이 예제와 함께 잘 나와있습니다.

다시 이벤트 코드로 돌아가서 bind는 특정 이벤트에 어떠한 함수를 호출하도록 등록하는 함수인데, 이것을 특정 이벤트에 맞게 줄여서 다음과 같이 쓸 수도 있습니다.

$("#topnav a").click(function () {

});

간단하죠. click은 클릭하라는게 아니라 click 이벤트 핸들러를 등록하는 겁니다.

var id = $(this).parents("li").attr("id");

이 코드에서는 parents를 사용해서 자신을 감싸고 있는(여기서 자신은 사용자가 클릭한 a 엘리먼트겠죠.) 엘리머먼트 중에 li를 선택하고, 그 엘리먼트의 id 속성 값을 가져옵니다.

attr(속성이름)은 보시다시피 속성의 값을 가져오는 게터와 비슷합니다.

이와 반대로 세터 역할을 하는 함수도 역시 attr인데 사용법이 조금 다릅니다. 이번에는 인자를 하나 더 줍니다.

$("body").attr("class", id);

이렇게, attr(속성이름, 값) 형태로 사용하면 세터같이 동작합니다. 참~~ 편리하군요.


ps: 원래는 body의 class가 아니라 id를 변경하도록 코드를 작성했었는데, 잘 되지 않아서 class를 이용해봤는데 잘 동작하네요. 왜 그런지는 모르겠습니다. $(document).ready(function(){}); 이 것을 사용하지 않으면 id 변경도 잘 되는데 말이죠.. 저것과 관련이 있어 보입니다.
top


[JavaScript] id값 변경하기

View/JavaScript : 2009.05.26 16:52


<a href="#" onclick="changeMenu('report');">KOMA-REPORT</a>

화면에서 changeMenu('report'); 형태로 자바스크립트를 호출하게 하고, 자바스크립트 함수를 다음과 같이 정의합니다.

var changeMenu = function(id) {
    document.body.id = id;
}

간단하더군요.
top


[CSS] 탭 만들기

View/HTML/CSS : 2009.05.26 14:53




탭에 들어갈 요소들을 일단 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;;
            }

이렇게 설정할 수 있다.

'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top

TAG CSS,

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

View/HTML/CSS : 2009.05.22 09:59



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

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

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

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

'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top


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

View/HTML/CSS : 2009.05.22 09:54



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

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

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

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

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



'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top


XPath Path Expression 문법

View/HTML/CSS : 2009.05.15 19:55


참조: http://www.w3schools.com/XPath/xpath_syntax.asp

자주쓰는 표현식

노드이름: 해당 이름의 모든 하위 노드를 선택한다.
/: 최상위 노드에서부터 선택한다.
//: 현재 문서에서 해당 노드에 대응하는 모든 모드를 (위치에 상관없이)선택한다.
.: 현재 노드를 선택한다.
..: 현재 노드의 상위 노드를 선택한다.
@: 속성을 선택한다.


와일드 카드

*: 모든 엘리먼트 노드
@*: 모든 속성 노드
node(): 모든 종류의 노드

<?xml version="1.0" encoding="ISO-8859-1"?>

<bookstore>

  <book>
    <title lang="eng">Harry Potter</title>
    <price>29.99</price>
  </book>

  <book>
    <title lang="eng">Learning XML</title>
    <price>39.95</price>
  </book>

</bookstore>

표현식 사용 예제

bookstore: bookstore 엘리먼트의 모든 하위 노드를 선택한다.
/bookstore: bookstore를 선택한다.
//bock: 모든 book 엘리먼트를 선택한다.
bookstore//book: bookstrore 하위에 있는 book 엘리먼트를 선택한다.
//@lang: 모든 lang 속성을 선택한다.

/bookstore/book[1]: bookstore 하위의 book 엘리먼트 중에 첫 번째 것을 선택한다.(IE5는 0이 첫 번째 것을 가리키는데 W3C 표준은 1이 맞다.)
/bookstore/book[last()]: bookstore 하위의 book 엘리먼트 중에 마지막 것을 선택한다.
/bookstore/book[last()-1]: 마지막에서 하나 전 것을 선택한다.
/bookstore/book[position()<3]: 처음 두 개를 선택한다.
//title[@lang]: lang이라는 속성을 가진 모든 title을 선택한다.
//title[@lang='eng']: lang 속성의 값이 eng인 모든 title을 선택한다.
/bookstore/book[price>35.00]: price 엘리먼트의 값이 35보다 큰 (bookstore 하위의) book을 선택한다.
/bookstore/book[price>35.00]/title: price 엘리먼트의 값이 35보다 큰 (bookstore 하위의) book의 title을 선택한다.

와일드 카드 사용 예제

/bookstore/*: bookstore 하위의 모든 엘리먼트를 선택한다.
//*: 문서에 있는 모든 엘리먼트를 선택한다.
//title[@*]: 어떤 속성이라도 가지고 있는 title 엘리먼트를 선택한다.

표현식 연산자 |

//book/title | //book/price: book에 있는 모든 title과 price 엘리먼트를 선택한다.
//title | //price: 문서에 있는 모든 title과 price를 선택한다.
/bookstore/book/title | //price: bookstore에 있는 book에 있는 모든 title과 문서에 있는 모든 price를 선택한다.

Webdriver에서 xpath를 사용하여 엘리먼트를 선택할 수 있는 기능을 제공함.

예)  submit = driver.findElement(By.xpath("//input[@type='submit']"));

'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top

TAG xpath

document.location.href 써먹기

View/JavaScript : 2008.12.15 16:14


    <script>
    function doinvconfirm() {
        var res = confirm("재고조사를 하시겠습니까?");
        if (res == false) return;

        document.location.href = "doinvconfirm.do";
    }
    </script>

<a href="javascript:doinvconfirm()" class="black">&nbsp;재고조사</a>


흠~ document.location.href를 이용하면 URL 주소창에 해당 URL을 입력한 거랑 동일한 효과가 나는 거군요. 자세한 내용은 여기서 참조할 수 있습니다.
top


태그 파일에서 객체 노출시키기

View/JSP : 2008.10.14 13:27


태그 파일에 어떤 객체를 전달하는게 아니라, 그 반대로 태그 파일에서 어떤 객체를 외부로 노출 시킬 수 있습니다. 태그 파일을 사용하고 있는 쪽에서 태그 파일이 가지고 있는 어떤 값에 접근하고자 할 때 유용하게 사용할 수 있겠습니다. jspContext를 사용하여 원하는 객체를 원하는 이름으로 저장해두면 됩니다.

상위 태그 파일

gridpage.tag

<%@ variable name-given="startNum" %>

<%
jspContext.setAttribute("startNum", count);
%>

JSP 파일

grid.jsp
<o:gridpage>
   ${startNum}
</o:gridpage>


top


DisplayTag에서 팝업 링크 달기

View/JSP : 2008.10.13 12:13


DisplayTag를 계속해서 사용해보니, 한계점들이 들어납니다. 역시 직접 사용해서 뭔가 만들어보기 전까진 모르는건가 봅니다. 암튼, 찾아보니 어떻게든 방법은 있길래 적용했습니다.

    <d:column title="No">
        <a href="javascript:sendToUpdate(<c:out value="${maingrid.id}" />)">
            <%out.print(count++);%>
        </a>
    </d:column>

거의뭐.. displaytag가 해주는 일은 없습니다. 그냥 자바스크립트를 이용해서 팝업창 띄우기라고 글 제목을 바꿔야할지도 몰겠습니다.

<script type="text/javascript">
function sendToUpdate(selectedId) {
    popup("update.do?id=" + selectedId + "&gridid=maingrid", "maingridpopup", 500, 600, "yes", "yes");
}

이제, 그리드 완성입니다. 태그 파일로 다듬고, 태그 파일 서술자 만들어서 url로 태그 파일 참조해서 사용할 수 있는지만 확인하면 OSAF 배포합니다. 이번 주를 목표로 합니다. 아자 아자 파이팅!!!!
top


DisplayTag 체크 박스 컬럼 추가하기

View/JSP : 2008.10.01 13:21


참조: http://displaytag.sourceforge.net/11/tut_implicitobjects.html

<d:table name="list" class="maingrid" id="maingrid">
    <d:column><input type="checkbox" name="selectedIds" value="${maingrid.id}"></d:column>

저렇게 table에 id를 주면, implicit 객체에 접근할 수 있습니다. 특정 속성에 접근할 수 있도 있고, 줄 번호를 출력하고 싶을 때 사용할 수 있습니다. 위의 경우 ${maingrid_rawNum} 이라고 하면 줄번호를 출력합니다. 저는 줄번호를 DispalyTag가 아니라 서비스에 첫 번째 줄 번호를 가져와서 차차 찍어주기 때문에, 저 속성은 사용하지 않았습니다. 대신에 id값을 가지고 있는 체크박스를 표현할 때 사용했습니다.

이젠 자바스크립트로 체크된 값들을 가져오는 일이 남았군요.


top


DisplayTag 히든 컬럼(hidden column) 추가하기

View/JSP : 2008.09.30 17:02


캬오.. 간단하지 않네요. media 속성 값중에 "none"이라는 값을 지원해주면 좋을텐데, 이 값은 지원하지 않습니다. 이슈 트래커에 올리면 반영해주려나.. 흠..

방법은.. 일단 CSS에 hidden이라는 클래스 하나를 추가합니다.

.hidden {
    display: none;
}

그리고 컬럼의 class와 headerClass의 값을 hidden으로 설정해줍니다.

    <d:column property="id" class="hidden" headerClass="hidden" />

끝~ 나중에 OSAF 태그 파일로 감싸서 좀 더 간단하게 이 기능을 제공할 수 있겠습니다. isHidden 이라는 속서을 추가해서 말이죠. 간단하게~ 명시적으로~
top


그리드 태그 파일 으윽.. 머리야~

View/JSP : 2008.09.30 10:24


사용자 삽입 이미지

현재 그리드에 스타일 적용과 데코레이터 사용법까지 확인을 했고, 뭘 해야 할지 잠시 정리해 봤습니다. 곰곰히..

1. 페이지 네비게이션 바 추가.(완료)
-> displaytag가 제공하는 네비게이션바도 있지만, 그건 이미 많은 양의 데이터를 세션에 집어넣고 그 중에서 페이징처리를 하는거기 때문에 별로입니다. 제대로 페이징을 하려면 서비스 단에서 제공하는 만큼의 데이터가 한 페이지 분량이 되고, 페이징 로직도 서비스단에서 제공하는 걸 이용해야 합니다.

2. id값을 히든 컬럼으로 추가.(완료)
-> 한 Row가 하나의 객체 정보를 보여주고 있고 그 중에 선택을 해서 삭제/수정 작업을 하려면 id를 물고 있어야합니다. 따라서 id 값은 테이블에 안 보이는 컬럼으로 추가되어 있어야합니다.

3. 순번 표시(완료)
-> id가 아닌, 컬럼 줄 수를 표시해야 합니다. 500개의 데이터 중에 해당 줄이 몇 번째 데이터에 해당하는지, 기본적으로 이 순서로 정렬해서 보여줄 필요가 있겠죠. 이 기능도 역시 서비스 단과 맞물려서 동작해야겠습니다. displaytag에서도 뭔가 제공해주겠지만, 그건 저 한 페이지 내용에 대한 순번일 뿐, 전체 데이터에 대한 순번은 서비스 단이 알고 있을테니 말이죠.

4. 정렬 기능(에러)
-> 각 컬럼 헤더에 정렬 단추를 달고, 해당 단추를 눌러서 정렬 할 수 있는 기능을 제공해야 합니다. 이 기능은 displaytag가 제공하기 때문에, 설정만 추가하면 됩니다.

5. 링크 기능
-> 어떤 줄을 더블클릭하면, 바로 수정 화면으로 이동하도록 설정하고 싶습니다. 이 기능은 displaytag가 제공하는 링크 기능을 이용하면 간단하게 될 듯 합니다.

6. 컬럼 데이터 포맷
-> 금액이나 날짜 데이터의 경우 포맷을 설정할 수 있는 기능을 displaytag가 제공합니다. 그 패턴을 좀 익혀서 정리해둬야 겠습니다.

7. 체크 박스
-> 그리드 맨 왼쪽에 체크 박스 컬럼을 만들어서 다중 선택을 지원합니다. 다중 선택으로 해당 객체의 id 값들의 배열을 특정 요청 매개변수로 넘겨줄 수 있다면, 그 뒤엔 여러가지 일들을 할 수 있겠죠.

이밖에도 그리드 편집/새로운 줄 추가 등 여러 기능이 있을 수 있겠지만.. 일단 저 위의 것들부터도 그닥 만만해 보이지 않습니다. 저것만 끝내면 OSAF 공개인데... ㅠ.ㅠ 파이팅 하자 파이팅 해..

updated today 6:00


top


JavaScript Calendar

View/JavaScript : 2008.09.25 13:52


참조: http://www.dynarch.com/projects/calendar/
사용자 삽입 이미지

저렇게 달력을 뿌려주는 자바스크립트 라이브러리입니다. Date 정보를 입력받을 때 사용하면 유용하겠죠. 여러 가지 스타일 시트도 제공해주고, 여러 포맷으로 데이터를 조작할 수도 있고, 좋습니다.

jscalander가 제공하는 예제 소스 코드를 보면 어떻게 이용할 수 있을지 대충 알 수 있습니다.
<form action="#" method="get">
<input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
</form>

<script type="text/javascript">
    Calendar.setup({
        inputField     :    "f_date_b",      // id of the input field
        ifFormat       :    "%m/%d/%Y %I:%M %p",       // format of the input field
        showsTime      :    true,            // will display a time selector
        button         :    "f_trigger_b",   // trigger for the calendar (button ID)
        singleClick    :    false,           // double-click mode
        step           :    1                // show all years in drop-down boxes (instead of every other year as default)
    });
</script>

친절하게 주석도 있기 때문에, 금방 적용하실 수 있겠죠. 하지만, 약간의 번거로움은 감수를 하셔야 하며, 저런 컴포넌트가 여럿 필요할 때는 복사 붙여넣기 코드가 JSP 페이지 사방에 나타날 수 있을 겁니다. 그럴 땐 태그 파일을 만들어서 컴포넌트화 해 두면 매우 편합니다.

언젠가 공개할 OSAF를 사용하신다면, 간단한 태그 파일 sdata.tag로 쉽게 저런 UI 컴포넌트를 만들 수 있습니다.

<o:sdate path="birthday" label="생일" />

이렇게 한 줄이면 끝이죠. 캬오~ 태그 파일 만쉐이! OSAF 만쉐이!!
top


휴.. 폼 태그 파일 완성.

View/JSP : 2008.09.22 11:59


<o:popuppage title="사원등록">
    <o:buttons>
        <o:savebtn />
        <o:cancelbtn />
    </o:buttons>
    
    <o:form>
        <o:ftext label="이름" path="name" size="10" maxlength="20" />
        <o:ftext label="아이디" path="loginId" size="15" maxlength="20" desc="최대 20자리까지 입력 할 수 있습니다." />
        <o:fpassword label="패스워드" path="password" size="10" maxlength="16" desc="최대 16자리까지 입력 할 수 있습니다." />
        <o:fradiobuttons label="성별" path="sex" items="${ref.sexType}" />
        <o:fcheckboxes label="취미" path="hobbies" items="${ref.hobbyType}" />
        <o:fselect label="국적" path="location" items="${ref.locations}" isCOV="yes" />
        <o:ftextarea label="메모" path="memo" rows="3" cols="50" />
    </o:form>
</o:popuppage>

이게 추가와 수정시에 사용할 JSP 페이지 코드입니다. JSP를 몰라도 금방 태그 파일 몇개만 익히면 쉽게 페이지를 찍어낼 수 있습니다. 이 페이지에서 사용하고 있는 태그 파일들은 다음과 같습니다.

사용자 삽입 이미지

흠냐~ 이 녀석들로 만들어 낸 화면입니다.
사용자 삽입 이미지

물론 CSS도 가미가 되어 있습니다. CSS는 잘 몰라서 사부님이 만들어 둔 걸 그대로 쓰고 있습니다. 저기 items 뿌리는 부분의 label 스타일을 좀 변경하고 싶은데;; 일단 스타일은 나중에 변경하기로.. ㅋㅋ

사용자 삽입 이미지

업데이트 뷰에서도 위와 동일한 태그를 사용하면 됩니다. 흠.. 버튼을 하나 추가해서 삭제버튼을 달아야겠군요.

이것으로 폼 태그 파일들은 다 준비가 됐습니다. 이제 그리드 태그 파일만 완성하면... 드디어 OSAF를 출시할 수 있게 됩니다. 캬오~~
top


items를 사용하는 태그 파일 꺄오~

View/JSP : 2008.09.19 19:17


태그 파일 만드는데 무슨 설계가 필요할까? 생각을 하자면, 한 없이 생각할 것이 많을 수 있습니다. 어떤 속성들을 받을 것인가? 속성 타입은 그냥 문자열로 할까 아니면 특정 타입으로 받을까? 태그 파일 코드 중복을 어떻게 제거할까? EL안에 EL을 쓸까? 덩덩덩...

오늘 고민한 건 저 중에서도 어떤 속성과 그 속성에 넘겨줄 값은 무슨 타입인가?에 대한 겁니다. 좀 더 구체적으로 HTML radio, checkbox, select 에 대응하는 태그 파일을 만들 때, items라는 속성에 어떤 값을 넘겨줄지에 대한 고민을 했습니다.

이런 경우가 있겠죠. 취미를 입력받아야 하는데, 예시로 몇개를 제공하고 그 중에서 선택할 수 있게 하려고 합니다. 그럼 화면에 참조할 데이터를 전달해야 합니다. 이 데이터가 최종적으로 items에 설정될 값이죠. 따라서 어떤 값을 넘겨줄 수 있는지 고민을 해야 합니다. 여러 형태로 참조 데이터를 넘겨줄 수 있겠지만, 일단 세 종류로 간추렸습니다.

1. Entity Type Collection

public List<Hobby> getHobbyType{
    return hobbyDao.getAll();
}

public class Member {
    Hobby hobby;
}

Entity 타입의 경우 화면에 보여줄 값을 가지고 있는 변수(textpath)와 실제 값을 가지고 있는 변수(valuepath)가 모두 엔티티의 속성입니다. 그리고 이 변수 이름은 각각의 엔티티에 따라 변할 수 있죠. 따라서 태그 파일에 valuepath와 textpath를 추가하고, 최종적으론 EL의 EL을 사용해서 값을 가져오면 됩니다.

2. Value Type Collection

public List<String> getHobbyType{
  return Arrays.asList("coding", "music", "movie");
}

public class Member{
  String hobby;
}

이 경우는 1번에 비해 매우 간단한데, 일단 차이는 textpath와 valuepath가 콜렉션에 들어있는 값이고, 이 값을 그대로 엔티티에 값으로 설정하면 되며, 일단, 스프링의 form 태그를 활용하면 정말 간단하게 태그 파일을 구현할 수 있습니다.

3. AbstractType's 하위클래스

public HobbyType getHobbyType{
  return HobbyType.getInstance();
}

public class Member {
    int hobby;
}

이 경우는 특수한 경우로, 프레임워크에서 별도의 enum 지원 클래스를 만들었을 때에 해당합니다. 특히 저 코드는 OSAF의 AbstractType을 사용한 경우로, 이 클래스에 대해서는 나중에 자세히 설명할 기회가 있을 것 같아서 자세한 설명은 미루겠습니다. 기본적으로 AbstractType 클래스는 ArrayList 타입입니다. 결국은 1번과 같은 것 아니냐?.. 아닙니다. key, value를 가지고 있는 Pair 타입의 콜렉션이기 때문에, 고정적인 valuepath와 textpath를 가지고 있습니다. 따라서 태그파일에서 컨벤션으로 실제 값과 화면에 보여줄 값을 가져다 보여줄 수 있습니다.

이 세 가지 경우를 모두 고려해서 만들어야 하는 태그 파일들은..

fselect.tag
fradiobuttons.tag
fcheckboxes.tag

Coming Soon...with OSAF!!

ps: 이밖에도 경우수는 더 많습니다. Map, 배열, enum.. 이것들까지 지원할 수 있는 태그를 완성하면.. 짱먹는 폼 태그가 되는거죠. 캬~

top


1년 반 만에 다시 찾은, EL 안에 EL 사용하는 방법

View/JSP : 2008.09.17 17:50


커스텀 태그에서 Expression Language를 사용하다보면, 언젠간 아래처럼 쓰고 싶은 경우가 발생할 수도 있습니다. 전 예전에 한 번 이 벽에 부딪혀서 결국 못 넘고 좌절한 적이 있는데, 해당 글에 물개선생님이 남겨주신 댓글과 사부님이 만든 태그를 보니.. 이해가 됩니다.

먼저 상황부터 설명을 하자면,..

일단 EL 안에 EL을 사용하고 싶은 경우가 어떤 경우냐면.. 보통 ${member.name} 이렇게 쓰는데, 만약 이 때 이 name라는 값도 변수화 해서 property라는 태그 파일 속성으로 받도록 할 수 있겠습니다. 그리고 이 속성에는 name 뿐만 아니라, age, height 등등 여러 가지 member 객체가 가지고 있는 속성 값을 넣을 수 있다고 했을 때.. EL로 그 속성값을 뿌리려면..

<%@ attribute name="property" required="false" %>

${member.${property}}

이렇게 하고 싶습니다. 그쵸? 하지만, 해보시면 아시겠지만 안 됩니다. 저런 문법을 EL이 지원하질 않습니다.

심각: Servlet.service() for servlet sample threw exception
org.apache.el.parser.ParseException: Encountered "{" at line 1, column 4.
Was expecting one of:
    "}" ...
    "." ...
    "[" ...
    ">" ...
    "gt" ...
    "<" ...
    "lt" ...
    ">=" ...
    "ge" ...
    "<=" ...
    "le" ...
    "==" ...
    "eq" ...
    "!=" ...
    "ne" ...
    "&&" ...
    "and" ...
    "||" ...
    "or" ...
    "*" ...
    "+" ...
    "-" ...
    "?" ...
    "/" ...
    "div" ...
    "%" ...
    "mod" ...
    "(" ...
   
    at org.apache.el.parser.ELParser.generateParseException(ELParser.java:1874)
    at org.apache.el.parser.ELParser.jj_consume_token(ELParser.java:1754)
    at org.apache.el.parser.ELParser.DynamicExpression(ELParser.java:156)

자.. 이런 에러가 발생합니다. 괄호를 안쪽부터 처리해주면 좋겠지만, 희망사항이었던 것 같습니다. ${property}의 값이 name이면 ${member.name} 이 되고.. 이건 내부적으로 member.getName()을 호출해서 가져다주면 좋을텐데 말이죠. 흠... 복잡해 질까봐 이렇게 구현하지 않았을지도 모르겠습니다.

어쨋든, 저 윗 글에 물개선생님이 알려주신 코드대로 하면 EL안에 EL을 사용하는 효과를 얻을 수 있습니다.

<%@ attribute name="property" required="false" %>

<%
property = (property != null) ? property : "name";
Object memberPropertyValue = PageContextImpl.proprietaryEvaluate("${member." + property + "}", Object.class, (PageContext)this.getJspContext(), null, false);
out.print(memberPropertyValue.toString());
%>

이렇게 PageContextImpl를 이용해서 가져오면 됩니다. 위에서 제가 원하던 방법대로 자바 코드를 사용해서 처리한 겁니다. "${member." + property + "} 이렇게 하는 순간, 이미 안 쪽의 변수 값을 가져오기 때문에 이후에는 ${member.name}를 쓰는 것과 같은 것이 됩니다.

흠.. 이상합니다. 저 때도 분명 물개 선생님이 댓글로 코드까지 주셨는데, 저걸 못 써먹고 포기했었습니다. 거의 1년 반이 지난 이제와서 그때 포기했던걸 다시 하게 되네요. ㅋㅋ 1년 반이라...
top


태그 파일 중복 제거 예제

View/JSP : 2008.09.17 14:08


스프링 form태그를 이용해서 태그 파일 두 개를 만들었습니다. 하나는 일반 text, 하나는 password입니다.

osaf/ftext.tag
<%@ tag pageEncoding="euc-kr" %>

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%@ attribute name="path" required="true" %>
<%@ attribute name="label" required="false" %>
<%@ attribute name="size" required="true" %>
<%@ attribute name="maxlength" required="true" %>
<%@ attribute name="desc" required="false" %>

<p id="${path}row">
    <label>${label} :</label>
    <form:input path="${path}" size="${size}" maxlength="${maxlength}"  />
    &nbsp;${desc}
    <form:errors path="${path}" cssClass="error" />
</p>

osaf/fpassword.tag
<%@ tag pageEncoding="euc-kr" %>

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%@ attribute name="path" required="true" %>
<%@ attribute name="label" required="false" %>
<%@ attribute name="size" required="true" %>
<%@ attribute name="maxlength" required="true" %>
<%@ attribute name="desc" required="false" %>

<p id="${path}row">
    <label>${label} :</label>
    <form:password path="${path}" size="${size}" maxlength="${maxlength}"  />
    &nbsp;${desc}
    <form:errors path="${path}" cssClass="error" />
</p>

코드가 완전 똑같아 보입니다. 무슨 틀린그림 찾기도 아닌데, 차이를 발견하기가 힘듭니다. 어쩔까~~ 내비둘까.. 계속 다른 태그 만들까.. 중복을 제거하고 갈까.. 하다가. TDD 책이 생각났습니다.

꺠진 테스트 -> 코딩 -> 녹색 -> 리팩터링.

태그 파일도 이런 순으로 만들고 있습니다. 일단 뷰부터 만들고(저 태그를 사용하는 JSP 페이지부터 만들고) -> 태그를 작성합니다. -> 화면에 나오는지 확인!..

아무래도 리팩터링을 하고 넘어가야될 듯 합니다. 어떻게 할까.. 대충 떠오릅니다. 저 태그에서 또 다른 태그를 이용해서 화면에 뿌리면되고, 그 태그에 type을 넘겨줘서 그 태그 안에서 분기문으로 ..샤샥.. 유사코드는 떠오르는데 실제 코드는 안 떠오릅니다. OTL 코드는 제 블로그 어딘가를 치팅해가면서;; ㅋ

osaf/felement.tag
<%@ tag pageEncoding="euc-kr" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%@ attribute name="path" required="true" %>
<%@ attribute name="label" required="false" %>
<%@ attribute name="size" required="true" %>
<%@ attribute name="maxlength" required="true" %>
<%@ attribute name="desc" required="false" %>
<%@ attribute name="type" required="true" %>

<p id="${path}row">
    <label>${label} :</label>
    <c:choose>
        <c:when test="${type =='text'}">
            <form:input path="${path}" size="${size}" maxlength="${maxlength}" />
        </c:when>
        <c:when test="${type =='password'}">
            <form:password path="${path}" size="${size}" maxlength="${maxlength}" />
        </c:when>
    </c:choose>
    &nbsp;${desc}
    <form:errors path="${path}" cssClass="error" />
</p>

좋아. 이 태그를 사용해서 확인해보니, 잘 동작합니다. 그럼 이제 기존의 코드들을 수정합니다.

osaf/ftext.tag
<%@ tag pageEncoding="euc-kr" %>
<%@ taglib prefix="o" tagdir="/WEB-INF/tags/osaf" %>

<%@ attribute name="path" required="true" %>
<%@ attribute name="label" required="false" %>
<%@ attribute name="size" required="true" %>
<%@ attribute name="maxlength" required="true" %>
<%@ attribute name="desc" required="false" %>

<o:felement type="text" label="${label}" path="${path}" maxlength="${maxlength}" size="${size}" desc="${desc}" />

osaf/fpassword.tag
<%@ tag pageEncoding="euc-kr" %>
<%@ taglib prefix="o" tagdir="/WEB-INF/tags/osaf" %>

<%@ attribute name="path" required="true" %>
<%@ attribute name="label" required="false" %>
<%@ attribute name="size" required="true" %>
<%@ attribute name="maxlength" required="true" %>
<%@ attribute name="desc" required="false" %>

<o:felement type="password" label="${label}" path="${path}" maxlength="${maxlength}" size="${size}" desc="${desc}" />

OK. 중복제거 완료 입니다. 덤으로 사용자에게 선택권이 생겼습니다. type 속성을 사용해가면서 felement를 직접 쓰거나, type 속성 쓸 필요 없이 ftext나 fpassword 엘리먼트 사용할 수 있습니다.
top


javascript:void(0) 이게 뭔가?

View/JavaScript : 2008.09.17 12:03


참조 : http://www.tizag.com/javascriptT/javascriptvoid.php

- 새 페이지를 로딩하는게 아니라 어떤 액션을 실행하고 싶을 때 앵커의 href 속성에 사용.
- href 속성의 값에 javascript: 프리픽스를 사용해서 자바스크립트 문장을 사용할 수 있다. == direct URL JavaScript statements
- 예제 <a href="javascript: alert('News Flash!')">News Flash</a>
- Gmail 같은 곳에서 상당히 많이 쓰고 있다.
- href는 어떤 값이라도 있으면 해당 값을 새 페이지로 읽으려고 들기 때문에, 항상 null을 반환하는 void(0)를 호출해서 그걸 막는다.
- void는 숫자 하나를 받는데, 내부에서 쓰진 않는다. void(1) 이렇게 해도 상관은 없겠다.

top


태그 파일 배포하기

View/JSP : 2008.09.14 23:12


참조 :
http://docs.sun.com/app/docs/doc/819-3669/bnalj?l=ko&a=view

1. 작성한 태그 파일을 JAR로 묶기

- META-INF/tags 밑에 또는 그 하위 폴더에 태그 파일을 옮기고 묶는다.

2. TLD 파일을 작성하기

- WEB-INF/tag 밑에 두었으면 tld 파일 자동으로 만들어 주지만, 별도의 jar로 배포할 때는 반드시 TLD 파일을 작성해야 함. 태그 파일들의 위치를 알아야할테니..
- tld 파일은 META-INF/ 폴더 또는 그 하위 폴더에 둔다. 태그들이랑 같은 폴더에 둬도 상관없음.

3. JSP에서 참조하기

- <%@ taglib prefix="o" uri="www.opensprout.org" %>
- 여기서 uri는 진짜 URI를 말하는게 아니라, 그냥 이름. TLD 파일에 정의한 uri와 같은 값.
- JSP 2.0 이전에는 DD에 직접 TLD 위치를 설정해줬지만, JSP 2.0부터 WEB-INF/lib에 들어있는 JAR들의 META-INF/ 폴더 밑 그 하위 폴더를 뒤져서 TLD 파일을 찾아냄.

Whiteship's 사족

흠.. 글쿠나.. WEB-INF/tags 밑에 태그 두고 사용하면, 자동으로 TLD 파일을 컨테이너가 만들어 준댔는데.. 그럼 그 파일을 복사해서 좀만 수정해서 TLD를 만들면 편하겠네. 그렇게 자동으로 만들어진 TLD 파일은 어디에 만들어질려나.. WEB-INF/ 폴더 일려나.. 흠... 구하고 싶다. xml 파일 만들기 귀찮은데; TLD 생성기 같은거 없나.

top

TAG JSP, TagFile

Chapter 14. Image Replacement

View/HTML/CSS : 2008.03.31 14:01


Fahrner Image Replacement (FIR)

  • CSS를 적용해서 이미지로 교체할 텍스트를 표시한다.
<h1 id="fir">Fahrner Image Replacement</h1>
  • 텍스트를 제거해야 하니까 <span>으로 감싸서 제거한다.
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>

#fir span {

display: none;

}
  • fir css를 사용해서 백그라운드에 이미지로 만든 글자를 적용한다.
#fir {

width: 287px;

height: 29px;

background: url(fir.gif) no-repeat;

}
  • 장점: css를 지원하지 않는 브라우저에서는 그냥 보통 텍스트라도 보여줄 것이다.
  • 단점: display가 비주얼하게 글자를 숨기는 것 뿐만 아니라, 완전히 없애드릴 수도 있다. <span>이라는 별의미없는 태그가 필요하다. 이미지를 꺼버리는 사용자들에게는 난감하다.

Leahy/Langridge Image Replacement (LIR)

  • 별의미 없는 <span> 엘리먼트 없이 텍스트를 이미지로 바꾸기
  • 엘리먼트의 높이를 0으로 만들고 교체할 이미즤 크기만큼 padding-top을 설정한다.
<h1 id="lir">Leahy/Langridge Image Replacement</h1>


#lir {

padding: 90px 0 0 0;

overflow: hidden;

background: url(lir.gif) no-repeat;

height: 0px !important; /* for most browsers */

height /**/:90px; /* for IE5/Win */

}
  • Screen-reader 애플리케이션이 텍스트를 읽을 수 있다.(display 속성을 사용하지 않아서.)
  • 이미지를 꺼두고 CSS만 켜두는 사람에게는 아무것도 안보인다.
  • IE5/Windows 브라우저를 위해서 Box Model 핵을 사용해야 한다.

The Phark Method

  • 글자 들여쓰기를 엄청많이 해서 페이지에 존재하고 있지만, 보이지는 않도록 한다.
<h1 id="phark">The Phark Method</h1>

#phark {

height: 26px;

text-indent: -5000px;

background: url(phark.gif) no-repeat;

}
  • 간단해서 좋아보이지만 여전히 이미지를 꺼두면 안 보인다.

'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top


Chpater 13. Styling Text

View/HTML/CSS : 2008.03.31 14:00


Hypertext를 좀 더 멋지게 보이게 하는 방법

Times They are a-Changing

  • Times(Times new roman) 글자체는 여러 브라우저의 기본 글자체다. however, this could easily be changed by users to whatever they fancy, and of course shouldn't be relied upon.

줄 높이 설정하기

body {

line-height: 1.5em;

}
  • 줄 높이를 설정하여 가독성을 높일 수 있다.

글자체 설정하기

body {

font-family: "Lucida Grande", "Trebuchet MS", sans-serif;

line-height: 1.5em;

}
  • 사용자의 컴퓨터에 설치되어 있는 폰트를 고려하여 여러 개의 폰트를 설정한다.
  • 맨 앞에 것이 없으면 그 다음 것을 적용한다.
  • 글자체가 여러 단어로 구성되어 있다면, 따옴표로 묶는다.

Kerning (a.k.a. Letter-Spacing)

h1 {

letter-spacing: -2px;

}
  • 글자들의 간격을 조정할 수 있다.

Drop Caps

<p><span class="drop">I</span>f you're painting with latex paints, and
  • 문단을 멋지게 표현하기 위한 스타일 훅이 필요하다.
  • CSS2를 적용하는 브라우저들은 이런 훅이 필요없이 :first-letter 사용하면 된다.
.drop {

float: left;

font-size: 400%;

line-height: 1em;

margin: 4px 10px 10px 0;

padding: 4px 10px;

border: 2px solid #ccc;

background: #eee;

}

Text alignment

body {

font-family: Georgia, Times, serif;

line-height: 1.5em;

text-align: justify;

}
  • text-align: justify를 사용하면 양쪽으로 정렬된다.

Transforming Text

h1 {

letter-spacing: 4px;

font-style: italic;

text-align: center;

text-transform: uppercase;

}
  • text-transform: uppercase;를 사용해서 글자를 모두 대문자로 바꿀 수 있다.

Small Caps

h1 {

letter-spacing: 4px;

text-align: center;

font-variant: small-caps;

}
  • font-variant: small-caps;를 사용해서 전부 대문자로 바꿔주고, 단어의 첫 글자 이외의 글자들을 조금 작게 보여준다.

문단 들여쓰기

p {

text-indent: 3em;

}

'View > HTML/CSS' 카테고리의 다른 글

[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
top


Chapter 10. Applying CSS

View/HTML/CSS : 2008.03.26 11:54


CSS를 문서에 적용하는 방법

<style> 엘리먼트

<style type="text/css">

<![CDATA[

... CSS declarations here ...

]]>

</style>
  • embedded style sheet라고도 하며, CSS를 이해하지 못하는 브라우저들을 위해 CDATA 주석 안에 둔다.
  • 페이지를 로딩할 때마다 스타일을 정의한 부분도 매번 다운로드 된다.
  • 여러 페이지에서 동일한 스타일을 사용하고 있을 때, 이것을 변경하려면 여러 페이지를 모두 수정해야 한다.

외부의 스타일 시트 사용하기

<link rel="stylesheet" type="text/css" href="styles.css" />
  • 유지보수하기 편한다.
  • 한 번만 다운로드 한다.
  • 첫 번째 방법처럼 예전 브라우저들은 CSS를 그냥 그대로 화면에 뿌려버릴 수도 있다.

@import 사용하기

<style type="text/css">

<![CDATA[

@import "styles.css";

]]>

</style>
  • 두 번째 방법과 비슷하게 이것도 역시 외부 문서에서 읽어온다.
  • 네스케이프 4.X 이하의 버전에서는 CSS를 화면에 그대로 뿌리는데, 위 처럼 해두면 그걸 숨길 수 있다.

Inline Style

<h1 style="font-family: Georgia, serif; color: orange;">This is a Title</h1>
  • 가장 나중에 설정한 스타일이기 때문에 다른 스타일들을 오버라이딩한다.
  • 내용과 표현이 분리가 되지 않는다.
  • <head>에서 외부 파일을 참조할 수 없을 때 임시적으로 사용할 수 있다.

Extra Credit

Alternate Styles

<link rel="stylesheet" type="text/css" href="default.css" title="default"/>

<link rel="alternate stylesheet" type="text/css" href="largetext.css" title="large" />

<link rel="alternate stylesheet" type="text/css" href="largertext.css" title="larger"/>
  • rel 속성에 alternate stylesheet 값을 사용할 수 있다.
  • title 속성과 값도 추가해서 나중에 선택할 수 있도록 한다.

'View > HTML/CSS' 카테고리의 다른 글

[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
top


Chapter 9. Minimizing Markup

View/HTML/CSS : 2008.03.23 15:24


태그 최소화 하기

Descendant Selectors

<div id="sidebar">

<h3>About This Site</h3>

<p>This is my site.</p>

<h3>My Links</h3>

<ul>

<li><a href="archives.html">Archives</a></li>

<li><a href="about.html">About Me</a></li>

</ul>

</div>

#sidebar h3 {

font-family: Georgia, serif;

color: #c63;

border-bottom: 1px solid #ccc;

}



#sidebar ul {

list-style-type: none;

}



#sidebar li {

font-weight: bold;

}
  • 하위 태그들의 스타일을 위와 같이 정의하면, 하위 태그들에 굳이 class 속성을 추가하지 않아도 된다.

The Unnecessary <div>

<ul id="nav">

<li><a href="archives.html">Archives</a></li>

<li><a href="about.html">About</a></li>

</ul>
  • block 엘리먼트는 굳이 div로 감싸서 스타일을 적용할 필요가 없다.

'View > HTML/CSS' 카테고리의 다른 글

[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
top


Chapter 8. More Lists

View/HTML/CSS : 2008.03.23 15:20


순서가 있는 목록을 표현하는 방법

<ul> 사용하기

<ul>

<li>1. Chop the onions.</li>

<li>2. Saute the onions for 3 minutes.</li>

<li>3. Add 3 cloves of garlic.</li>

<li>4. Cook for another 3 minutes.</li>

<li>5. Eat.</li>

</ul>
  • 중간에 새로운 요소를 추가하면 번호를 전부 수정해야 한다.
  • 숫자들 앞에 bullet이 붙는다. 이건 CSS로 띄어낼 수도 있지만, CSS를 모르는 옛날 브라우저들은 어떻게 하나..

<ol> 사용하기

<ol>

<li>Chop the onions.</li>

<li>Saute the onions for 3 minutes.</li>

<li>Add 3 cloves of garlic.</li>

<li>Cook for another 3 minutes.</li>

<li>Eat.</li>

</ol>
  • 자동으로 넘버링 해준다.
  • type 속성으로 여러가지 타입의 넘버링을 할 수 있지만, CSS 설정하는 것이 좋다. HTML 4.01에서 deprecated 됐다.

용어와 설명을 표현하는 방법은?

<ul> 사용하기

  • 용어에만 따로 스타일을 적용해야 한다면?

<dl>, <dt>, <dd> 사용하기

<dl>

<dt>CSS</dt>

<dd>A simple mechanism for adding style (e.g. fonts, colors, spacing)

to Web documents.</dd>

<dt>XHTML</dt>

<dd>A family of current and future document types and modules that

reproduce, subset, and extend HTML, reformulated in XML.</dd>

<dt>XML</dt>

<dd>A simple, very flexible text format derived from SGML.</dd>

</dl>
  • term과 description에 각각 스타일을 적용할 수 있다.

'View > HTML/CSS' 카테고리의 다른 글

XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
top

TAG CSS, dl, HTML, ol, 웹 표준

Chapter 7. Anchors

View/HTML/CSS : 2008.03.23 15:18


페이지 내부로 이동하는 방법

비어있는 <a> 태그 사용하기

<p><a href="#oranges">About Oranges</a></p>

<a name="oranges"></a>
<h2>Oranges Are Tasty</h2>
  • 이동할 위치 위에 name속성을 사용하고 <a> 태그는 비어둔다.

헤더 내부에 <a>태그 사용하기

<p><a href="#oranges">About Oranges</a></p>

<h2><a name="oranges">Oranges Are Tasty</a></h2>
  • <a> 태그에 스타일을 적용하면 <h2> 태그에 적용한 스타일을 오버라이딩해버린다.
  • :link라는 pseudo-class를 사용하여 링크에 해당하는 스타일을 별도로 정의할 수 있다.

id 속성 사용하기

<p><a href="#oranges">About Oranges</a></p>

<h2 id="oranges">Oranges Are Tasty</h2>
  • 추가적인 <a> 태그를 사용하지 않아도 된다.
  • id 속성은 모든 엘리먼트에 붙일 수 있기 때문에, 어디든지 원하는 곳으로 이동하게 할 수 있다.
  • 다 좋은데, 몇몇 옛날 브라우저들이 id 속성을 인식하지 못한다.

전부 사용하기

<p><a href="#oranges">About Oranges</a></p>

<h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2>
  • 두 번째 방법과 마찬가지로, <a> 태그에 스타일 적용할 때 주의해야 함.

Extra Credit

<a> 태그의 title 속성

  • tooltip에 보여줄 내용을 적을 수 있다.
  • 사용자들에게 링크의 목적지에 대한 정보를 줄 수 있다.

a:link 스타일을 정의하여 링크에 해당하는 anchor에만 스타일을 적용할 수 있다.

a:link {

color: green;

text-decoration: none;

font-weight: bold;

}
  • <h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2> 이렇게 href 속성이 없는 anchor 태그에는 적용되지 않는다.

배경주기

a:link {

padding-right: 15px;

background: url(link_icon.gif) no-repeat center right;

}
  • 링크의 오른쪽에 이미지를 삽입한다.

점선

a:link {

color: green;

text-decoration: green;

border-bottom: 1px dotted green;

}
  • 링크 아래에 표시하는 줄을 점선으로 표시한다.

다녀온 링크 표시

a:visited {

color: purple;

}
  • 이미 클릭했던 링크의 색을 다르게 표시해준다.

마우스를 링크 위에 올릴 때

a:hover {

color: blue;

border-bottom: 1px solid blue;

}

클릭하는 순간

a:active {

color: red;

}

순서

  • LoVe/HAte 순서대로 정의해야 스타일이 섞이지 않는다.
  • a:link, a:visited, a:hober, a:active

'View > HTML/CSS' 카테고리의 다른 글

Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
top

TAG A, CSS, HTML, 웹 표준

Chapter 6. Strong, EM and Other Phrase Elements

View/HTML/CSS : 2008.03.23 15:17


표현 vs 구조

왜 <b>나 <i> 대신에 <strong>이나 <em>을 사용해야 하는가?

  • 표현법을 알려주는것이 아니라 의미와 구조를 설정하기 위해서다.
  • <em>은 emphasis 강조, <strong>은 strong 강한 강조: 이 둘을 어떻게 표현하느냐는 브라우저에 달려있다. 보통은 <em>은 이탤릭체로, <strong>은 굵은 글씨로 표현한다.
  • <b>와 <i>는 표현을 어떻게 할지 나타낼 뿐이다.

링크

  • 링크를 굵은 글씨나 이탤릭체로 표현하고 싶을 때는 CSS로 다음과 같이 설정한다. 표현과 관련된 것이니까...
#sidebar a {
font-weight: bold;
}

#sidebar a {
font-style: italic;
}

굵은 이탤릭체

  • 젤 먼저 얼마나 중요한지 선택하여 <em>이나 <strong> 둘 중 하나를 선택한다.
Building sites with web standards can be <em>fun</em>!

<span> 사용하기

Building sites with web standards can be <em><span>fun</span></em>!

em span {

font-weight: bold;

}
  • 구조와 관계없는 태그를 삽입하였기 때문에, 의미 구분을 제대로 하지 못했다.

class 사용하기

Building sites with web standards can be <em class="bold">fun</em>!

em.bold {

font-weight: bold;

}
  • 이와 반대로 <string> 태그에 italic을 CSS로 설정할 수도 있다.
Building sites with web standards can be <strong class="italic">fun</strong>!

strong.italic {

font-style: italic;

}

Extra Credit

<cite>

  • "<cite>: Contains a citation or a reference to other sources."

<abbr> and <acronym>

  • <abbr>: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
  • <acronym>: Indicates an acronym (e.g., WAC, radar, etc.)
  • 흠.. 두 개 차이가 뭐지..

<code>

  • XHTML 페이지에 소스코드를 적을 때 사용.

<samp>

  • 프로그램이나 스크립트의 예제 결과를 나타낼 때 사용.

<var>

  • <samp>와 비슷하게, <var>는 프로그램 파라미터나 변수를 나타낼 때 사용.

<kbd>

  • 사용자가 입력할 값을 표현할 때 사용.

'View > HTML/CSS' 카테고리의 다른 글

Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
top


Chapter 5. Forms

View/HTML/CSS : 2008.03.23 15:13


폼을 구성하는 방법

<table> 사용하기

<form action="/path/to/script" method="post">

<table>

<tr>

<th>Name:</th>

<td><input type="text" name="name" /></td>

</tr>

<tr>

<th>Email:</th>

<td><input type="text" name="email" /></td>

</tr>

<tr>

<th>&nbsp;</th>

<td><input type="submit" value="submit" /></td>

</tr>

</table>

</form>
  • 복잡한 폼을 표현할 때에 유용하다.

<br/> 사용하기

<form action="/path/to/script" method="post">
<p>

Name: <input type="text" name="name" /><br />

Email: <input type="text" name="email" /><br />

<input type="submit" value="submit" />

</p>
</form>
  • <br/> 간격이 좀 좁다.
  • 줄도 좀 안 맞는다.
  • CSS로 margin을 줘서 해결할 수 있다.
input {

margin: 6px 0;

}
  • input 컴포넌트의 위와 아래에 6px의 간격을 준다.

<p> 사용하기

<form action="/path/to/script" id="thisform" method="post">

<p><label for="name">Name:</label><br />

<input type="text" id="name" name="name" /></p>

<p><label for="email">Email:</label><br />

<input type="text" id="email" name="email" /></p>

<p><input type="submit" value="submit" /></p>

</form>
  • 각각의 컴포넌트를 <p>로 묶었다.
  • margin은 CSS로 처리할 수 있다.
#thisform p {

margin: 6px 0;

}
  • <label>의 for 속성과 <input>의 id에 같은 값을 설정하여 둘을 묶을 수 있다.
  • 그렇게 하면, 해당하는 컴포넌트와 label같의 구조적인 의미를 묶을 수 있고, label을 클릭하여 해당 컴포넌트에 영향을 줄 수 있어서 클릭이 가능한 범위가 늘어난다.

Form 정의하기

<form action="/path/to/script" id="thisform" method="post">

<dl>

<dt><label for="name">Name:</label></dt>

<dd><input type="text" id"name" name="name" /></dd>

<dt><label for="email">Email:</label></dt>

<dd><input type="text" id="email" name="email" /></dd>

<dt><label for="remember">Remember this info?</label></dt>

<dd><input type="checkbox" id="remember" name="remember" /></dd>

<dt><input type="submit" value="submit" /></dt>

</dl>

</form>
  • <dl>: definition list 사용하기. chapter8에서 자세히 다룬다.
  • label은 <dt>로 감싸고 컴포넌트는 <dd>로 감싼다. 스타일 적용하지 않으면 <dd>들은 기본으로 들여쓰기 해준다. 따라서 어긋나 있다. CSS없이 못 쓰겟다.
form dd {

margin: 0;

}



form dt {

float: left;

padding-right: 10px;

}
  • <dt>와 <dd>가 같은 줄에 놓이게 된다. <dt> 오른쪽으로 10px 간격을 주고 <dd>가 자리를 잡는다.

Extra Credit

<input>의 tabindex 속성 사용하기

<form action="/path/to/script" id="thisform" method="post">

<p><label for="name">Name:</label><br />

<input type="text" id="name" name="name" tabindex="1" /></p>

<p><label for="email">Email:</label><br />

<input type="text" id="email" name="email" tabindex="2" /></p>

<p><input type="checkbox" id="remember" name="remember"

tabindex="3" />

<label for="remember">Remember this info?</label></p>

<p><input type="submit" value="submit" tabindex="4" /></p>

</form>
  • tab키를 눌러서 컴포넌트 순회하는 순서를 설정할 수 있다.

<label>의 accesskey 속성 사용하기

<form action="/path/to/script" id="thisform" method="post">

<p><label for="name" accesskey="9" >Name:</label><br />

<input type="text" id="name" name="name" tabindex="1" /></p>

<p><label for="email">Email:</label><br />

<input type="text" id="email" name="email" tabindex="2" /></p>

<p><input type="checkbox" id="remember" name="remember"

tabindex="3" />

<label for="remember">Remember this info?</label></p>

<p><input type="submit" value="submit" tabindex="4" /></p>

</form>
  • label의 accesskey에 설정한 번호를 누르면 해당 label과 묶여있는 컴포넌트로 커서가 이동한다.
  • 검색창 같이 자주 사용하는 컴포넌트에 달아두면 유용하다.
  • 윈도우에서는 ALT + 숫자, Mac에서는 Command + 숫자를 눌려야 한다.

스타일

  • 폼 내부의 모든 엘리먼트에 공통으로 적용할 것과 그 중 일부에만 적용할 스타일을 구분하여 설정 한다.
#thisform {

font-family: Georgia, serif;

font-size: 12px;

color: #999;

}



#thisform label {

font-family: Verdana, sans-serif;

font-weight: bold;

color: #660000;

}
  • thisform id를 가진 form안에 있는 label들은 font-size: 12px; 속성을 상속받는다. color는 재정의해서 #660000; 값을 사용한다.

<fieldset> 사용하기

  • 필드들을 그룹핑 할 수 있다.
  • <legend>를 사용해서 그룹핑 박스에 이름을 설정할 수 있다.
#thisform fieldset {

border: 1px solid #ccc;

padding: 0 20px;

}

#thisform legend {

font-family: arial, sans-serif;

font-weight: bold;

font-size: 90%;

color: #666;

background: #eee;

border: 1px solid #ccc;

border-bottom-color: #999;

border-right-color: #999;

padding: 4px 8px;

}
  • 이미 form에 있는 <p>에서 충분히 padding을 설정했기 때문에, filedset의 위와 아래의 padding을 0으로 설장하고, 오른쪽과 왼쪽은 20px로 설정한다.
  • legend의 fond-size는 thisform에서 설정한 fond-size 크기에 비례하도록 %를 사용해서 설정한다.

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top

TAG CSS, dd, dl, DT, form, HTML, p, 웹 표준






티스토리 툴바