세줄코딩

1. CSS note: CSS 코드의 작성 및 규칙사항 CSS 파일을 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거한다. ( 유지 보수 및 수정 사항 전달 등에 있어서 주석 처리 예외 ) CSS 파일을 압축하면 클라이언트에게 더 적은 데이터를 전송하게 되며, 콘텐츠가 더 빨리 로드. CSS 파일을 압축하는 것은 중요한 이유는 대역폭과 리소스 사용을 줄이고자 하는 모든 부분에 있어서 도움이 된다. preload preload 를 통해 브라우저가 페이지의 콘텐츠를 보여지기 전에 CSS 파일을 로드할 수 있다. rel 속성의 값을 preload 로 주고, as="style" 를 태그에 넣는다. 참고 URL : 리소스 우선순위 지정 1-1. Syntax Lint 의 사용을 권장! css class 이름은..

1. HTML 1-1. Syntax 들여쓰기는 2개의 공백 문자(소프트탭)을 사용. 다른 규칙으로 통일하여 작성해도 된다. 모든 엘리먼트 명과 애트리뷰트 명은 케밥 표기법(kebab-case)으로 작성. 모든 애트리뷰트 값은 큰 따옴표(")로 감싸기. 주석 처럼 기본 표기 하고 note : 수정사항 등을 기재하기 위한 주석 ( 주석에 년도날짜 / 수정내용 표기는 반드시 해야 한다 ) ......중략....... 혹은 ......중략....... 1-2. Doctype Doctype은 HTML5 DTD 로 선언. html5 로 지정 이어서 자기 마침 태그(Self-Closing Tags)에 후행 슬래시(/)를 사용금지. 1-3. Metadata 태그 내에 로드 순서 지키기( CSS 태그를 자바스크립트 태그..

/*10번이후 모든 리스트*/ :nth-child(n+10){ ..... } /*1~3번 리스트*/ :nth-child(-n+3){ ..... }

반응형 웹 디자인시 고려사항 포토샵으로 작업시( 배율이 자동변환 안되기에 디바이스 사이즈의 2배로 작업 ) -모바일에서는 가로 720작업( 구형폰까지 지원시 640 작업 ).- 대체적으로 태블릿은 모바일과 같은 레이아웃으로 작업되나 필요시 가로 768 로 작업.- 데스크탑 가로 1024 or 1280 아래와 같이 레티나 디스플레이 개념으로 인해 디바이스에서 보여주는 해상도와 실제 사이즈와 보여지는 차이가 생긴다.따라서 포토샵에서는 2배정도 되는 사이즈로 디자인이 되어야 한다. 스케치+제플린 콤보 작업시( 스케치에서 배율별 export가 가능하기에 정사이즈 작업. ) - 모바일에서는 가로사이즈 - 360 or 375 작업. ( 구형폰까지 지원시 320 )- 대체적으로 태블릿은 모바일과 같은 레이아웃으로 작..

device width : 414pxdevice height : 846px 해상도 1440 * 2960 CSS media query@media only screen and (min-width: 414px) { /* Your Styles... */ } - mobile only@media only screen and (min-width: 414px) and (max-width: 767px) { /* Your Styles... */ } - Retina styles@media only screen and (-webkit-min-device-pixel-ratio: 3.5), only screen and ( min--moz-device-pixel-ratio: 3.5), only screen and ( -o-min-..

Viewport 정리 width : viewport의 width를 조정. 숫자값이 들어갈 수도 있고, device-width 와 같은 특정한 값을 사용할 수 있음. device-width - 100% 스케일에서 CSS pixel로 계산된 화면 width. height : viewport의 height( 세로 )를 조정. initial-scale : 페이지가 처음 로딩 될 때 줌 레벨 조정. 값이 1일때는 CSS pixel과 기기 pixel 간의 1:1 로 조절. minimum-scale : viewport의 최소 배율값, 기본값은 0.25. maximum-scale : viewport의 최대 배율값, 기본값은 1.6. user-scalable : 사용자의 확대/축소 기능을 설정, 기본값 yes.

하위 엘리먼트가 있는지 없는 체크할 경우가 있다. 물론 js 로 체크하는게 보통이지만.... 예를 들어 마크업과 JS수정없이 아코디언 메뉴에 이미지를 추가한다고 치자. 아코디언메뉴에서 열리고 닫히는 모습을 알기 쉽게 맨 우측에 화살표를 넣어야 하는데 하위메뉴가 없을 때는 화살표가 나오지 말아야한다. 이럴때 정말이지 난감하다. JS코드를 안건드리고 어케!!!!!!!!!!! 특히나 JS를 만질 권한이 없다라던지 JS에서 변경하면 큰일이 난다라는..... 게다가 개발팀과 분리되어 웹퍼블리싱만 한다면 더욱이 힘들 것이다. 그럼 기존 마크업과 JS수정없이 CSS 만으로 체크할 수 있을까 ? 바로 :only-child 라는 선택자를 사용할 수 있다. :only-child 선택자 - 부모 엘리먼트내에서 자신이 유일한..

HTML CSS .switcher {position:relative;width:192px;height:42px;border-radius:25px;} .switcher input { -webkit-appearance: none; appearance: none; position: relative; width: 192px; height: 42px; border-radius: 25px; background-color: #0ab1a9; border:1px solid #fff; } .switcher input:before, .switcher input:after { z-index: 2; position: absolute; top: 50%; color: #fff; -webkit-transform: translateY..