VINYL C

- 모듈별, 컨텐츠별로 그룹핑합니다.

- 그룹핑된 CSS 영역위에는 어떤 내용인지 알 수 있게 주석을 기입합니다.

- 상속되는 Class/ID가 있더라도 첫줄에 맞추어 정렬합니다.

- Hack 사용 시 줄바꿈하여 기입해야 하는 경우에만 ‘Tab’ 키로 한번 들여쓰기 합니다.

- 줄바꿈하여 기입되는 Hack 사용 시 Hack 실제 내용은 줄바꿈하고 ‘Tab’ 키로 한번 들여쓰기 합니다.

.t_input input{width:120px;}
@-moz-document url-prefix() {
	.t_input input{width:117px;}
} //Hack

- 속성값뒤에는 세미콜론(;)을 추가합니다.

- 속성과 값사이, 선택자와 중괄호 사이, 중괄호와 속성값사이 모두 띄어쓰기(‘Space’ 키, ‘Tab’ 키) 없이 붙여씁니다.

- 단, 속성과 속성 사이는 한칸 띄어쓰기 합니다.

- 선택자와 선택자 사이는 ‘Space’ 키로 한칸 띄어쓰기 합니다.

/* font */
.f_ari{font-family:Arial;}
.fc_org{color:#dc320a; font-family:Arial;}
.f_ari, .fc_org{letter-spacing:0;}

/* form */
.t_input input{width:121px; height:25px; height:23px \0/IE8; padding:3px 0 0 9px; padding-bottom:2px \0/IE8; border:1px solid #a5a5a5;}
@-moz-document url-prefix() {
	.t_input input{width:117px;}
} //Hack
.textarea{vertical-align:middle;}
.textarea textarea{display:block; padding:7px 11px; border:1px solid #b8b8b8;}
			

- 각의 속성값에서 벤더픽스 추가 시 벤더 픽스 속성값을 먼저 기입합니다. (-webkit- → -moz- → -ms- → -o- 순으로)

- 속성 나열은 전역속성에서 지역속성 순으로 나열합니다.

content // display // position // top // right // bottom // left // z-index // visibility // flex-direction // flex-order // flex-pack // float // clear // flex-align // overflow // clip // box-sizing // table-layout // width // height // min-width // min-height // max-width // max-height // margin // padding // outline // border // border-radius // background // box-shadow // color // font // line-height // list-style // vertical-align // text-align // text-indent // text-justify // opacity // -ms-filter:'progid:DXImageTransform.Microsoft.Alpha // filter:progid:DXImageTransform.Microsoft.Alpha(Opacity // etc…
* 붉은색 표기는 최소한으로 준수해야하는 속성들.

- 그룹핑된 CSS 영역 첫줄 위에 기입합니다.

- 닫기 주석은 프로젝트 상황에 따라 작업자 판단 하에 추가 가능하다. 그룹핑된 CSS 영역 마지막 줄 아래에 기입합니다.예) /* //Tab */

- 주석내용은 한글이든 영문이든 무방하나 영문을 권장합니다.

- 주석내용은 가능한 직관적이고 의미론적인 단어를 선택합니다.

- 주석 안쪽 코멘트에는 설명하는 문장 외에 다른 기호는 넣지 않는 것을 기본으로 합니다.

- 주석의 기호와 코멘트 사이에는 빈 공간(1 ‘space’ 키)을 둡니다.

- CSS 수정 작업 시 ‘수정 주석’을 추가 하지 않는 것을 기본으로 합니다.

- 프로젝트 성격에 따라 작업자 판단에 의해 ‘수정 주석’ 추가 가능합니다.

- 수정된 날짜를 기입하고 수정된 내용을 직관적으로 간결하게 기입합니다.

- 수정한 작업자가 누구인지 구별한 수 있게 이니셜 또는 ID 를 마지막에 추가합니다.

- 한 라인만 수정 시에는 맨 뒤에 수정 주석을 기입합니다.

- 여러 라인이 수정 시에는 수정을 시작한 첫 라인 위와 마지막 라인 아래에 ‘수정 주석’과 ‘닫기 수정 주석’을 기입합니다.

- 사용단위는 ‘px’을 기본으로 합니다.

- ‘px’, ‘em’, ‘%’를 혼용해서 절대 사용하지 않습니다.

- font의 경우는 ‘px’로 작업합니다.

- 0px은 0으로 표기합니다.

- 행간(line-height)는 초기값으로 100% 세팅 가능하다. 그 외에는 ‘px’ 로 작업합니다.

- ‘em’, ’%’ 는 모바일 프로젝트에서 사용이 가능합니다.

- all (모든 출력 장치 : 모든 표현 미디어에서 사용됩니다.)

- aural (음성 출력 : 음성 합성기나 스크린 리더, 문서를 음성으로 표현해주는 기타 장치에서 사용합니다.)

- braille (점자 출력 : 점자 장치로 문서를 표헌(렌더링)할 때 사용합니다.)

- embossed (점자 출력 : 점자 출력 장치로 인쇄할 때 사용합니다.)

- handheld (포켓, 모바일 : PDA나 웹 접속이 가능한 핸드폰 같은 휴대용 장치에 사용합니다.)

- print (인쇄 : 시각이 있는 사용자를 위한 문서를 인쇄할 때 사용합니다.)

- projection (투사 장치 : 연설을 하면서 슬라이드쇼를 보여줄 때 사용하는 디지탈 프로젝트 같은 프로젝션 매체에서 사용합니다.)

- screen (스크린, 모니터 : 기기의 해상도에 따라 다르게 표현할 때 사용합니다.)

- tty (전신 타자기, Tele Type Writer : 문서를 피치가 고정된 환경으로 전송할 때 사용합니다.)

- tv (텔레비전, Television : 텔레비전을 통해 문서를 표현할 때 사용합니다.)

- 사용방법은 CSS 코드 내에 @media print 로 사용하거나 print.css 파일을 생성하는 방법이 있습니다.

/* print */
@media print{
	#gnb .snb{display:none;}
}

- 기기의 해상도에 따라 다르게 표현할 때 사용한다. 모바일프로젝트에서 사용합니다.

- CSS 내에 @media 태그를 통해서 사용하며 이 방법을 기준으로 합니다.

- 해상도별로 따로 CSS 파일을 생성하는 방법

- Html 문서내에 <style> 태그에 media 속성으로 사용하는 방법

- 가로와 세로 너비 : width, min-width, max-width, height, min-height, max-height

- 뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다릅니다.

- 반응형 웹 구현시 가장 일반적으로 사용합니다.

- 단말기의 가로와 세로 너비 : device-width, min-device-width, max-device-width, device-height, min-device-height, max-device-height

• - 스크린의 너비와 높이.

• - 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트 보다 큽니다.

  예)
  @media all and (device-width:320px) and (device-height:480px) {실행문}
  → 스크린 너비가 320px "그리고" 높이가 480px 이면 실행
  @media all and (min-device-width:320px) and (min-device-height:480px) {실행문}
  → 스크린 너비가 최소 320px 이상 "그리고" 높이가 최소

- 화면 회전 : orientation

• - 뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단합니다.

- 화면 비율 : aspect-ratio, min-aspect-ratio, max-aspect-ratio

• - 뷰포트의 너비와 높이에 대한 비율. 너비/높이 순으로 조건을 작성합니다.

• - min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있습니다.

- 단말기 화면 비율 : device-aspect-ratio

• - 스크린의 너비와 높이에 대한 비율. 너비/높이 순으로 조건을 작성합니다.

• - min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있습니다.

- 한글 글꼴 지정 시 글꼴 한글이름과 영문이름 모두 지정합니다. 순서는 한글 →영문이름 순으로

- 글꼴 지정시 맨 마지막에 Generic family 꼭 추가합니다.
Generic family에는 serif(삐침이 있는 명조계), sans-serif(삐침이 없는 고딕계 폰트), monospace(고정폭을 가진 폰트), fantasy(꾸밈계 폰트), cursive(필기체 폰트)로 다섯 종류가 있습니다.

- 글꼴 지정 시 글꼴 이름 사이에 공백이 있는 경우는 작은 따음표로 감싸줍니다.

- 영어와 한글이 서로 다른 글꼴을 사용할 경우 영어 글꼴을 앞에 배치합니다.

- 웹폰트는 font-face rule을 이용하여, OS에서 기본으로 제공하던 폰트 외에 다른 폰트를 웹상에서 활용하는 방법

- @font-face를 이용하는 것은 .TTF(True Type Font), .EOT(Embedded Open Type) 확장자의 글꼴을 이용해야 하기 때문에 글꼴의 라이선스, 정보 여부를 정확히 알아야 합니다.

- 사용방법

@font-face {
	font-family:'YoonGothic';
	src: url('/font/personal/YoonGothic770.eot');
	src:local(※), url('/font/personal/YoonGothic770.woff') format('woff');
}

- 한글전용서체의 경우 무거운 용량으로 성능의 이슈가 있으므로 경량화를 합니다.

- 무료 오픈 라이센스인 폰트포지를 사용합니다.(리눅스,윈도우, MacOS등 여러 운영체제에서 사용 가능)

- 다운로드: https://fontforge.github.io/en-US/

- 사용방법

- 각 모듈별 안의 z-index의 설정값 사이 간격을 5로 합니다.

- 가상클래스 after를 사용하여 해제를 기본으로 합니다.

- 가상클래스 after 사용이 불가한 경우에는 아래 해제 전용 클래스를 사용합니다.

.clfix:after{content:''; display:block; visibility:hidden; clear:both; overflow:hidden; width:0; height:0;}
* html .clfix{height:1%;} /* Hides from IE-mac */
.clfix{zoom:1;} /*for IE 5.5-7*/