반응형 웹사이트를 위한 검색엔진 최적화 | Webactually Korea

검색 폼 BLOG Here are some topics that have been on our mind lately. [] 반응형 웹사이트를 위한 검색엔진 최적화 모바일 기기가 빠르고 다양하게 변하면서 웹사이트에 반응형 디자인이 도입되었습니다. 하지

www.webactually.co.kr

2016년에 내가 SEO 에 대해 잘 모를때 좋은 내용인거 같아 올린 포스팅

2024년 다시 읽어보니 국내 사이트든 해외 사이트든 아직도 같은 문제를 겪고 있다.

저작자표시 비영리 동일조건

▲ 에디터플러스 emmet css 공백제거

 

에디터플러스에서 emmet 사용시 css 작성시 공백이 생겨서 사용을 잘 안했다.

예를 들어 pos:a → position: absolute;

                                   속성   :(공백) 값

 

대신 젠코딩을 사용하면 아래와 같은 결과를 얻을 수 있어다.

pos:a → position:absolute

 

그래도 emmet 을 사용하고 싶어 emmet_epp.js 수정을 했다.

아래 경로로 들어가 라인 11110 을 수정하면 된다.

 

[경로]

C:\Users\사용자\AppData\Roaming\EditPlus 3\emmet_epp.js

 

라인 11110

prefs.define('css.valueSeparator', ': ', //원본

prefs.define('css.valueSeparator', ':', //수정

 

저작자표시 비영리 동일조건

'퍼블리싱 > etc' 카테고리의 다른 글

color scheme designer  (0) 2011.12.11


IE 핵 (css hack)


IE6 핵(underscore hack)

div{_width:100px; _height:50px;}               속성 앞에 언더바(_)를 붙여준다.



IE6 핵(star hack)

*html div{width:100px; height:50px;}               선택자 앞에 *html를 붙여준다.



IE7 핵(star hack)

*div{width:100px; height:50px;}               선택자 앞에 별(*)를 붙여준다.



IE7 핵

 *+html body div{width:100px; height:50px;}/* IE7, OPERA 적용 */
*:first-child+html div{width:100px; height:50px;}/* IE7 적용 */

선택자 앞에 *+html body 또는 *:first-child+html 을 붙이면 IE7 or Opera 에서 적용이 됩니다.



IE 6, 7 핵(dot hack)

div{.width:100px; .height:50px;}

프로퍼티의 가장 앞부분에 닷(.)를 붙이면 IE6, 7에서만 적용이 됩니다.



IE 7, 8, 9 핵(선택자 핵)

html>body div{width:100px; height:50px;}

셀렉트 앞에 html>body를 붙이면 IE7, 8, 9에서 적용이 됩니다.



IE8 핵

div{width:100px; height:50px\9;}

프로퍼티 마지막에 \9 를 붙인다.(
단, IE6~7에서도 인식이 된다.)


IE8 핵(속성 핵)

div{width:/*＼**/100px; height:/*＼**/50px;}

프로퍼티의 속성값 앞부분에 (/*＼**/) 를 붙이면 IE8에서만 적용이 됩니다.

→ 포스팅 작성시에 테스트 했을때는 되었는데 현재 다시 사용하니 적용이 안됨 (2012.10.16) -- ??


IE8, IE9 ,IE8+9 핵

div{width:100px \0/IE8+9; height:50px  \0/IE8+9;}

프로퍼티의 속성값 뒷부분에 \0/IE8 를 붙이면 IE8 에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE9 를 붙이면 IE9에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE8+9 를 붙이면 IE8과 IE9 모두 적용이 됩니다.


#. 2015년 8월26일 내용 보완

IE8 핵 사용할때는 IE8, IE7 순으로 사용해야힌다.
그러나 어떻게 해도 IE8 에서 핵을 사용 할 수가 없었다. (내가 쓴 포스팅을 따라해도 안됨)
그래서 구글링을 통해 알게 된 방법이 아래와 같다

IE8 핵 (미디어쿼리 핵)

@media \0screen {

.box{width:800px;}

}

→ 사용가능(굿!!)


참고
http://blog.naver.com/0131v?Redirect=Log&logNo=110119269445
http://biew.co.kr/5
http://www.nmindplus.com/2006/06/28/css-hack/ 
http://blog.naver.com/2z00/140136776524
http://blog.naver.com/2z00/140165674205

핵을 사용해야 하는 이유와 어떤 영향을 끼치는지 적혔있는 블로그입니다.
http://niceilm.blog.me/150026133263





IE filter



아래는 IE Blog에  2008 년 9 월 8 일 오후 8시 29분에 올라온 글이다.
사이트에 번역기가 있으니 돌려보아도 될것이다.
전 간단히 필요한 부분만 발취하겠습니다. 


Microsoft CSS Vendor Extensions

CSS 2.1 명세에 따라 나열 된 범주에 속하는 속성의 이전에 있어야 microsoft, 모질라, 오페라, '-o-' '-moz-' '-ms-' 와 같은 공급 업체 특정 접두사 등등.
인터넷 익스플로러 8와 함께 완전 한 CSS 2.1 준수에 도달 우리의 계획의 일환으로, 우리는 '-ms-' 접두사 뒤에 다음 조건 중 하나를 충족 하는 모든 속성을 배치 하기로 결정 했습니다.

CSS 스팩에 정의되어 있지 않은 MS 확장 속성일 경우
CSS 스팩에 정의되어 있지만 W3C에서 아직 권고후보 상태인 경우
CSS 스팩에 정의되어 있는 속성

Property  Type W3C Status
-ms-accelerator Extension  
-ms-background-position-x CSS3 Working Draft
-ms-background-position-y CSS3 Working Draft
-ms-behavior Extension  
-ms-block-progression CSS3 Editor's Draft
-ms-filter Extension  
-ms-ime-mode Extension  
-ms-layout-grid CSS3 Editor's Draft
-ms-layout-grid-char CSS3 Editor's Draft
-ms-layout-grid-line CSS3 Editor's Draft
-ms-layout-grid-mode CSS3 Editor's Draft
-ms-layout-grid-type CSS3 Editor's Draft
-ms-line-break CSS3 Working Draft
-ms-line-grid-mode CSS3 Editor's Draft
-ms-interpolation-mode Extension  
-ms-overflow-x CSS3 Working Draft
-ms-overflow-y CSS3 Working Draft
-ms-scrollbar-3dlight-color Extension  
-ms-scrollbar-arrow-color Extension  
-ms-scrollbar-base-color Extension  
-ms-scrollbar-darkshadow-color Extension  
-ms-scrollbar-face-color Extension  
-ms-scrollbar-highlight-color Extension  
-ms-scrollbar-shadow-color Extension  
-ms-scrollbar-track-color Extension  
-ms-text-align-last CSS3 Working Draft
-ms-text-autospace CSS3 Working Draft
-ms-text-justify CSS3 Working Draft
-ms-text-kashida-space CSS3 Working Draft
-ms-text-overflow CSS3 Working Draft
-ms-text-underline-position Extension  
-ms-word-break CSS3 Working Draft
-ms-word-wrap CSS3 Working Draft
-ms-writing-mode CSS3 Editor's Draft
-ms-zoom Extension  

IE전용 속성이나 css속성 중에 IE가 인식하는 css 범위에서는 모두 사용이 가능하다


필터속성에 관해 msdn 에서 아래 처럼 사용하라고 권고

-ms- 속성을 먼저 써야하며 따옴표를 사용해야한다.(" ")

#transparentDiv { 
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
       opacity: .5; 


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

'퍼블리싱 > HTML&CSS' 카테고리의 다른 글

IE Conditional Comments 필터링  (1) 2011.12.14
작업하다 보면

<!--[if lt IE 7 ]><html lang="en" class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie ie7"><![endif]--> 
<!--[if IE 8 ]><html lang="en" class="ie ie8"><![endif]--> 
<!--[if IE 9 ]><html lang="en" class="ie ie9"><![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->

이런 문구를 자주 보게된다.
이걸 IE Conditional Comments 필터링(IE CC-필터링) 이라 하며, 간단히 IE-CCF 이라한다.

익스플로어 CSS 출력 버그들을 CSS Hack과 Filtering으로 대처할 수 있다.
CSS Hack을 많이 사용했으나, IE7이 출시된 이후로는 CSS Filtering을 주로 사용한답니다.
특히, MS에서 추천하는 방법이다.

먼저 위에 예를 풀어보자면

<!--[if lt IE 7 ]><html lang="en" class="ie ie6"><![endif]-->         IE7 버전보다 낮은 버전에서만 (7버전 제외)
<!--[if IE 7 ]><html lang="en" class="ie ie7"><![endif]-->           IE7 버전에서만 읽어들이도록
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->    IE9 보다 높거나 IE가 아닌

[if lt IE 7 ], [if IE 7 ], [if (gt IE 9)|!(IE)]  별 신경 안쓰면 다 똑같이 보인다.(영어 울렁증)

희주니님 블로그 IE Conditional Comments 필터링에 대해 잘 정리가 되어 있다. (아래 출처 URL 참고)


모든 IE에서만 적용하려면

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-only.css" /> <![endif]-->

 
IE6 버전에서만 읽어들이도록

<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6-only.css" /> <![endif]-->

 
IE7 버전에서만 읽어들이도록

<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7-only.css" /> <![endif]-->


IE9 보다 높거나 IE가 아닌

<!--[if (gt IE 9)|!(IE)]> for higher than IE9 or non-IE <![endif]--> 





기준 버전보다 낮은 버전에서만 적용


 
IE7 버전보다 낮은 버전에서만 (7버전 제외)
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than.css" /> <![endif]-->
 
IE7 버전보다 낮은 버전에서만 (7버전 포함)
<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than-equal.css" /> <![endif]-->




기준 버전보다 높은 버전에서만 적용


 
IE7 버전보다 높은 버전에서만 (7버전 제외)
<!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than.css" /> <![endif]-->
 
IE7 버전보다 높은 버전에서만 (7버전 포함)
<!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than-equal.css" /> <![endif]-->




기타 다음과 같은 문구도 가능하다.


 
IE가 아닌 다른 브라우저만
<!--[if !IE]> <link rel="stylesheet" type="text/css" href="not-sucks.css" /> <![endif]-->
 
IE6.5 버전에서만 읽어들이도록
<!--[if IE 6.5000]> <link rel="stylesheet" type="text/css" href="ie6.5-only.css" /> <![endif]-->


gt 는 greater than
gte 는 greater than or equal
lt 는 less than, 
lte 는 less than or equal 의 약자이다. 

다음과 같이 스크립트도 삽입할 수 있다.
<!--[if IE 6]> <script type="text/javascript"> alert("아직 IE6을 쓰는거야?"); </script> <![endif]-->




출처

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

'퍼블리싱 > HTML&CSS' 카테고리의 다른 글

IE 핵 (css hack)과 IE filter  (6) 2012.01.10
홈페이지를 디자인할 때 칼라를 정할때 힘들 경우가 있다.

정말 완전 힘들다...

얼마전에 이 사이트를 발견했는데 유용한 사이트 같다.

http://www.colorschemedesigner.com/


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

'퍼블리싱 > etc' 카테고리의 다른 글

[에디터] 에디터 emmet 사용시 css 공백제거  (2) 2015.06.22

+ Recent posts

티스토리툴바