반응형
채용 공고를 보다보면 HTML5와 CSS3 라는 키워드를 볼 수 있다.
HTML과 CSS는 아는데..
이번기회에 우리가 사용하는 HTML, CSS와 HTML5, CSS3는 무슨관계가 있을지 알아 보도록 하겠다.
HTML5
HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것이다.
HTML5는 2014년 확정된 차세대 웹 표준
- 멀티미디어
- 플러그인의 도움없이 비디오 및 오디오 기능을 자체적으로 지원
- 그래픽
- SVG, 캔버스를 사용한 2차원 그래픽과 CSS. WEBGL을 사용한 3차원 그래픽을 지원
- 통신
- 지금까지의 HTML은 단방향 통신만이 가능하였으나 HTML5는 서버와 소켓 통신을 지원하므로 서버와의 양방향 통신이 가능
- 디바이스 접근
- 카메라, 동작센서 등의 하드웨어 기능을 직접적으로 제어
- 오프라인 및 저장소
- 오프라인 상태에서도 애플리케이션을 동작
- 시맨틱 태그
- HTML 요소의 의미를 명확히 설명하는 시맨틱 태그를 도입하여 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명
- 웹워커
- 멀티프로세스 기능 지원
- CSS3
- HTML5는 CSS3를 완벽하게 지원
CSS3
차세대 HTML5 제안과 함께 CSS3라는 이름의 새로운 스타일이 나왔다.
차세대 웹 개발을 위한 새로운 표준이다.
CSS2와 CSS3의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되고 있다는 점이다.
이것은 각종 브라우저나 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트하는 것을 돕는다.
css3 장점 - 이미지를 사용하지 않아도 되기 때문에 웹 페이지의 데이터량을 절약할 수 있다.
(CSS2에서는 모서리를 둥글게 표현하려면 모서리가 둥글게 처리된 이미지를 준비해야 했다)
다중 컬럼 레이아웃(Multiple column layout) 컬럼 갯수 정의하여 다수의 컬럼(세로단)에 텍스트를 배치할 수 있다.
- column-count 컬럼의 갯수를 직접 지정. 컬럼의 너비는 컬럼 갯수 기반으로 자동으로 결정(table)
- column-width 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록한다.
- column-gap 컬럼 간 띄어질 공간 지정한다.
- column-rule 컬럼 구분 막대의 border style을 지정한다.
텍스트효과 및 블럭효과
- text-stroke: 이미지로 텍스트 효과를 줬어야 했던 부분을 스타일로 지정할 수 있다.
- text-shadow: 그림자 효과를 줄 수 있다.
- border-radius: 테두리 효과를 줄 수 있다.
- line-gradient , gradient: 그라디언트를 줄 수 있다.
- JavaScript를 사용하지않고도 애니메이션을 만들거나 변형할 수 있다.
- translate: 단락이나 배치를 세세하게 정의할 수도 있다.
CSS3를 구성하고 있는 주요 모듈
- 선택자(Selectors)
- 박스 모델(Box Model)
- 배경(Backgrounds)
- 이미지(Image Values and Replaced Content)
- 텍스트 효과(Text Effects)
- 2D 변형(Transformations)
- 3D 변형(Transformations)
- 애니메이션(Animations)
- 다중 칼럼(Multiple Column) 레이아웃
- 사용자 인터페이스(User Interface)
반응형