728x90

<meta http-equiv="X-UA-Compatible" content="IE=5" />

<meta http-equiv="X-UA-Compatible" content="IE=6" />

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<meta http-equiv="X-UA-Compatible" content="IE=9" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 웹표준' 카테고리의 다른 글

jquery input type='file' 초기화 처리  (0) 2016.07.12
홈페이지 생성시 웹 폰트 사용하기  (0) 2015.11.24
다음 사진 올리는 방법  (0) 2015.08.12
html5 기본구조  (0) 2013.08.09
html form 전송 시 character set 설정  (0) 2013.06.17
728x90

var v_btnFileDel = $("#btnFileDel");     // 추가처리..


v_btnFileDel.click(function(event){

    var v_addfile = $("[id^='addfile']");

    var v_addFileCnt = v_addfile.length;

    if(v_addFileCnt > 1){

        // alert(v_FileCnt+"::"+v_addFileCnt);

        $("#addfile"+v_addFileCnt).remove();

    }else if(v_addFileCnt == 1){

        if (/msie/.test(navigator.userAgent.toLowerCase())) {

            // ie 일때 input[type=file] init.

            $("#addfile"+v_addFileCnt).replaceWith($("#addfile"+v_addFileCnt).clone(true) );

        } else {

            // other browser 일때 input[type=file] init.

            $("#addfile"+v_addFileCnt).val("");

        }

    }

    event.preventDefault();

});

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 웹표준' 카테고리의 다른 글

IE호환성 모드 설정  (0) 2016.10.19
홈페이지 생성시 웹 폰트 사용하기  (0) 2015.11.24
다음 사진 올리는 방법  (0) 2015.08.12
html5 기본구조  (0) 2013.08.09
html form 전송 시 character set 설정  (0) 2013.06.17
728x90

네이버 나눔 고딕을 임포트 할 경우 메모리에 계속 오버로드 되는 문제가 발생한다.

 

1. 가급적 경량의 웹 폰트를 사용하자.

2. 메뉴 등을 이미지화 시켜서 사용하자. (png, gif 이미지)

3. 맑은 고딕을 사용하자. (거의 대부분의 컴퓨터에 기본값으로 설정 된 폰트다.)

 

웹에이전시에서 예쁜 홈페이지를 만든답시고 무거운 폰트를 로딩해서 사용한다.

 

원래 홈페이지란 사용자에게 유용한 정보를 전달하기 위해 만드는 도구이다.

 

홈페이지는 경량화되어야 하고, 유용한 정보를 충실하게 담으면 된다고 생각한다.

 

깔끔하고 보기 편한 홈페이지를 만들도록 노력하자.

 

 

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 웹표준' 카테고리의 다른 글

IE호환성 모드 설정  (0) 2016.10.19
jquery input type='file' 초기화 처리  (0) 2016.07.12
다음 사진 올리는 방법  (0) 2015.08.12
html5 기본구조  (0) 2013.08.09
html form 전송 시 character set 설정  (0) 2013.06.17
728x90

 

1. 다음(daum) 사진 올리는 방법

 

http://t1.daumcdn.net/thumb/R1024x0/?fname=

 

​이 주소를 기억해주세요.

다음 블로그에 올려진 주소는 기본적으로 이런 형태의 주소입니다.

 

http://cfile213.uf.daum.net/original/2508663D5405CB3518FEA1

 

엑박없이 올리는 방법은 주소 앞에 위에 주소를 붙여 넣으면 정상적으로 사진이 보입니다. 

이렇게요.

좀 번거롭기는 하지요.

editor 모드에서 안되고, HTML 모드에서 글을 작성 해주셔야 합니다.

아니면 editor 모드로 올리고 (당연 엑박) 수정으로 들어가서 위 주소를 추가하는 방법도 가능합니다. 

<img src=http://t1.daumcdn.net/thumb/R1024x0/?fname=​http://cfile213.uf.daum.net/original/2508663D5405CB3518FEA1>​

 

 

 

2. 2014년 karawa에 올려진 다음 사진 수정.

 

<img src=(주소 추가)​=기존 주소> 

 

http://t1.daumcdn.net/thumb/R1024x0/?fname=​​http://cfile213.uf.daum.net/​

 

이런 형시으로 변경해주시면 됩니다.

 

 

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 웹표준' 카테고리의 다른 글

jquery input type='file' 초기화 처리  (0) 2016.07.12
홈페이지 생성시 웹 폰트 사용하기  (0) 2015.11.24
html5 기본구조  (0) 2013.08.09
html form 전송 시 character set 설정  (0) 2013.06.17
if IE 명령어 사용법  (0) 2012.10.25
728x90

기본적인 HTML5 구조를 적어 보겠습니다.

 

   보통 웹 사이트를 나눌때의 구조 입니다.

 

    로고,메뉴,내용,부가내용, 하단

 

    보통 이런식의 주조로 나누어 있습니다.

   

    header - 로고영역

    nav      - 메뉴부분

    section - 본문 내용

    aside   -  서브 혹은 광고 컨텐츠

    footer   -  사이트 하단부

 

    이외에

 

    article  - section 내의 주요 컨텐츠

    hgroup - header 영역의 구조 담당 

 

이전 HTML과 다른 점이 요런 식으로 분리해서 정의해 놓은 부분 입니다.

 

기존 table 이나 div 로 만들어도 전혀 문제 될 건 없지만 일단 HTML5 를 배우고자 함이라

 

요 정도는 알아 두어야 겠네요.

 

 

대충 코드로 만들자면 이렇습니다.

 

<!doctype html>     -  HTML5 를 사용 할꺼라는 선언
<html>

<head>
<meta charset="utf-8"> - 메타 태그 문자 선언
<title>HTML5 CSS3</title> - 타이틀 입니다. 브라우저를 열면 -->
</head>

 

<body> 
 <header>

   <hgroup>
    <h1>header - 웹페이지 로고</h1>

   </hgroup>
 </header>
 
 <nav>

 <h2>nav</h2>
  <ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
  </ul>
 </nav>
 
 <aside>
   <h2>aside - 부가내용/광고</h2>
 </aside>
 
 <section>
    <h1>section - 본문</h1>                                      <실행시 위 그림처럼 나옵니다>
    <article>article - 주제1:내용</article>
    <article>article - 주제2:내용</article>                   
 </section>
 
 <footer>
    <h2>footer - 하단/카피라이트</h2>
 </footer>

</body>


</html>

 

참조 사이트 : http://sonjjy.blog.me/60194604086

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 웹표준' 카테고리의 다른 글

jquery input type='file' 초기화 처리  (0) 2016.07.12
홈페이지 생성시 웹 폰트 사용하기  (0) 2015.11.24
다음 사진 올리는 방법  (0) 2015.08.12
html form 전송 시 character set 설정  (0) 2013.06.17
if IE 명령어 사용법  (0) 2012.10.25
728x90

입력받은 데이터를 서버에서 처리할 수 있는 문자셋으로 변환해서 전송하게 된다.

…

     <form name=”fForm” method=”post” action=”" accept-charset=”utf-8″>

     </form>

…

     현재 페이지의 문자셋과 관계없이 전송시에 accept-charset 에 지정된 문자셋으로 변환해서 전송하게 된다.

Posted in JavaScript by 로드러너

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 웹표준' 카테고리의 다른 글

jquery input type='file' 초기화 처리  (0) 2016.07.12
홈페이지 생성시 웹 폰트 사용하기  (0) 2015.11.24
다음 사진 올리는 방법  (0) 2015.08.12
html5 기본구조  (0) 2013.08.09
if IE 명령어 사용법  (0) 2012.10.25
728x90

IE Conditional Comments 필터링

2007.08.27 , 오후 01:45 웹 접근성,코드 7 comments »

W3C의 규격에 의거하여 CSS 코드를 작성하더라도, 각각의 웹 브라우저마다 웹 페이지가 다르게 출력되는 문제가 있습니다. 이러한 문제는 브라우저들이 CSS 규격을 조금씩 서로 다르게 해석하고 출력할 뿐더러, 몇몇 규격은 전혀 출력하지 못하기 때문에 발생합니다.

이처럼 브라우저가 CSS를 W3C 규격과 다르게 출력하거나, 전혀 출력하지 못하는 문제를 CSS 출력 버그(CSS Rendering Bug)라고 합니다. CSS 출력 버그는 표준을 준수하여 웹 페이지를 제작할 때 가장 큰 걸림돌이 됩니다. W3C 규격 외에도 각각의 웹 브라우저들의 CSS 출력 현황에 대해서도 이해해야 하며, 이러한 버그들을 잡는 방법까지 파악해야 하기 때문입니다.

IE7, FF1~2, Opera9, Safari처럼 최근에 출시된(morden) 웹 브라우저들은 W3C 규격에 맞춰서 CSS를 출력합니다. 문제는 IE6, NN7 이하의 오래된 브라우저들이죠. 특히 높은 브라우저 시장 점유율을 기록중인 IE6 브라우저의 CSS 출력 버그들이 큰 문제입니다.

이러한 CSS 출력 버그들을 CSS Hack과 Filtering으로 대처할 수 있습니다. 예전에는 CSS Hack을 많이 사용했으나, IE7이 출시된 이후로는 CSS Filtering을 주로 사용합니다. 특히 사용이 간단하고 MS에서 추천하는 방법인 IE Conditional Comments Filtering(IE CC-필터링)을 가장 많이 사용합니다.

IE CC-필터링 소개

IE Conditional Comments은 MS에서 제시한 방법으로 MS IE5 이상의 브라우저에서 사용할 수 있습니다. 이 방법을 이용하면 IE 버전에 따라 HTML 코드를 숨기거나 보일 수 있습니다. 사용자의 IE 버전 별 조건(Condition)을 HTML의 주석(comments)의 구조로 필터링하는 방법기에 IE-CC 필터링이라고 하며, 간단하게 IE-CCF라고 합니다.

아래의 코드를 이용하면 ie7only.css를 IE7에서만 사용할 수 있습니다.

<!--[if IE 7]>

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

<![endif]-->

IE CC-필터링을 사용하는 이유

IE6 이하의 브라우저는 CSS 선택자(selector)에 접근하지 못하는 문제가 있습니다. 이 점을 이용해서 IE6 이하의 브라우저에 특정한 CSS를 추가하거나 숨기는 방법이 바로 CSS Hack입니다. 하지만 CSS2 규격에 정의된 대부분의 선택자를 이용할 수 있는 IE7이 출시되면서, 기존에 사용해왔던 대부분의 CSS Hack들 사용할 수 없게 됐습니다. 이 때문에 최근엔 대부분 웹 개발자와 디자이너들이 브라우저의 CSS 출력 버그를 대처하기 위해서 CSS Filer를 사용합니다.

물론, IE CC-필터링은 HTML에 문법에 맞지 않고 불필요한 코드를 추가하는 문제점이 있습니다. 이에 어떤 개발자는 JS를 이용해서 브라우저의 종류와 버전을 판별하는 방법을 이용하기도 합니다. 하지만 JS를 이용한 방법은 IE CC-필터링보다 코드가 길고 복잡할 뿐더러, DOM으로 접근하기엔 브라우저 파싱 순서가 늦어서 출력되는데 문제가 발생합니다. 즉, CSS 출력 버그를 처리하는데 IE CC-필터링이 최선은 아니지만, 현재로써 가장 확실한 차선책입니다.

IE CC-필터링 사용법

IE Conditional Comments은 HTML 주석 구조에, IE의 조건문을 포함합니다. IE 조건문은 IE의 버전과 상하관계, 부정조건 등을 사용할 수 있습니다.

<!--[if 조건]>HTML 코드<![endif]-->

조건문에 사용할 수 있는 요소

Item

Example

Comment

IE

[if IE]

The only currently supported feature is the string "IE", corresponding to Internet Explorer.

value

[if IE 7]

An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. For more information, see Version Vectors.

!

[if !IE]

The NOT operator. This is placed immediately in front of the feature, operator, or expression to reverse the Boolean meaning of the expression.

lt

[if lt IE 5.5]

The less-than operator. Returns true if the first argument is less than the second argument.

lte

[if lte IE 6]

The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.

gt

[if gt IE 5]

The greater-than operator. Returns true if the first argument is greater than the second argument.

gte

[if gte IE 7]

The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.

( )

[if (IE 7)]

Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.

&

[if (gt IE 5)&(lt IE 7)]

The AND operator. Returns true if all subexpressions evaluate to true

|

[if (IE 6)|(IE 7)]

The OR operator. Returns true if any of the subexpressions evaluates to true.

true

[if true]

Always evaluates to true.

false

[if false]

Always evaluates to false.

IE CC-필터링 예제

IE7일 경우 ie7only.css를 사용

<!--[if IE 7]>

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

<![endif]-->

IE이 아닐 경우 non-IE.css를 사용

<![if !IE]>

  <link rel="stylesheet" type="text/css"  href="non-ie.css">

<![endif]>

IE7 이하일 경우 ieOld.css를 사용

<!--[if lt IE7]>

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

<![endif]-->

IE일 경우 IE.js를 사용하고, IE7 이하일 경우 IE-old.css를 사용

<![if IE]>

        <script type="text/JavaScript" src="http://hooney.net/js/ie.js"></script>

        <!--[if lt IE7]>

               <link rel="stylesheet" type="text/css" href="ie-old.css">

        <![endif]-->

<![endif]-->

위에서 소개한 IE CC-필터링 외에도, 다양한 방법의 필터링 방법이 있습니다. Communis에서 CSS만을 이용하거나, HTML을 함께 이용하거나, 또는 JS를 이용하여 필터링하는 방법을 확인할 수 있습니다.

참고 URI

또 다른 읽을거리

Related Post

 

참조 사이트 - 웹쟁이 조훈의 후니넷 (http://hooney.net)

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 웹표준' 카테고리의 다른 글

jquery input type='file' 초기화 처리  (0) 2016.07.12
홈페이지 생성시 웹 폰트 사용하기  (0) 2015.11.24
다음 사진 올리는 방법  (0) 2015.08.12
html5 기본구조  (0) 2013.08.09
html form 전송 시 character set 설정  (0) 2013.06.17

+ Recent posts

티스토리툴바