시맨틱 웹 HTML 작업, 시맨틱 웹 모바일 스타일링-미디어 쿼리 제작, 공통 스타일 시트 별도 제작, 상속 기능 활용

 

 

시맨틱 웹 HTML 작업

시맨틱 웹 HTML 작업에는 시맨틱 마크업과 뷰 포트 메타데이터가 있습니다.

 

구분	설명
시맨틱 마크업 작업	·       웹 표준에 입각해서 심플하면서도 분명하게 제작합니다. ·       시맨틱 마크업을 위해서 HTML5의 header, article, section, footer 엘리먼트들을 사용 합니다.
뷰 포트 메타데이터	·       한 화면에 모든 내용을 다 보여주기 위해서 자동으로 화면을 줌 아웃해 글자가 작게 보이게 합니다.
모바일 스타일링	·       미디어 쿼리로 각 경우에 맞는 CSS스타일을 제작합니다. ·       동일한 스타일을 별도 파일로 제작한 후 사용할 수 있습니다. ·       상속기능 활용하여 상위스타일을 그대로 처리합니다.

 

 

 

시맨틱 웹 모바일 스타일링

·       미디어 쿼리 제작

·       공통 스타일 시트 별도 제작

·       상속 기능 활용

 

 

o모바일 스타일링의 미디어 쿼리 제작

미디어 쿼리는 모바일 디바이스와 데스크톱 PC를 모두 지원하기 위해서 각 경우에 맞는 CSS 스타일을 포함시켜 사용합니다.

<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:799px)">

 

 

o모바일 스타일링의 공통 스타일 시트 별도 제작

동일한 스타일이 모바일과 데스크톱 PC에 중복해서 사용되는 경우에는 공통분모만 모아서 별도의 파일로 분리합니다.

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

 

 

o모바일 스타일링의 상속 기능 활용

상속기능을 이용하여 상위 엘리먼트의 스타일을 그대로 처리할 수 있어 편리합니다.

<style type="text/css"> a:link, a:visited { /* 상위 엘리먼트의 색상 상속받음 */ color: inherit;   }