블로그 이미지
좋은느낌/원철
이것저것 필요한 것을 모아보렵니다.. 방문해 주셔서 감사합니다..

calendar

1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

Notice

    2009. 4. 13. 14:54 Web

    지난 3월 20일 드디어 마이크로소프트(MS)의 인터넷 익스플로러(IE) 8.0이 정식 출시됐다. 지난해 9월 베타2를 공식적으로 일반인에게 배포한지 반년만의 정식 출시 버전인 것이다. MS는 그 기간 동안 7.0 에서 8.0으로 넘어가는 과도기에 발생할 수 있는 문제들을 해결하려는 노력을 기울이고 IE만의 획기적이고 창의적인 신기술들을 끊임없이 업그레이드했다.

    하지만 같은 기간 강력한 라이벌인 파이어폭스는 3.0 버전을 넘어섰으며 IE 타도를 캐치프레이즈로 내건 구글 크롬 역시 평가판을 지나서 1.0을 넘어 정식버전으로 이행했다. IE가 이들을 따라갈 수 있을지 IE 8.0의 주요 목표와 그 결과물들에 대해서 알아보기로 하자.


    ■IE 8.0의 주요 관심 사항들
    IE 8.0은 MS가 그동안 조사한 일반 사용자들의 인터넷 사용 행태 등을 바탕으로 보다 더 원활한 인터넷 서비스를 제공하기 위해서 개발됐다. 웹 표준을 지키는 브라우저, 빠르고 편리한 브라우저, 그리고 안전한 브라우저를 주요 개발 목표로 삼았다.

    그 동안 IE는 웹 표준을 따르기 보다는 독자적인 노선을 걸었으며 이로 인해 여러 가지 불편함도 있었지만 나름의 이득도 있었다. IE에 최적화되지 않은 웹페이지의 경우 타 브라우저에서 제대로 된 화면을 보여줄 수 없었는데 이는 MS에게 있어서는 이득이 되는 일이었다.

    하지만 통신기술 발전으로 인해 PC와 노트북 컴퓨터 뿐 아니라 다양한 무선 단말기를 통한 웹 접속이 가능해졌으며 이에 따른 인터넷 브라우저 표준화의 필요성이 크게 확대됨에 따라 IE도 8.0부터 웹 표준을 준수하게 됐다. 향후 IE8에 맞춰 제작되는 인터넷 사이트들은 타 웹 표준을 따르는 모든 브라우저에서 문제없이 볼 수 있게 되어 웹페이지 개발자 입장에서는 환영할만한 사항이라고 할 수 있다.

    IE 8.0의 목표 중 하나인 빠르고 편리한 브라우저를 위해서 MS는 정말 많은 노력을 했다고 볼 수 있다. 넷스케이프의 몰락이후 독점적인 지위의 MS가 지속적인 기술개발을 하지 않았다는 비판을 받곤 했으나 IE 8.0에서는 확연한 기술의 진보를 느낄 수 있다. 그것이 비록 경쟁자들의 대단한 약진에 따른 위기의식의 발로라고 할지라도.

    웹페이지 로딩 속도도 기존 IE 7에 비해서 많은 향상이 있었다. 인터넷 사용자들의 행태를 조사해서 만들었다는 것을 확실히 느낄 수 있을 정도로 웹서핑 속도가 빨라져 어떤 의미에서는 혁신적이라고까지 할 수 있다.

    IE 8.0의 마지막 목표인 안전한 브라우저에 대한 것은 사실 MS 자체의 문제라고 할 수 있다. 기존에 많이 보편화된 액티브X에 대한 문제가 바로 그것이기 때문이다. 사실 국내 사용자의 시점에서만 본다면 이것보다 큰 문제는 없다고 할 수 있다.

    이의 해결을 위해 MS는 작년부터 정부기관과 은행 등으로 이루어진 대책기구에 참여하여 자문과 테스트를 수행했으며 일부 오류를 수정하기 위해 주요 보안 업체등과 지속적인 테스트와 업그레이드를 병행했다. 아직 IE 8.0이 발표되고 얼마 안 된 시점이라 모든 사항을 다 테스트해 볼 순 없었지만 비교적 안정적이라고 할 수 있다. 또한 기타 웹페이지 충돌 문제등도 많이 안정화된 것으로 보인다.

    ■IE 8.0 개발 목표에 따른 성과들
    보다 빠르고 쉬운 웹 검색
    IE 8.0은 이전 버전보다 검색 속도가 크게 향상됐다. 이에 관련된 기능들은 아래와 같다.

    스마트 주소창: 주소창에 주소나 사이트 이름 등 일부만 입력해도 최근 검색 이력이나 즐겨찾기, RSS 피드에서 일치하는 이름 등을 표시해 검색 시간을 단축해준다. 또한 주소창 옆의 빨간색 ‘X’ 버튼을 클릭하면 리스트에서 해당 URL를 삭제할 수 있다.

    ○향상된 검색 기능
    - 페이지 검색: 페이지 검색은 컨트롤+F(Ctrl+F)를 누르거나 편집 메뉴에서 페이지 검색을 선택하거나 인스턴트 서치 박스(Instant Search Box)에 의해 활성화된 툴바로 보인다. 이 툴바는 페이지의 탭 아래에 위치해 페이지에 있는 글자를 가리지 않는다.
    - 결과 검색: 검색된 결과를 수치로 보여준다.
    - 결과 표시: 사용자가 한 눈에 볼 수 있도록 검색된 문자를 밝게 표시해 준다.

    ○새 탭 페이지: 페이지 상에서 링크를 클릭하면 바로 새 탭 페이지가 열린다.

    탭 그룹: 관련 있는 탭끼리는 같은 색깔로 그룹을 형성해 사용자가 탭을 쉽게 구분할 수 있도록 했다. 사용자는 별도의 확인 없이 관련된 여러 탭을 하나의 그룹으로 닫을 수 있어 시간을 절약할 수 있다.

    ○마지막 브라우징 세션 다시 열기: 가장 최근에 열어 본 브라우저를 기억해 사용자가 실수로 브라우저를 닫았을 경우 이를 다시 열어볼 수 있도록 했다.

    사용자 중심의 다양한 기능 
    IE 8.0은 사용자 중심의 새 기능을 추가해 효율적인 웹서핑 환경을 제공한다.

    ○바로 연결: 현재 읽고 있는 웹 페이지 상에서 단어나 문구를 마우스로 클릭하면 사전검색, 위치정보, 사진, 블로그 등 관련된 정보로 곧바로 연결시켜주는 기능으로 기존에 여러 단계를 거쳐야 했던 관련 정보 검색 시간을 단축시켜준다. (베타 버전에서는 ‘액셀러레이터’(Accelerator)라는 메뉴로 소개됐다.)

    바로 연결을 이용한 검색

    ○웹 조각
    : 사용자가 원하는 웹사이트의 특정 부분만 잘라내 실시간 업데이트된 내용을 확인할 수 있는 기능이다. 예를 들어 증권사나 언론사, 인터넷 쇼핑 사이트 등에서 특정 종목의 주가 동향이나 최신 뉴스 또는 원하는 지역의 날씨, 구매를 희망하는 제품의 실시간 경매 시세 등을 웹 조각으로 익스플로러 상단에 등록하면 언제든지 해당 사이트에 접속하지 않고도 최신 정보를 확인할 수 있다. (베타 버전에서는 ‘웹슬라이스’(Web Slice)라는 메뉴로 소개됐다.)

    웹조각을 옥션 사이트와 연결한 경우

    ○비주얼 검색
    : IE 8.0은 검색 공급자와 협력 관계를 맺고 ‘비주얼 검색’ 이미지를 통해 원하는 정보를 즉각적으로 제공한다. 예를 들어 라이브 서치에서 ‘서울 날씨’를 입력하면 검색 상자 드롭다운에 직접 현재 날씨가 미리 보기로 표시된다.

    비교적 안전하고, 믿을 수 있는 IE 8,0
    오늘날 온라인상에서의 보안이 점점 중요해지면서 안전하게 정보를 검색하고 이용하기를 원하는 사용자들의 요구가 점점 증가하고 있다. 멀쩡한 사이트에 접속했는데 바이러스에 감염되거나 은행에 로그인했는데 개인 정보가 유출되는 일이 빈번해지고 점점 사용자를 기만하는 사이트와 그 수법이 절묘해지고 있기 때문이다. 이번 IE 8.0은 인터넷 보안에 많은 개발역량을 기울인 것으로 보이며 그 결과 또한 만족할만하다.

    ○인프라이빗: IE 8.0은 사용자의 PC에 저장되어 있는 데이터와 개인정보를 보호할 수 있도록 돕는 인프라이빗(InPrivate) 기능을 제공한다. 인터넷 이용 시 개인의 방문 이력이 남지 못하게 하는 인프라이빗 기능은 외부에서 사용자를 추적하지 못하게 함으로써 인터넷 사용자를 보호한다.

    ○호환성 뷰: 웹 표준을 준수하고 있는 IE 8.0은 기본적으로 웹 표준 콘텐츠는 대부분 지원하지만 일부 웹 사이트가 정상적으로 보이지 않을 경우가 있다. 이를 위해 상단에 ‘호환성 뷰’ 버튼을 추가함으로써 페이지와 맞지 않는 메뉴, 이미지 텍스트 등을 사용자가 쉽게 재배치해 문제를 해결할 수 있도록 했다.

    호환성 뷰의 활성화

    ○자동 충돌(Crash) 복구
    : IE 8.0에서는 탭 충돌이 발생하는 경우 전체 브라우저 창이 아닌 해당 탭만 영향을 받는다. 따라서 검색 작업이 중단되는 일이 잘 생기지 않으며 문제를 파악한 후 탭이 자동으로 다시 로드되고 충돌 이전에 있었던 사이트로 복구된다.

    ○스마트 스크린 필터(SmartScreen Filter): 데이터, 개인 정보 및 신원을 악용하는 것과 컴퓨터와 귀중한 데이터를 손상시킬 수 있는 맬웨어 또는 악성 소프트웨어가 사용자도 모르게 설치되는 것을 방지해 준다.

    ○클릭재킹 방지: 클릭재킹은 인터넷 사용자들을 안전해 보이는 웹 페이지로 끌어들이고 클릭하게 부추김으로써 ID나 패스워드 같은 기밀 정보의 보안성을 떨어뜨리고 이를 악의로 빼내는 해킹 방법 중 하나다. IE 8.0은 사전에 태그를 삽입한 웹 페이지를 찾고 사용자들에게 에러 화면을 보임으로써 해당 콘텐츠 호스트가 콘텐츠를 보이지 않게 설정하고 사용자들이 새로운 창에서 콘텐츠를 열 수 있도록 대안을 제시한다.

    ○교차 사이트 스크립팅 (XSS) 필터: IE 8.0은 악의적 웹 사이트에서 실행되는 악성 코드를 감지하는 기능이 도입되어 정보 노출, 쿠키 도난, 계정/신원 유출 등의 문제가 발생할 수 있는 위협으로부터 사용자의 컴퓨터를 보호해준다. XSS 공격은 최근 온라인상의 주된 위협으로 대두되고 있기 때문에 교차 사이트 스크립팅 필터를 새롭게 포함시켜 온라인 안전성을 강화했다.

    ○도메인 강조 표시: 사용자들이 잘못된 주소에 현혹되어 사기성 피싱 사이트를 방문하는 일이 없도록 웹 주소(URL)를 보다 쉽게 인식하도록 해준다. 이를 위해 주소 표시줄에서 도메인 이름은 검정색으로 강조 표시되고 나머지 URL 문자열 부분은 회색으로 표시되므로 사이트의 실제 정체를 쉽게 파악할 수 있다.

    웹사이트의 도메인 강조 표시
    ■발표와는 조금은 다른 현실
    지난 3월 20일 IE 8.0이 정식 출시될 때 MS는 주요 특징으로 속도와 호환성이 크게 향상되었다고 밝혔다. 기존 IE 7보다 15%의 속도향상을 보였으며 전 세계 주요한 상위 웹페이지 25개 접속 속도에서 다른 브라우저를 모두 제치고 가장 빠른 결과를 보였다고 했다.

    하지만 실제 여러 테스터들의 결과 발표에 의하면 항상 그렇지만은 않다고 한다. 대부분은 IE 8.0의 불리함을 보고하고 있다. 그리고 실제 사용자인 기자의 입장에서도 브라우저 로딩 및 페이지 로딩에서 IE 8.0이 타 제품보다 더 낫다고 느끼지 못하고 있는 형편이다.

    또한 IE 8.0의 주요 목표 달성에 호환성 항목을 넣지 않았는데 이것도 이유가 있다. 작년 베타2 발표당시 테스트했을 때 대부분의 호환성 항목에서 IE 8.0은 파이어 폭스나 구글 크롬에 비해서 열세였다. 지금도 이를 극복하지 못하고 있으며 점점 더 그 차이가 벌어지고 있는 것으로 보인다. 이런 문제는 제품 출시 초기에는 잘 느낄 수 없는 문제이지만 시간이 지날수록 점유율 향상에 발목을 잡는 문제가 될 수 있다. IE 8.0의 주요 목표 달성 결과물 역시 대부분 경쟁제품이 적용한 사항이거나 혹은 경쟁사가 더 나은 시스템을 구축한 경우도 있다.

    조금 더 IE 8.0에 우울한 소식이 있다. IE 8.0 발표 이후 통계가 발표된 그 주 동안 IE 8.0이 브라우저 시장에 미치는 영향이 미미한 것으로 밝혀졌다는 것이다. 경쟁상대인 파이어폭스가 3.0 버전부터 이미 높은 점유율을 기록하고 정식 출시 3일 만에 점유율을 7.8%에서 18.9%로 끌어올린 경험이 있는 것에 비하면 처참하다고 할 수 있다.

    그렇지만 IE 8.0이 실패작이라고 섣불리 단언할 수는 없다. IE 8.0은 나름의 뚜렷한 특징과 장점을 가지고 있고 다른 MS 제품과의 궁합도 여전히 제일 높은 브라우저이기 때문이다. 어쩌면 우리의 기대치가 높은 것일 수도 있다. 하지만 현실적으로 IE 8.0은 경쟁사에 비해 상대적인 약자인 것만은 분명하며 과거 IE가 넷스케이프를 따라잡기 위해 했던 만큼의 노력을 지금 현시점에서 해야만 할 것으로 보인다.

    posted by 좋은느낌/원철
    2009. 4. 8. 16:25 Web


    사용자 삽입 이미지

    웹 트렌드를 한장의 지도에 담았다.

    인포메이션 아키텐스가 '2009 웹 트렌드 맵' 베타버전을 공개했다.

    도쿄의 지하철 노선도 위로, 333개의 웹 도메인과 111인의 인명들이 겹쳐져 있다.

    인포메이션 아키텍츠 연구팀은, 각 웹사이트의 트래픽, 수익, 설립연도, 도메인을 소유한 기업 등을 근거로

    영향력 있는 웹 도메인을 선별, 트래픽과 수익, 설립연도, 소유 기업 등을 기준으로 평가하였다.

    이러한 특징은 노선도 상에서 다음과 같은 방식으로 시각화되었다.

    역의 높이는 해당 도메인의 트래픽, 수익등을 종합적으로 고려한 성공도를 의미하며,

    역의 너비는 도메인 소유 기업의 안정성을 뜻한다.

    또한 지도 상에 나타낸 개별 노선은 어플리케이션, 출판, 여론, 뉴스, 소비, 방송, 광고, 공유 등 카테고리를 나타내고 있다.

    이와는 별도로 노선도 상의 위치를 통해 해당사이트의 특징을 어느정도 가늠할 수도 있다.

    가령 올해 트렌드 맵에서는 트위터가 시부야 역 위치에 자리잡고 있다.

    도쿄에서 가장 번잡한 역 자리에, 최근 급부상한 웹사이트가 자리잡은 셈이다.

    더불어 노선도 하단에는 최고의 영향력을 지닌 웹 사이트와 인물, 톱 50의 리스트가 보기좋게 정리되어 있다.

    이마도 충분히 예측할 수 있겠지만, 최고의 영향력을 자랑하는 웹 사이트 1위는 구글이다.

    그뒤로 야후, MSN, 애플, 위키피디아, 아마존, 유튜브 등이 자리잡고 있으며, 트위터는 9위에 올랐다.

    posted by 좋은느낌/원철
    2008. 10. 22. 14:48 Web
    Character Code
    Points
    (Hex)
    Code
    Points
    (Dec)
    Why encode?
    Reserved
    characters
    Dollar ("$")
    Ampersand ("&")
    Plus ("+")
    Comma (",")
    Forward slash/Virgule ("/")
    Colon (":")
    Semi-colon (";")
    Equals ("=")
    Question mark ("?")
    'At' symbol ("@")
     
    24
    26
    2B
    2C
    2F
    3A
    3B
    3D
    3F
    40
    36
    38
    43
    44
    47
    58
    59
    61
    63
    64
     
    Unsafe
    characters
    Space 20 32 Significant sequences of spaces may be lost in some uses (especially multiple spaces)
    Quotation marks
    'Less Than' symbol ("<")
    'Greater Than' symbol (">")
    22
    3C
    3E
    34
    60
    62
    These characters are often used to delimit URLs in plain text.
    'Pound' character ("#") 23 35 This is used in URLs to indicate where a fragment identifier (bookmarks/anchors in HTML) begins.
    Percent character ("%") 25 37 This is used to URL encode/escape other characters, so it should itself also be encoded.
    Misc. characters:
    Left Curly Brace ("{")
    Right Curly Brace ("}")
    Vertical Bar/Pipe ("|")
    Backslash ("\")
    Caret ("^")
    Tilde ("~")
    Left Square Bracket ("[")
    Right Square Bracket ("]")
    Grave Accent ("`")

    7B
    7D
    7C
    5C
    5E
    7E
    5B
    5D
    60

    123
    125
    124
    92
    94
    126
    91
    93
    96
    Some systems can possibly modify these characters
    posted by 좋은느낌/원철
    2008. 10. 21. 01:49 Web
    테이블 사이즈 고정시키고 텍스트가 길 경우 라인스킵없이 잘림
     
    <table width=120 border=1 style="table-layout:fixed">
    <tr><td width=120>123456789012345678901234567890</td></tr>
    <tr><td width=120>1234567890</td></tr>
    <tr><td width=120>1234567890</td></tr>
    </table>  




    테이블 사이즈 고정시키고 텍스트가 길 경우 디음라인에 이어 출력



    <table width=120 border=1 style="word-wrap:break-word">
    <tr><td width=120>123456789012345678901234567890</td></tr>
    <tr><td width=120>1234567890</td></tr>
    <tr><td width=120>1234567890</td></tr>
    <tr><td width=120>웹프로그램</td></tr>
    <tr><td width=120>웹프로그램</td></tr>
    </table>
     





    내용이 길경우 들여쓴 텍스트가 자동 줄바굼



    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow-x:hidden;overflow-y:hidden">
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </div>





    내용에 상관없이 사이즈 고정 시키기



    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;word-wrap:break-word; overflow-x:hidden;overflow-y:hidden">
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </div>







    X,Y 스크롤 컨트롤을 보이게 할때는



    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow-x:scroll;overflow-y:scroll">
    1234567890
    웹프로그램
    </div>


    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow-x:scroll;overflow-y:scroll">
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </div>








    문서 길이에 따라 자동으로 X,Y 스크롤 컨트롤을 보이게 할때는


    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow:auto">
    1234567890
    웹프로그램
    </div>


    <div style="background-color:#000000;color:#FFFFFF;width:120;height:80;overflow:auto">
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    123456789012345678901234567890
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </div>
     





    사이즈 고정시키고 텍스트가 길 경우 라인스킵없이 잘림
    한글의 경우는 라인스킴이되고 영문은 문자열이 잘림
    overflow:hidden;text-overflow:ellipsis



    <p STYLE="width:120;overflow:hidden;text-overflow:ellipsis">123456789012345678901234567890</p>
    <p STYLE="width:120;overflow:hidden;text-overflow:ellipsis">
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    웹프로그램기술대행은업폴더웹프로그램기술대행은업폴더
    </p>








    글 길이가 길 때 말줄임표, 문자열을 고정시켜 문자열 자르는 효과를 준다.
    overflow:hidden;text-overflow:ellipsis 과 NOBR 같이 사용 또는

    <div STYLE="width:120;overflow:hidden;text-overflow:ellipsis"><NOBR>1.가나다라마바사아자차카타파하</NOBR></div>

    overflow:hidden;text-overflow:ellipsis;white-space:nowrap



    <div STYLE="width:120;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">2.가나다라마바사아자차카타파하</div>

    posted by 좋은느낌/원철
    2008. 10. 17. 17:00 Web
    ※ 원하는 색깔을 드래그해서 복사하십시오.
    #93DAFF #98DFFF #9DE4FF #A2E9FF #A7EEFF #ACF3FF #B0F7FF #B4FBFF #B9FFFF #C0FFFF
    #87CEFA #91D8FA #A5D8FA #AFDDFA #B9E2FA #C3E7FA #CDECFA #D7F1FA #E1F6FA #EBFBFF
    #00BFFF #0AC9FF #14D3FF #1EDDFF #28E7FF #32F1FF #3CFBFF #46FFFF #96FFFF #C8FFFF
    #00A5FF #00AFFF #00B9FF #00C3FF #00CDFF #00D7FF #00E1FF #00EBFF #00F5FF #00FFFF
    #1EA4FF #28AEFF #32B8FF #3CC2FF #46CCFF #50D6FF #5AE0FF #6EE0FF #6EEAFF #78F3FF
    #1E90FF #289AFF #32A4FF #3CAEFF #46B8FF #50C2FF #5ACCFF #64D6FF #6EE0FF #78EAFF










    #96A5FF #A0AFFF #AAB9FF #B4C3FF #BECDFF #C8D7FF #D2E1FF #DCEBFF #E8F5FF #F4FFFF
    #86A5FF #90AFFF #9AB9FF #A4C3FF #AECDFF #B8D7FF #CCE1FF #E0EBFF #EBF5FF #F9FFFF
    #6495ED #6E9FED #78A9ED #82B3ED #8CBDED #96C7ED #A0D1F7 #AADBFF #B4E5FF #BEEFFF










    #0078FF #0A82FF #148CFF #1E96FF #28A0FF #32AAFF #3CB4FF #46BEFF #50C8FF #5AD2FF
    #0064FF #0A6EFF #1478FF #1E82FF #288CFF #3296FF #3CA0FF #46AAFF #50B4FF #5ABEFF
    #0000FF #3232FF #5050FF #646EFF #6478FF #6482FF #648CFF #6496FF #64A0FF #64AAFF
    #4169E1 #4B73E1 #557DE1 #5F87E1 #6991E1 #739BE1 #7DA5E1 #87AFEB #91B9F5 #9BC3FF
    #0064CD #0A6ECD #1478CD #1E82CD #288CD2 #3296D7 #3CA0E1 #46AAEB #50B4F5 #5ABEF5
    #5A5AFF #6464FF #6E6EFF #7878FF #8282FF #8C8CFF #A0A0FF #B4B4FF #C8C8FF #D2D2FF










    #7B68EE #8572EE #8F7CEE #9986EE #A390EE #AD9AEE #B7A4EE #C1AEEE #CBB8EE #D5C2EE
    #6A5ACD #7E6ECD #8878CD #9282CD #9C8CCD #A696CD #B0A0CD #BAAAD7 #C4B4E1 #CEBEE1
    #0000CD #2828CD #4646CD #6464CD #6E6ED7 #7878E1 #8282EB #8C8CF5 #9696FF #A0A0FF
    #00008C #14148C #28288C #3C3C8C #50508C #646496 #7878AA #8C8CBE #A0A0C8 #B4B4DC
    #483D8B #52478B #5C518B #665B8B #70658B #7A6F95 #84799F #8E83A9 #988DB3 #A297BD
    #000069 #1E3269 #323C73 #3C467D #3C5087 #3C5A91 #46649B #506EA5 #5A78AF #6482B9

    #3DFF92 #47FF9C #51FFA6 #5BFFB0 #65FFBA #6FFFC4 #79FFCE #75FFCA #7AFFCF #7FFFD4
    #55EE94 #5FEE9E #69EEA8 #73EEB2 #7DEEBC #87EEC6 #91F8D0 #9BFFDA #A5FFE4 #AFFFEE
    #66CDAA #70D2B4 #7AD7BE #84DCC8 #8EE1D2 #98EBDC #9DF0E1 #A2F5E6 #A7FAEB #ACFFEF










    #AAEBAA #B4F0B4 #BEF5BE #C8FAC8 #D2FFD2 #DCFFDC #E1FFE1 #E6FFE6 #EBFFEB #F0FFF0
    #80E12A #8AE634 #94EB3E #9EF048 #A8F552 #B2FA5C #BCFF66 #C1FF6B #C6FF70 #CBFF75
    #52E252 #5CE75C #66EC66 #70F170 #7AF67A #84FB84 #89FB89 #8EFB8E #93FB93 #98FB98
    #64CD3C #6ED746 #78E150 #82EB5A #8CF064 #96F56E #9BFA73 #A0FA78 #A5FA7D #AAFA82










    #13C7A3 #18CCA8 #1DD1AD #22D6B2 #27DBB7 #2CE0BC #31E0C1 #36E0C6 #3BE0CB #40E0D0
    #46B4B4 #50BEBE #5AC8C8 #64D2D2 #6EDCDC #73E1E1 #78E6E6 #7DEBEB #82F0F0 #87F5F5
    #20B2AA #2ABCB4 #34C6BE #3ED0C8 #48DAD2 #52E4DC #57E9E1 #5CEEE6 #61F3EB #66F8F0
    #5F9EA0 #69A8AA #73B2B4 #7DBCBE #87C6C8 #91D0D2 #96D5D7 #9BDADC #A0DFE1 #A5E3E6










    #3CB371 #46BD7B #50C785 #5AD18F #64DB99 #6EE5A3 #73EAA8 #78EFAD #7DF4B2 #82F9B7
    #2E8B57 #389561 #429F6B #4CA975 #56B37F #60BD89 #65C28E #6AC793 #6FCC98 #74D19D
    #228B22 #2C952C #369F36 #40A940 #4AB34A #54BD54 #5EC75E #63CC63 #68D168 #6DD66D
    #497649 #538053 #5D8A5D #679467 #719E71 #7BA87B #80AD80 #85B285 #8AB78A #8FBC8F
    #006400 #0A6E0A #147814 #1E821E #288C28 #329632 #3CA03C #41A541 #46AA46 #4BAF4B










    #008C8C #0A9696 #14A0A0 #1EAAAA #28B4B4 #32BEBE #37C3C3 #3CC8C8 #41CDCD #46D2D2
    #008080 #0A8A8A #149494 #1E9E9E #28A8A8 #32B2B2 #37B7B7 #3CBCBC #41C1C1 #46C6C6

    #FFB6C1 #FFBBC6 #FFC0CB #FFC5D0 #FFCAD5 #FFCFDA #FFD4DF #FFD9E4 #FFDEE9 #FFE3EE
    #FFAAAF #FFB4B9 #FFBEC3 #FFC8CD #FFD2D7 #FFDCE1 #FFE1E6 #FFE6EB #FFEBF0 #FFF0F5
    #FF9E9B #FFA8A5 #FFB2AF #FFBCB9 #FFC6C3 #FFD0CD #FFD5D2 #FFDAD7 #FFDFDC #FFE4E1
    #FF7A85 #FF848F #FF8E99 #FF98A3 #FFA2AD #FFACB7 #FFB1BC #FFB6C1 #FFBBC6 #FFC0CB
    #FF5675 #FF607F #FF6A89 #FF7493 #FF7E9D #FF88A7 #FF92B1 #FF9CBB #FFA6C5 #FFB0CF










    #FF82FF #FF8CFF #FF96FF #FFA0FF #FFAAFF #FFB4FF #FFBEFF #FFC8FF #FFD2FF #FFDCFF
    #FF7DB4 #FF87BE #FF91C8 #FF9BD2 #FFA5DC #FFAFE6 #FFB4EB #FFB9F0 #FFBEF5 #FFC3FA
    #FF69B4 #FF73BE #FF7DC8 #FF87D2 #FF91DC #FF9BE6 #FFA5F0 #FFAAF5 #FFAFFA #FFB4FF
    #FF1493 #FF1E9D #FF28A7 #FF32B1 #FF3CBB #FF46C5 #FF50CF #FF5AD9 #FF64E3 #FF6EED










    #DB7093 #DB7A9D #DB84A7 #E08EB1 #E598BB #EAA2C5 #EAB1D4 #EFACCF #F4BBDE #F4B6D9
    #D7567F #DC6089 #E16A93 #E6749D #EB7EA7 #F088B1 #F592BB #FA9CC5 #FFA6CF #FFB0D9
    #C71585 #C71F8F #C73399 #C73DA3 #CC47AD #D151B7 #D65BC1 #E065CB #EA6FD5 #F479DF










    #CD1039 #CD1F48 #CD2E57 #CD3861 #CD426B #D24C75 #D7567F #DC6089 #E16A93 #E6749D
    #B9062F #B91A4D #BE2457 #C32E61 #C8386B #CD4275 #D24C7F #D75689 #DC6093 #E16A9D

    #FAEB78 #FAF082 #FAF58C #FAFA96 #FAFAA0 #FAFAAA #FAFAB4 #FAFABE #FAFAD2 #FAFAD2
    #FFDC3C #FFE146 #FFE650 #FFEB5A #FFF064 #FFF56E #FFFA78 #FFFA82 #FFFF8C #FFFF96
    #FFC81E #FFD228 #FFD732 #FFDC3C #FFE146 #FFE650 #FFEB5A #FFF064 #FFF56E #FFF978
    #FFB400 #FFBE0A #FFC314 #FFC81E #FFCD28 #FFD232 #FFD73C #FFDC46 #FFE150 #FFE65A










    #FDCD8C #FDD296 #FDD7A0 #FDDCAA #FDE1B4 #FDE6BE #FDEBC8 #FDF5D2 #FDF5DC #FDF5E6
    #FAC87D #FACD87 #FAD291 #FAD79B #FADCA5 #FAE1AF #FAE6B9 #FAEBC3 #FAEBCD #FAEBD7
    #FFA500 #FFAF0A #FFB914 #FFC31E #FFCD28 #FFD732 #FFDC37 #FFE13C #FFE641 #FFEB46
    #FF9100 #FF9B00 #FFA500 #FFAF00 #FFB900 #FFC300 #FFC800 #FFCD00 #FFD200 #FFD700
    #FF8200 #FF8C0A #FF9614 #FFA01E #FFAA28 #FFB432 #FFB937 #FFBE3C #FFC341 #FFC846










    #FFA98F #FFB399 #FFBDA3 #FFC7AD #FFD1B7 #FFDBC1 #FFE0C6 #FFE5CB #FFEAD0 #FFEFD5
    #FFA374 #FFAD7E #FFB788 #FFC192 #FFCB9C #FFD0A1 #FFD5A6 #FFDAAB #FFDFB0 #FFE4B5
    #FF9473 #FF9E7D #FFA887 #FFB291 #FFBC9B #FFC6A5 #FFD0AF #FFD0AF #FFD5B4 #FFDAB9
    #FF7F50 #FF895A #FF9364 #FF9D6E #FFA778 #FFB182 #FFBB8C #FFC091 #FFC596 #FFCA9B










    #CD853F #CD8F49 #D29953 #D7A35D #DCAD67 #E1B771 #E6C17B #EBC680 #F0CB85 #F5D08A
    #D2691E #D27328 #D27D32 #D7873C #DC9146 #E19B50 #E6A55A #EBAA5F #EBAF64 #F0B469
    #AE5E1A #B86824 #C2722E #CC7C38 #D68642 #E0904C #E59551 #EA9A56 #EF9F5B #F4A460
    #8B4513 #8B4F1D #8B5927 #8B6331 #906D3B #957745 #9F814F #A48654 #A98B59 #AE905E

    #FF9696 #FFA0A0 #FFAAAA #FFB4B4 #FFBEBE #FFC8C8 #FFD2D2 #FFDCDC #FFE6E6 #FFF0F0
    #F08080 #F08A8A #F09494 #F59E9E #FAA8A8 #FAB2B2 #FAB7B7 #FABCBC #FAC1C1 #FAC6C6
    #F56E6E #F57878
    posted by 좋은느낌/원철
    2008. 10. 17. 16:58 Web
    nowrap 과 TABLE-layout ( 테이블 고정 태그) HTML  
    TABLE 넓이 고정테그
    style="table-layout:fixed;" -> 상하좌우 모두 고정

    ● 테이블 크기와 관계없이 늘어나게
    <td width="115" nowrap>  

    --------------------------------------------------------------------------------------
    긴 문자열을 줄바꿈이 되지 않고 테이블의 길이에 맞게 보이도록해서 마치 테이블 길이에 맞게 글자를 자른것처럼 효과를 냅니다.
    테이블 태그에 style="table-layout:fixed"를 넣어주고 적용할 TD 태그에 nowrap 옵션을 넣어줍니다.

    <table border='0' cellpadding='0' cellspacing='0' width='200' style="table-layout:fixed">
      <tr>
        <td width="15"><img src="images/folder_s03_06.gif" align="absmiddle"></td>
        <td style="text-align:justify;" nowrap>긴 문자열을 줄바꿈이 되지 않고 테이블의 길이에 맞게 보이기</td>
      </tr>
    </table>

    ---------------------------------------------------------------------------------------

    ● 가이드 라인 잡기(table-layout:fixed)

    코 딩을 할 테이블을 이용해서 위치를 잡지 말라고 합니다. 레이어를 이용해서 위치를 잡으라는 것이죠. 외국 사이트 중에 이렇게 한 곳이 있기는 한 것 같습니다. 하지만 대부분의 사이트들이 테이블을 이용해서 위치를 잡아서 코딩을 하죠.
    저 또한 대부분 테이블을 사용합니다.
    그리고 페이지를 코딩하는데 테이블을 워낙 많이 사용하기 때문에 테이블에 대한 Tip을 알아 두면 좋으리라 생각합니다.

    <table style="table-layout:fixed">

    이 것을 사용하는 방법을 익혀 두시면 아주 좋을 것 같습니다. 이 코드를 사용하는 대부분은 일정 크기를 벗어나지 않게 하는데에서인 것 같습니다. 이 코드는 테이블의 크기를 고정 시켜 주기 때문에 글자들이 많이져도 테이블을 늘어나지 않고 글자가 잘려 집니다.

    하 지만 이 코드의 진정한 기능은 최적화에 있습니다. 테이블을 고정시키기 때문에 브라우저에서 계산을 하지 않고 코드에 있는 그대로의 크기를 읽습니다. 그래서 부하를 줄여 줍니다. 수백 수천 라인에서 이 코드를 사용하고 하지 않고 비교해 보면 알 수 있을 것입니다.

    마지막으로 이 코드는 padding과 연관해서 아주 유용합니다.

    테이블에서 td가 2개 이상일 때 한 td에 width=100  style=padding-left:20을 주었다고 하면 실제 td의 width는 120이 됩니다. 하지만 위의 코드를 사용하면 width에 padding이 영향을 미치는 일은 없을 것입니다.

    요약하면,

    table-layout:fixed는 이렇기 때문에 유용합니다.

    1. 부하를 줄여줍니다. 페이지 전환이 빠르겠죠.
    2. width가 padding의 영향을 받지 않기 때문에 쉽고 정확한 코딩이 가능합니다.
    3. 내용에 의해서 테이블이 늘어나지 않습니다. 게시판 유형에서 유용할 것 입니다
    posted by 좋은느낌/원철
    2008. 10. 17. 16:55 Web

    테이블은 이제 그만 쉬어야 할 때

    테이블(html의 table 을 칭함)은 이제 목적 이상의 일을 할 필요가 사라졌습니다. 그저 단순한 “표” 를 만들기 위해서 제작된 테이블이 레이아웃, 즉 홈페이지 틀을 잡기위해서 쓰이고 있다니. 그리고 그것이 테이블의 맞는 용도처럼 교육되고 있다니 이제는 슬슬 멈추어야 할때라고 봅니다. 특히 XHTML이 개발되어 나오면서 계층형과 같은 구조로 레이아웃은 디자인되며 디자인이 우선이 아닌 그 안의 내용의 구성을 먼저 생각해야하는 개념 자체의 변화가 찾아오고 있습니다. 아니, 예전 html 생성되었을때의 원래의 개념으로 돌리려고 하고 있습니다. 얼마전 XHTML 2.0(이 포스팅이 쓰여지는 현재는 XHTML 1.1) 이 개발되면서 약간의 내용을 볼수 있었습니다. 지금 쓰여지고 있는 모든 개념적인 HTML이 완전히 변화될듯 만들어 지고 있었습니다. 심지어 DIV만이 레이아웃의 용도가 아닌 SECTION 의 개념도 개발되어 가고 있었습니다. 이대로 가다가는 한국의 웹디자이너, 개발자들은 나중엔 너무나도 큰 공백을 매꾸어야 할 것입니다. 에플과 인텔이 손잡은 일도 그리하고 인터넷 익스플로러 만이 아닌 많은 ‘표준’ 브라우저들이 개발되어 나오면서 이제 한 방법만을, 그리고 한 부류의 소비자, 클라이언트를 겨냥하여 개발하는것은 몇년안에 ‘도박’ 으로 간주 될거 같습니다.

    사용전에 개념의 문제
    시점에서 본론으로 들어가기 전에 다루어야 할 문제가 있습니다. 제가 여러 한국 디자인 홈페이지를 만들어 보고, 보아 왔지만 한국에서 지향하거나 혹은 본의 아니게 지향되어 가고 있는 잘못된 개념이 있습니다. 바로 그 개념의 문제가 바뀌어야 하는데, 제가 잘 설명할수 있을지 모르겠군요.

    대한 말로 설명을 한다면, HTML은 디자인을 나타내는것이 아니라 문서를 유저들이 더 잘 볼수 있게 디자인 할수 있도록 만들어진 것이라는 겁니다. 문서의 개념이 디자인 보다 먼저 오는거 라는 거죠. 디자인이 먼저라면, 지금당장 HTML등을 버리고 플래쉬로 나가는게 더 나은 길일겁니다. 하지만 플래쉬가 그리도 멋지게 활용될수 있으며 여러가지 장점들이 있지만, 웹개발자, 클라이언트들에게 100% 다가가지 못하는 이유는 바로 이 ‘문서’ 의 개념을 잘 포옹하지 못하기 때문입니다. 웹페이지들의 궁극적인 목표는 바로 ‘책’ 처럼 되는 것이다 라고 하는데 이 목적을 채우기엔 역부족인거죠. 이전 html 에서도 그것을 잘 충족하지 못하고 오히려 역효과를 낸 것입니다. 해서 이번에 나오는 차기 XHTML은 문서의 개념을 더욱 투명하게 하고 인식을 바로 잡고 쓰기 위하는 목적으로 씌여지는거 같습니다.

    문 서의 요소로 예를 들어 보겠습니다. 보통 문서를 보면 서론 본론 결론으로 나뉩니다. 그 안에 제목, 문단, 단락 들이 있고, 여러가지 문서의 요소들이 있습니다. 바로 그 요소들을 HTML이 나타내고 싶은겁니다. 보통 볼수 있는 예로

    는 바로 그 문단의 시작과 끝을 나타내어 주는것이고(처음 html 할때 젤 싫었던게 엔터치면 곧바로 에디터가

    로 인식을 하는거였네요. 무엇인지 모르니 짜증이 날수 밖에요 ^^) 이렇게 쓰이게 되면 HTML은 자동으로 알아서 문단이라고 인식해서 그에 맞추어 출력을 해주게 됩니다.(이런 개념을 잘 이해해서 디자인을 하면
    (웹표준에서는
    이 맞습니다)은 거의 쓰지 않게 됩니다 ^^)

    이렇게 HTML의 속성들의 개념을 이해해 가다보면 문서의 틀을 잡아주는것에 대한것, 즉 레이아웃에 대한 속성들도 다루게 되는데 바로 그 문서의 표현을 도와 문단의 너비, 문단의 위치, 모양을 잡아주는 것이 바로 테이블 입니다. DIV 입니다. P(Paragraph, 문단의 첫글자) 속성도 있구요. 아무튼 다시한번 말합니다. 문서의 레이아웃을 돕는 html 속성은 DIV 입니다. ^^ DIVISION의 줄임말로 나누다 라는 뜻을 가진 div 인것이죠. 테이블로 레이아웃 사용은 문법 자체가 틀린것이라는 겁니다.

    위의 긴 글을 정리하면서 다시 말하자면, HTML의 개념이 바르게 인식이 되어 가는데엔 테이블, 단순히 표를 만드는데 쓰인다는 원래의 목적을 찾아주고 레이아웃은 그에 맞는 속성을 쓰는것이 꼭 다루어져야 한다는 것입니다. 단순히 “DIV가 다루기 쉽잖아요” 가 이유가 아닌(실제로도 테이블보다 훨씬 쉽지만) 목적과 개념 자체에서부터 문제가 된다는 것입니다. 아직 뜨끔 안하셨나요? 이제 슬슬 개념뿐만이 아닌 왜 DIV가 테이블보다 나은지 다루어 보겠습니다.

    table 보다 다루기가 쉽다
    솔 직히 예전에는 테이블이 웹페이지 레이아웃, 틀을 잡는데에 쓰일수 밖에 없었습니다. 그만한 틀을 잡아주는 속성이 약했기 때문입니다. 그리고 그 당시에는 그것이 더 편했고, 깔끔했습니다. 규격이 맞지 않아서 줄이고 늘리고 하는것이 문제 였으니까요. 하지만 DIV는 레이아웃을 위한 그 목적으로 씌여진 만큼, 그보다 다루기 쉽게, 간편하게 발전 되었습니다. 말도 안된다구요?

    보통의 홈페이지 레이아웃으로 예를 들어가면서 보겠습니다.


    이런 레이아웃을 만들어 보겠습니다.

    테이블로 만들면
    <table>
      <tr> 
        <td colspan="2"></td> 
      </tr> 
      <tr> 
        <td></td> 
        <td></td> 
      </tr> 
    </table>

    이걸 div를 이용하면
    <div></div> 
    <div style="float:left;"></div> 
    <div></div> 

    이렇게 됩니다.

    별로 차이 안나네요.
    그럼 좀 더 복잡한 구성으로 만들어 봅니다.


    이런 레이아웃을 만들어 보겠습니다.

    이걸 테이블로 만든다면 아래와 같이 만들어야 겟죠
     <table>  
      <tr>  
        <td colspan=4></td>  
      </tr>  
      <tr>  
        <td></td>  
        <td></td>  
        <td></td>  
        <td></td>  
      </tr>  
      <tr>  
        <td colspan=4></td>  
      </tr>  
      <tr>  
        <td colspan=4></td>  
      </tr>  
      <tr>  
        <td colspan=4></td>  
      </tr>  
      <tr>  
       <td colspan=4></td>  
      </tr>  
    </table> 

    하지만 div로 만들면 이렇게 됩니다.
    <div></div>  
    <div style="float:left;"></div>  
    <div style="float:left;"></div>  
    <div style="float:left;"></div>  
    <div style="float:left;"></div>  
    <div style="clear:both;"></div>  
    <div></div>  
    <div></div>  
    <div></div> 

    클라이언트가 위의 구성중 column이 많다고 빼달라고 요청합니다. 하나를 빼면,,
    테이블로 구성한 코드는 저 위의 4라고 써진거 다 3으로 바꾸어야겠죠. 네. ‘찾기’ 기능을 아주 잘 써야겠습니다. 하지만 div는 어떤가요? float:left 는 align:left 와 같습니다. 왼쪽으로 정렬된것들 마구 넣은 후에 빼고 싶은거 빼고나서 다시 정리된 한칸을 넣을때엔 align 이 적용 안되도록 clear:both; 만 넣으면 됩니다. 개발자 분들, 너무나도 차이나는게 보이시는지요?

    테이블은 느리다
    다른 이유를 보겠습니다. 너무나도 잘 아는 사실이죠. 테이블의 속도 문제도 꽤나 골치 아픈 문제 입니다.

    유 저들은 아마도 브라우저창 타이틀 부분에는 웹사이트 제목이 떴는데 하얀 바탕으로 아무것도 나오지 않는 경우를 겪어 봤습니다. 요즘이야 워낙에 속도가 빨라지긴 했지만… 그 이유는 테이블의 속도 문제가 있기 때문입니다. 각각의 테이블이 하나하나의 요소로 받아들이기 때문에 그 테이블이 다 읽히기 전까지는 화면에 읽히지 않습니다. 그 이유 때문에 제목창에는 제목이 뜨는데 화면에는 아무것도 들어오지 않는것처럼 보이는 것이죠. 특히 커다란 포털사이트에 이런 경우가 많습니다. 기다림 후에 나타나는 화면은 이미 로딩이 거의 끝난 상태로 나타나게 되죠. 그와 반대로 div를 사용하게 되면, 틀을 잡아주는 것이기에 틀에 잡힌 텍스틀이 이미 뜬 후에 배경이라던지 이미지가 읽혀지게 됩니다. 유저들에겐 기다림의 지루함이 조금이나마 줄어들게 되는 것입니다. 그러므로 속도의 차이는 없는듯 커다랗게 나는것입니다. 예전 야심만만 이라는 프로그램에서 ‘당신에게 가장 긴 1분은 언제였나?’ 라는 질문에 웹사이트가 로딩되는 그 1분이 길었다 라는 대답이 상당히 많았던 것만 봐도 그 ‘약간’ 의 차이가 유저들에게는 얼마나 큰것인지를 알수 있습니다. 구글의 성공에도 1개의 이미지로 승부하는 속도가 커다란 몫을 했었죠.

    table은 유지하기 힘들다
    속도 뿐만이 아닙니다. 어찌 유지 하렵니까?
    속 도는 인터넷을 더 빨리 돌려버리면 된다고 해도, ‘유지’ 의 문제는 어쩔수 없습니다. 상상만 해도 울컥 솟아 오릅니다. 테이블 안에 수도 없이 이루어진 그 얽히고 얽힌 그 문제를 어떻게 유지를 할수 있을지. 새 웹마스터가 와서 웹사이트를 유지하려해도 이해할수 없는 수 많은 테이블의 tr, td 들을 그리고 그 안에 들어있는 테이블들을 어떻게 이해를 해서 하는지. 아직도 하고 계신분들에게 경의를 표합니다. 이럴때에 가끔은 프리렌서가 좋다는 생각을 합니다. :) 이 말도 안되는 것들만 보아도 왜 이렇게 되어야 하는지 궁금할 뿐입니다. div도 사이트가 클수록 유지하기에 복잡하지 않냐 라는 반문을 하신다면 div를 써보지 않으신 분들입니다. 각각의 레이아웃 div에는 이름을 주어서 css로 간단히 조절이 가능하기에 각각의 이름들만 알아도 새로운 css를 써버려서 내용은 그대로이되 모든 디자인이 바뀌어 버리는 놀라운 일을 할수가 있습니다. ‘스킨’ 의 개념이 보통의 html문서에서 이용되는 것입니다. 이에대해 아시는 분들은 아시지만 젠가든 이라는 곳이 그 예들을 보여줍니다. 내용은 같지만 수많은 유저들이 자신들의 css를 제출해 뽑히면 그 사이트의 디자인CSS 파일만을 바꾸어 보여줌으로써 확연히 다른 사이트로 변모하는것을 보면 확실히 이해가 가실겁니다.

    CSS3?
    이 제 곧 나오게 될 CSS3를 살펴보니 레이어들 사이에도 이제 x, y 좌우의 위치 뿐만이 아닌 진정한 케스케이딩, 차곡차곡 쌓인 문서들 처럼 앞, 뒤 의 z 위치를 정할수 있게 되어 있습니다. 아무리 테이블이 레이아웃에 좋다고 우겨도 CSS3가 출시되는 날 부터는 ‘바보’로 취급받게 될것입니다. 투명한 PNG의 사용도 가능케 했으니, 그림자 div 위에 문서 1 div을 놓고, 그 위에 문서 2 div 를 놓고 겹치게 해 놓았다고 생각해 보십시오. 그리고 다음 페이지로 넘어갈때엔 그저 CSS의 Z 속성만 바꾸어 주면 순간에 문서 1이 2의 위에 올라가게 되니, 이거 언제 css3이 출시되나 기다려 지지 않을수가 없습니다.

    table은 이제 쉬어야 할때
    테 이블은 이제 슬슬 좀 쉬어야 할때 입니다. 너무 큰일을 감당케 했습니다. 반대로 원래 그 일을 해야할 div를 너무 놀게했습니다. 위에서 주욱 길게 설명을 했듯이 테이블의 노동착취는 그만하시고 공평한 일자리를 주어야 할 때가 아닐까 생각합니다. 아니 그래야 합니다. 그것이 미래를, 앞을 바라보는 선경지명이겠습니다.
    posted by 좋은느낌/원철
    2008. 10. 15. 13:04 Web
    출처 : http://kr.blog.yahoo.com/junetee97/86.html?p=1
    +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    속성 설명
    src=notice.cgi 프레임 내에 삽입할 파일의 이름 또는 주소를 표시한다.
    name=cginjs 프레임 내에 이름을 지정. (링크시 target 지정할때)
    align=center left(왼쪽), center(중앙), right(오른쪽)정렬을 한다.
    border=1 테두리의 두께가 숫자만큼 두꺼워진다.
    bordercolor=red 테두리의 색생을 바꾼다.
    frameborder=1 or 0

    창의 경계선(두께)의 지정시
    1 이면 경계선이 나타나고
    0 이면 경계선이 없어진다.

    framespacing=1 인접한 창들의 간격
    height=200 iframe의 창의 높이(세로크기)를 조절한다.
    width=500 iframe의 창의 너비(가로크기)를 조절한다.
    marginheight=0 iframe 내부의 창의 상하 여백
    marginwidth=0 iframe 내부의 좌우 여백을 나타낸다.
    topmargin=0 상단의 공백
    scrolling=yes 스크롤바의 유무를 나타낸다.yes or no or auto
    noresize 창의 크기를 고정시킨다.
    투명 IFRAME 만들기 ALLOWTRANSPARENCY="true" 그리고
    IFRAME 태그의 src에 할당된 html 파일 내부의 BODY 태그에 

    style="background-color:transparent" 삽입 
    (IE 5.5 이상 및 넷스케이프 6 이상가능)


      IFrame 사용법 

     

    아래와 같은 방식으로 하시면 공지사항을 메인페이지 안에 삽입시킬 수 있습니다.

    <iframe src=http://img.yahoo.co.kr/blank.gif name='cginjs' width='410' height='130' marginwidth='0' marginheight='0' topmargin='0' scrolling='no' frameborder='0' ></iframe> 

    삽입 시키는 페이지에 따라 크기가 틀리기 때문에 위의 속성표를 보시고 크기라든가 스크롤 여부는 여러분에 환경에 알맞게 조정하시면 됩니다.

    속이 훤히 들여다 보이는 투명 IFRAME 만들기 (IE 5.5 이상 및 넷스케이프 6 이상가능)

    <iframe src=http://img.yahoo.co.kr/blank.gif name='cginjs' width='410' height='130' ALLOWTRANSPARENCY="true"></iframe> 

    IFRAME 삽입할 페이지인 test.html의 body에
     <body style="background-color:transparent">를 넣어 주면 됩니다.

    IFRAME에 투명 스크롤바 적용하기

    IFRAME에 삽입할 페이지에 투명스크롤바 태그를 적용해주면 됩니다.
    <iframe src=http://img.yahoo.co.kr/blank.gif name='cginjs' width='410' height='130' ></iframe> 

    IFRAME 삽입할 페이지인 test.html의 아래와 같이 입력해주면 됩니다.

    <style>
    body {
    scrollbar-face-color: #FFFFFF; 
    scrollbar-shadow-color: #90a0e0; 
    scrollbar-highlight-color: #F6F8FD; 
    scrollbar-3dlight-color: #FFFFFF; 
    scrollbar-darkshadow-color: #FFFFFF; 
    scrollbar-track-color:#FFFFFF;
    scrollbar-arrow-color: #90a0e0;
    }
    </style>

    투명스크롤바 태그는 옆메뉴에 폼태그 갤러리를 이용하거나 C.n.J 마법사를 이용하면 됩니다. 

    IFRAME에서 부모창에 링크 걸기(IFRAME ==> 일반프레임)

    1. 자바스크립트로 IFRAME에서 부모창 프레임에 링크 걸때
    <a href=" javascript :;" onclick="parent.
    parent.프레임명.location.href='페이지'";>프레임에 링크걸기</a>
    2. 일반링크로 IFRAME에서 부모창 프레임에 링크 걸때
    <a href="페이지" target="
    프레임명">프레임에 링크걸기</a> 

    부모창에서 IFRAME에 링크 걸기(일반프레임 ==> IFRAME)

    1. 자바스크립트로 부모창에서 IFRAME에 링크 걸때
    <a href=" javascript :;" onclick="parent.
    아이프레임이 속한 부모창 프레임명.아이프레임명.location.href='페이지'";>아이프레임에 링크걸기</a>
    예제 클릭 : <a href=" javascript :;" onclick="parent.cginjs_com_main.iframe01.location.href='http://www.google.co.kr'">
    2. 부모창에서 IFRAME에 링크 걸때
    <a href="페이지" target="
    아이프레임명">아이프레임에 링크걸기</a> 
    예제 클릭 : <a href="http://www.google.co.kr" target="iframe01">
    3. 부모창에 폼 값을 IFRAME 폼 필드 값 넘기기
    방법 : document.아이프레임네임.document.아이프레임내의 폼네임.아이프레임폼필드.value = document.부모창 폼네임.부모창 폼필드명.value;
    폼 테스트 :   

    IFRAME에 특정 프레임에 자바스크립트 함수 불러오기

    IFRAME에 특정 프레임에 자바스크립트 함수 불러오기
    <a href=" javascript :parent.
    parent.프레임명.자바스크립트 함수()">자바스크립트 함수 불러오기</a>

    IFRAME에 자바스크립트 함수 불러오기(프레임없을때)
    <a href=" javascript :
    parent.top.자바스크립트 함수()">자바스크립트 함수 불러오기</a>

    posted by 좋은느낌/원철
    2008. 9. 6. 13:41 Web

    출처 : http://blog.theple.com/grim/capture/all.html?uid=201
    overflow: ######;
    visible : 레이어 크기를 키워서 출력.
    hidden : 레이어 크기만큼 출력.
    auto : 내용에 따라 자동 스크롤.
    scroll : 스크롤바 생성.
    ex) overflow-x:값; overflow-y:값; overflow:값;

    position: ######;
    static : 기본값.
    relative : 하위에 div가 있을 경우엔 하위의 div를 absolute 배열.
    absolute : div에 top, right, bottom, left 값을 지정해서 원하는 위치에 고정.
    fixed : 스크롤에 상관없이 지정한 위치에 고정.
    inherit : 상위에서 지정한 값을 상속.


    visibility: ######;
    visible : 보임.
    hidden : 감춤.

    z-index: #; :: #값에 따라 우선순위 정의. (값이 높을 수록 위로)

    left: ##px;
    top: ##px;
    width: ###px;
    height: ###px;
    text-align: center;
    center , left, right ...
    background-color: #######;
    border-style: ######;
    solid , dotted .....

    border-color: ######;
    border-width: ##px;
    border: ###px;

    ex)
    posted by 좋은느낌/원철
    2008. 7. 1. 11:18 Web

    ● 상태코드범위와 의미

    100 - 199 : 정보성, 서버가 http요청을 받았으며 클라이언트는ㄴ 요청을 계속할수 있음을 나타냄.

    200 - 299 : 성공, 서버가 요청을 성공적으로 수신하고 이해했으며 수용했음.

    300 - 399 : 리다이렉션 , 요청을 완료하기 위해 더 많은 액션이 필요함

    400 - 499 : 클라이언트 에러 , 클라이언트로 인해 에러가 발생했음을 나타낸다.

    500 - 599 : 서버에러, 요청을 처리하는 도중에 발생한 서버측 에러를 나타낸다.


    ● http 응답 상태 코드

    200 : OK, 요청이 정상적으로 성공했음을 나타낸다.

    302 : Moved Temporarily, 클라이언트가 요청한 리소스가 임시적으로 이동했으며 클라이언트가 리소스에 접근하기 위해 현재의 URI를 반환해야 함을 나타냄. 클라이언트는 자동으로 GET또는 HEAD 요청을 리다이렉트 할것이다.

    400 : Bad Request, 클라이언트의 요청이 부정확한 형태이며 서버가 요청을 처리 할 수 없음

    401 : Unauthorized, 클라이언트가 제공되지 않은 사용자 인증이 필요한 리소스를 요청했거나 인증에 실패했음.

    403 : Forbidden, 서버가 클라이언트의 요청을 이해하지만 클라이언트가 요청한 리소스의 접근을 거절.

    404 : Not Found, 요청된 URI에 리소스를 위치시킬수 없는 웹서버가 사용한다. <-- 뭔말이지? 파일없단거지 뭐..ㅋㅋ

    500 : Internal Server Error, 요청을 처리하는 서버나 리소스에 예기치 않은 에러가 발생하여 요청을 처리할수 없음을 나타냄. <-- 거의 문법오류이거나 Exception의 경우...

    posted by 좋은느낌/원철
    prev 1 next