본문 바로가기

운영체제605

728x90
CSS로 특정 브라우저를 선택하는 방법 반응형 웹을 만들다보면 다양한 OS와 브라우저에 따라 표시되는 모습이 달라질 수 있어서 특정 OS나 브라우저를 CSS로 선택할 수 있는 방법을 정리합니다. 다양한 OS와 브라우저에 적합하게 일반적인 CSS 속성만으로는 다소 어려움이 있다. 선택자와 가상선택자 CSS로 특정 요소를 선택하는 방법 CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다. blog.pages.kr CSS로 특정 요소를 선택하는 방법 가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스, ::(콜론두개)을 붙인 가상 요소로 요소의 특정 부분을 선택합니다. blog.pages.kr 브라우저 선택자 (CS.. 2021. 1. 21.
728x90

반응형 웹을 만들다보면 다양한 OS와 브라우저에 따라 표시되는 모습이 달라질 수 있어서
특정 OS나 브라우저를 CSS로 선택할 수 있는 방법을 정리합니다.

다양한 OS와 브라우저

다양한 OS와 브라우저에 적합하게 일반적인 CSS 속성만으로는 다소 어려움이 있다.

 

선택자와 가상선택자

 

CSS로 특정 요소를 선택하는 방법 <선택자>

CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다. HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다.

blog.pages.kr

 

CSS로 특정 요소를 선택하는 방법 <가상선택자>

가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스, ::(콜론두개)을 붙인 가상 요소로 요소의 특정 부분을 선택합니다.

blog.pages.kr

 

브라우저 선택자 (CSS Browser Selector)

CSS Browser Selector는 CSS 선택자를 강화하는 단 한 줄의 아주 작은 자바 스크립트입니다. 각 운영체제 및 각 브라우저에 대한 특정 CSS 코드를 작성할 수 있는 기능을 제공합니다.

 

사용 방법

1. CSS Browser Selector 자바 스크립트 다운로드

  • https://raw.githubusercontent.com/rafaelp/css_browser_selector/master/css_browser_selector.js
  • git clone git : //github.com/rafaelp/css_browser_selector.git

 

2. <head> 와 </ head> 태그 사이에 자바 스크립트 추가

  • <script src="css_browser_selector.js" type="text/javascript"></script>
  • 아래 한줄짜리 전체 스크립트를 HTML 코드에 직접 넣을 수도 있음
/*
CSS Browser Selector v0.4.0 (Nov 02, 2010)
Rafael Lima (http://rafael.adm.br)
http://rafael.adm.br/css_browser_selector
License: http://creativecommons.org/licenses/by/2.5/
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

 

3. 브라우저 선택자를 통해 브라우저별 CSS 속성값 설정


OS 선택자

  • win - Microsoft Windows (all versions)
  • vista - Microsoft Windows Vista
  • linux - Linux (x11 and linux)
  • mac - Mac OS
  • freebsd - FreeBSD
  • ipod - iPod Touch
  • iphone - iPhone
  • ipad - iPad
  • webtv - WebTV
  • j2me - J2ME Devices (ex: Opera mini)
  • blackberry - BlackBerry
  • android - Google Android
  • mobile - All mobile devices


브라우저 선택자

  • ie - Internet Explorer (All versions)
  • ie8 - Internet Explorer 8.x
  • ie7 - Internet Explorer 7.x
  • ie6 - Internet Explorer 6.x
  • ie5 - Internet Explorer 5.x
  • gecko - Mozilla, Firefox (all versions), Camino
  • ff2 - Firefox 2
  • ff3 - Firefox 3
  • ff3_5 - Firefox 3.5
  • ff3_6 - Firefox 3.6
  • opera - Opera (All versions)
  • opera8 - Opera 8.x
  • opera9 - Opera 9.x
  • opera10 - Opera 10.x
  • konqueror - Konqueror
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 - Safari 3.x
  • chrome - Google Chrome
  • iron - SRWare Iron


예)

  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mac.ie .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> .[os] 와 .[browser] 사이 공백 없음


추가 옵션

  • js - 자바 스크립트 가능 여부에 따라 표시하거나 숨길 수 있음

 

브라우저 선택자 예시

<style type="text/css">
  .ie .example {
    background-color: yellow
  }
  .ie7 .example {
    background-color: orange
  }
  .gecko .example {
    background-color: gray
  }
  .win.gecko .example {
    background-color: red
  }
  .linux.gecko .example {
    background-color: pink
  }
  .opera .example {
    background-color: green
  }
  .konqueror .example {
    background-color: blue
  }
  .safari .example {
    background-color: black
  }
  .chrome .example {
    background-color: cyan
  }
  .example {
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
  .no_js {
    display: block
  }
  .has_js {
    display: none
  }
  .js .no_js {
    display: none
  }
  .js .has_js {
    display: block
  }
</style>

위와 같이 정의하고 class 속성에 example 값을 넣으면 해당 요소의 색상은 브라우저에 따라 다르게 표현됩니다.

  • Internet Explorer - yellow
  • Internet Explorer 7 - orange
  • Gecko Engine on Windows (Firefox, Mozilla, Camino) - red
  • Gecko Engine on Linux (Firefox, Mozilla, Camino) - pink
  • Gecko Engine on Other OS (Firefox, Mozilla, Camino) - gray
  • Opera - green
  • Konqueror - blue
  • Safari - black
  • Chrome - cyan
728x90
마이크로소프트, 이전 패치 취소하는 패치 긴급 발표 마이크로소프트, 이전 패치 취소하는 패치 긴급 발표http://www.boannews.com/media/view.asp?idx=66443 자꾸만 꺼졌다 켜졌다 하는 시스템 불안정화...데이터 유출 가능성 더 커져 문제되는 부분만 수동으로 껏다 켰다 하는 옵션 더해...“유연함은 언제나 환영” [보안뉴스 문가용 기자] 마이크로소프트가 멜트다운(Meltdown)과 스펙터(Spectre) 취약점과 관련하여 두 번째 응급 패치를 발표했다. 이번 패치의 주요 기능은 인텔의 말썽 많은 스펙터 관련 업데이트를 비활성화 시키는 것이었다. 인텔 역시 지난 주 “우리가 발표한 업데이트를 적용하면 무한 리부트 현상이 일어난다”고 발표하며 “패치를 적용하지 말라”고 권고한 바 있다. 출처 : 보안뉴스 2018. 1. 30.
728x90

마이크로소프트, 이전 패치 취소하는 패치 긴급 발표

http://www.boannews.com/media/view.asp?idx=66443


자꾸만 꺼졌다 켜졌다 하는 시스템 불안정화...데이터 유출 가능성 더 커져
문제되는 부분만 수동으로 껏다 켰다 하는 옵션 더해...“유연함은 언제나 환영”



[보안뉴스 문가용 기자] 마이크로소프트가 멜트다운(Meltdown)과 스펙터(Spectre) 취약점과 관련하여 두 번째 응급 패치를 발표했다. 이번 패치의 주요 기능은 인텔의 말썽 많은 스펙터 관련 업데이트를 비활성화 시키는 것이었다. 인텔 역시 지난 주 “우리가 발표한 업데이트를 적용하면 무한 리부트 현상이 일어난다”고 발표하며 “패치를 적용하지 말라”고 권고한 바 있다. 



출처 : 보안뉴스

728x90
CPU 칩셋 취약점 보안 업데이트 □ 개요 o Google社 Project Zero는 Intel社, AMD社, ARM社 CPU 제품의 취약점을 발표[1] o 영향 받는 버전 사용자는 해결방안에 따라 최신버전으로 업데이트 권고 □ 내용 o CPU의 부채널 공격(side channel attack)으로 인해 캐시 메모리의 저장된 정보가 노출되는 취약점 - 스펙터(Spectre, CVE-2017-5753, CVE-2017-5715) - 멜트다운(Meltdown, CVE-2017-5754) □ 해결 방안 - 아래 칩셋 제조사 및 OS 개발사를 확인하여 최신 업데이트 적용 ※ 최신 업데이트가 미 제공된 제품을 사용할 경우 패치 예정일을 확인하여 신속하게 패치하는 것을 권고구분패치 현황배포 여부Intel장비 제조사 및 OS 개발사를 통해 패치 권고.. 2018. 1. 5.
728x90

□ 개요
 o Google社 Project Zero는 Intel社, AMD社, ARM社 CPU 제품의 취약점을 발표[1]
 o 영향 받는 버전 사용자는 해결방안에 따라 최신버전으로 업데이트 권고
 
□ 내용
 o CPU의 부채널 공격(side channel attack)으로 인해 캐시 메모리의 저장된 정보가 노출되는 취약점
  - 스펙터(Spectre, CVE-2017-5753, CVE-2017-5715)
  - 멜트다운(Meltdown, CVE-2017-5754)
 
□ 해결 방안
  - 아래 칩셋 제조사 및 OS 개발사를 확인하여 최신 업데이트 적용
     ※ 최신 업데이트가 미 제공된 제품을 사용할 경우 패치 예정일을 확인하여 신속하게 패치하는 것을 권고

구분패치 현황배포 여부
Intel장비 제조사 및 OS 개발사를 통해 패치 권고 [2]배포중
AMD장비 제조사 및 OS 개발사를 통해 패치 권고 [3]배포중
ARM패치 버전 배포(’18.1.4) [4]배포중
Linux레드햇, 데비안 등 패치 버전 배포(’18.1.4) [5]배포중
윈도우(PC) Windows 7, 8.1, 10
(Server) 2008, 2008 R2, 2012, 2012 R2, 2016
대상 패치 배포(’18.1.4) [6]
배포중
MacOS,
iOS
멜트다운 취약점에 대한 패치버전 배포(’17.12.7)배포중
스펙터 취약점에 대한 패치버전 배포 예정 [7]배포예정
Android패치버전 배포 예정(’18.1.6) [8]배포예정
VMware패치버전 배포(’18.1.4) [9]배포중

 ※ 보안 패치 이후 시스템 성능의 영향을 미치는 이슈가 발생할 수 있으므로 설치 전 해당 제조사의 보안 공지 내용을 상세히
     검토하는 것이 필요
 
□ 용어설명
 o 부채널 공격(side channel attack) : 특수한 상황에서 처리 시간 차이의 특성을 이용한 공격 방식 중 하나

□ 기타 문의사항
 o 한국인터넷진흥원 인터넷침해대응센터: 국번없이 118
 
[참고사이트]
[1] https://googleprojectzero.blogspot.kr/2018/01/reading-privileged-memory-with-side.html
[2] https://newsroom.intel.com/news/intel-responds-to-security-research-findings/
[3] http://www.amd.com/en/corporate/speculative-execution
[4] https://developer.arm.com/support/security-update
[5] https://lkml.org/lkml/2017/12/4/709
[6] https://portal.msrc.microsoft.com/en-US/security-guidance/advisory/ADV180002
[7] https://support.apple.com/en-us/HT208394
[8] https://security.googleblog.com/2018/01/todays-cpu-vulnerability-what-you-need.html
[9] https://www.vmware.com/us/security/advisories/VMSA-2018-0002.html

728x90
728x90