안녕하세요. IT초보입니다.
오늘은 CSS가 무엇인지 알아보는 시간을 가지려고 합니다!
포스팅이 유익하다면 공감 부탁드려요:)
CSS(Cascading Style Sheet)란?
웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트로
쉽게 말해서 웹페이지를 꾸며주는 언어라고 보시면 됩니다.
웹페이지를 형성하는 기초적인 문법 틀이 HTML이니
CSS란 HTML을 꾸며주는 언어라고 할 수 있습니다.
기존의 HTML을 이용하여 웹페이지 제작 시 글자체, 줄 간격,
배열 위치 등을 일일이 지정해야 하는 번거로움이 있으나
CSS 이용 시 작성 형식을 미리 저장해 두면 웹페이지의
한 가지 요소만 변경해도 관련 페이지 전체가
한꺼번에 변경되므로 작업시간 관리에도
효율성을 추구할 수 있는 장점이 있습니다.
CSS 활용 시 시간적인 절약뿐만 아니라,
페이지 전체가 한 번에 변경이 되니
문서 전체의 일관성을 유지하는데
도움이 된다는 장점도 있습니다.
CSS 방식의 디자인은 웹 사이트의
성능 향상에 기여하며 웹 접근성이나
웹 사용성을 높이는데도 효과적인데요,
웹 표준에 대해서 알아보고 싶으시다면
이전 포스팅을 참고해 주세요:)
↓↓↓↓↓↓↓↓↓
CSS는 마크업 요소에 스타일을 적용하기 위해서
W3C에서 고안한 언어로 테이블 방식의 레이아웃 때문에
마크업 코드가 복잡해지는 문제를 해결할 수 있습니다.
다만, 오래된 인터넷 익스플로러의 경우 CSS를
일부 지원하지 않아서 문제가 발생하는 경우가 있는데
CSS hack으로 보완이 가능합니다.
인터넷 익스플로러는 7버전부터 부분적으로 웹 표준
지원이 되었고 버전 8부터는 전면적으로 웹 표준을 지원하게 되었습니다.
(*CSS hack: 코딩 기술 중 하나로, 브라우저에 따라
CSS 마크업을 보여주거나 숨길 수 있는 기능을 갖고 있다.)
Acid Browser Test
Web Standards Project(WaSP) 사이트에서는 사용자가 이용하는
웹 브라우저가 W3C에서 권고하는 웹 표준을 제대로 준수했는지를
체크하는 도구인 Acid Test를 제공했습니다.
Acid Test는 CSS 지원 여부를 체크하는
Acid2와 HTML XHTML DOM, CSS2, CSS3 등 웹 표준
기술 전반에 걸친 성능을 체크하는 Acid3 가 있으며,
이 테스트를 통해 사용자가 이용하는 웹브라우저에서
웹 표준 지원 여부에 따라 어떤 차이를 보이는지 확인가능합니다.
Acid1은 1999년 Acid2는 2005년 Acid3은 2008년에 만들어진 테스트인데
그 이후에 갱신된 웹 표준을 제대로 반영하지 못합니다.
만들어진지 오래된 테스트여서 현재로서는 웹 표준을
준수하는 브라우저에서는 Acid2, Acid3 테스트가 실패하는 것이 정상 동작입니다.
1) Acid1 Test
처음에 명칭은 Box acid Test라고 불렸으며
웹브라우저를 위한 테스트 페이지로
웹 표준에 대한 브라우저의 적합성을 확인하기 위해 고안되었습니다.
1998년에 개발되었고 CSS1.0 규격의 초기 웹브라우저 간
기본 상호운용성을 확립하는데 중요한 역할을 했다고 합니다.
2) Acid2 Test와 CSS
웹 표준의 목적은 특정 브라우저에 의존하지 않는 것인데
이것을 가능하게 해주는 것이 Web Standards Project(WaSP) 사이트에서
제공하는 Acid Test였고 Acid2 Test는 CSS 지원 수준을
가늠할 수 있는 방법이 되었습니다.
Acid2는 HTML 마크업, CSS 2.1 스타일링, PNG 이미지 등을
보여주는 브라우저 기능을 테스트하는 웹페이지로 테스트 페이지는
웹 표준 프로젝트에 의해 2005년 4월 13일에 공개되었습니다.
Acid1과 마찬가지로 테스트 페이지의 표시상태가
기준 영상과 일치하게 되면 테스트를 통과한 것으로 간주합니다.
Acid2는 마이크로소프트 인터넷 익스플로러를 염두에 두고 설계되었습니다.
2005년 10월 31일 사파리 2.02는 Acid2를 통과한 최초의 브라우저가 되었고
2009년 3월 19일 인터넷 익스플로러 8이 출시되었고 모든 주요 데스크톱의
웹 브라우저의 최신 버전은 테스트에 통과했으나
IE10 출시와 함께 테스트에 실패하게 됩니다.
3) Acid3 Test
Web Standards Project에서 웹 브라우저가 다양한 웹 표준의 요소 중
특히 DOM JavaScript를 준수하는지 검사하는 웹 테스트 페이지입니다.
Acid3는 2007년 4월에 개발되어 2008년 3월 3일에 출시되었으며
Acid2는 주로 CSS에 초점을 맞췄지만 Acid3 test는 ECMascript, DOM leverl2와 같이
웹 2.0 특성의 상호작용성이 높은 웹사이트에서 사용되는 기술에 초점을 맞췄습니다.
Acid Browser Test 이외의 웹 표준 테스트
HTML5test와 Peacekeeper가 대표적인 웹 표준 테스트 방법인데,
현재로서는 HTML5test만 사용합니다.
(Peacekeeper란 사이트는 2015년 이후로 지원이 중단되었다.)
HTML5test(http://html5test.com)
Acid3 이후로 HTML5의 기능을 테스트하는 사이트입니다.
HTML5test는 웹 표준 HTML5와 Web SQL Database 뿐만 아니라
WebGL 표준을 구현하는데 있어 웹브라우저의 정확성을 평가합니다.
웹브라우저를 테스트하기 위해서는 해당 웹사이트를 진입해야 하는데
페이지 방문 시 자동으로 점수를 측정하여 보여줍니다.
만점은 555점으로 웹브라우저의 정확성에 관련한 기준들을 토대로 점수화하여 측정합니다.
인터넷 익스플로러로 접속해보니 제 웹브라우저에 대한 점수는 312점이네요^^(312점/555점)
HTML5test는 HTML 요소, 웹 스토리지 등에 대한 브라우저의 지원을 평가하며,
구글 크롬은 535점, 오페라 45점, 모질라 파이어폭스 68점,
마이크로소프트 엣지 18점 GNOME 웹 3.36점, 인터넷 익스플로러 11은 312점으로 측정됩니다.
CSS 활용은 웹 표준을 준수하면서, 사용자의 편의성도 추구할 수 있는 도구라고 할 수 있습니다.
하지만, 제대로 된 활용을 위해서라면 HTML 공부가 선행되어야 한다는 점 잊지 마세요!
여러분의 공감은 포스팅을 지속하는 힘이 됩니다:)
감사합니다.
'Web' 카테고리의 다른 글
| 폼의 정의 및 구성요소 (0) | 2020.05.28 |
|---|---|
| 테이블 관련요소 (0) | 2020.05.28 |
| 목록, 텍스트 관련 요소 (0) | 2020.05.28 |
| 링크와 이미지 요소 (0) | 2020.05.28 |
| 웹(WWW)서비스란? (0) | 2020.05.28 |
댓글