코드공부방

CSS 구글 스타일가이드 자세히보기 #3 CSS 메타 규칙 3. CSS 메타(meta) 규칙 3.1 섹션 주석 섹션 주석을 작성하여 섹션을 그룹화 한다. 섹션 간 주석과 줄 바꿈으로 구분한다. /* Header */ #adw-header {...} /* Footer */ #adw-footer {...} /* Gallery */ .adw-gallery {...} 마치며 일관성을 유지한다. 기존 코드를 수정하는 경우 적어도 몇 분 동안 주변의 코드를 보고 작성 스타일을 결정한다. 추가한 코드가 주위 기존 코드와 다르게 보이지 않게 작성한다. 스타일가이드를 사용하는 요점은 공통된 코딩 어휘를 갖는 것이다. GOOGLE의 CSS 스타일 가이드를 자세히 살펴보고, 정리해봤는데 크게 특이하거나 놀라운점은 없었다. ..

CSS 구글 스타일가이드 자세히보기 #2 2. CSS 작성 규칙 2.1 선언(속성) 순서 알파벳 순서대로 속성을 선언한다. vendor-prefix 선언은 알파벳 선언순서를 무시한다. 단, 접두어가 붙지 않는 속성을 가장 마지막에 선언한다. .sample { background-color:#000; border:1px solid #eee; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; color:#222; text-align:center; } CSS 속성순서를 알파벳순으로 한다니 놀라웠다. 네이버 코딩컨벤션의 경우 Style의 쓰임새나 중요도에 따른 선언순서를 가져가기에 나도 그것을 따라가고 있었다. (display > ove..

CSS 구글 스타일가이드 자세히보기 #1 1. CSS 스타일 규칙 1.1 CSS 유효성 W3C CSS 유효성 검사기 툴을 활용 하여 유효한 CSS를 사용한다. (https://jigsaw.w3.org/css-validator/) 1.2 CSS 네이밍 의미있거나 일반적인 네이밍을 사용한다. 요소의 목적을 반영하는 명칭 사용을 지향한다. 기능이나 일반적 네이밍을 사용하면 유지보수에 유리하다. /* 비추천 : 의미없는 네이밍 */ #yee-1901 {...} /* 비추천 : 표현만을 위한 네이밍 */ .button-green {...} .clear {...} 표현만을 위한 Class 네이밍은 나도 자주 쓰고 있는데, 만약 button-green이란 클래스가 녹색배경의 버튼을 나타내고 있는 클래스 였으나 갑자기..

CSS 구글 스타일가이드 자세히보기 #intro 보통 프로젝트에 투입되면 프로젝트 시작과 동시에 스타일가이드를 정한다. 이는 협업하는 작업자간의 원활한 프로젝트 진행을 위한 약속이라고 볼 수 있다. 예를들어 다수의 작업자가 규칙을 정하지 않고 각자 본인의 작업스타일로 작업을 진행하면 그 프로젝트의 css파일은 아래와 같은 결과물이 나올 것이다. .main_section {padding: 60px 0 100px 0} .main_section + .main_section {border-top: 1px solid #e0e0e0} .main_section .square_list li:hover .btn_area {opacity: 1; bottom: 38px} .main_section .square_list li..

변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style 프로그래밍을 할때 고민을 많이 하게 되는 것중 하나가 네이밍이 아닐까 싶다. 변수, 함수, 클래스, 아이디.. 네이밍 해야할 것도 많다. 해당 기능에 맞게, 내용에 딱 맞는 아름다운(?) 이름을 지어주기 위하여 오늘도 열심히 구글 번역기를 돌리고 있다. (프로그래밍 작명소는 없나..) 이름을 뭐라고 짓냐는 것도 고민인데 그 이름을 짓는 방식도 한가지가 아니다. 이것은 사실 스타일이기 때문에 각 프로젝트에서 협의된 대로 따르는 게 좋지만 어떤 종류가 있는지 알고 있으면 좋으니 정리해보았다. 1. 카멜 표기법 (Lower Camel Case : LCC) 첫단어는 소문자로 표기하며 이후..

레이어팝업을 띄우면 뒤쪽 콘텐츠의 스크롤을 막아달라는 요청이 간혹 있다. (그냥 스크롤이 가능하게 되길 희망하는 클라이언트도 있다.) /* CSS */ .hidden {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;} //Javascript function scrollDisable(){ $('html, body').addClass('hidden'); } function scrollAble(){ $('html, body').removeClass('hidden'); } 레이어팝업을 띄우는 함수안에 위와 같은 함수를 만들어 넣어주면 된다. 위 함수는 html과 body태그에 "height:100%; overflow:hid..

작업을 하다보면 리사이즈 됨에도 박스비율을 유지해야 하는 경우가 있다. (특히 반응형 작업에서) 박스의 width값은 100%로 지정하면 되지만 height값을 어떻게 해야 박스의 비율을 유지할 수 있을까? max-width가 500px인 레이아웃안에 1.618:1 비율의 박스가 들어가야 한다고 가정해보자. 그리고 이 박스는 브라우저 사이즈가 작아져도 같은 비율을 유지해야 한다. 최초 박스 비율 세팅은 max-width 500px에 맞게 309px로 css에서 height값을 지정을 하여 1.618:1의 비율로 지정했지만 브라우저 resize시 width값은 계속 줄어들지만 height값은 309px로 고정값이기 때문에 그 비율은 유지할 수 없게된다. BOX 1 : 1.618 .boxs {max-widt..

웹사이트 작업을 하다보면 임시 이미지를 삽입해야하는 경우가 많이 생긴다. 간혹 디자이너가 만들어주기도 하지만 그렇지 않은 경우도 많다. 그럴땐 구글 검색 해서 적당한 이미지 URL을 따와서 사용했었는데, 더 좋고 깔끔한 방법이 있다. 바로 placeholder.com URL에서 나타내듯 placeholder image 서비스이다. 사용법도 매우 간단하다. 위와 같이 작성하면 300px * 300px 사이즈의 이미지가 아래와 같이 바로 로드된다. 임시 이미지에 해당 이미지의 사이즈까지 친절하게 쓰여져 있어 더욱 편하다. 정사각형이 아닌 경우는 200x400과 같이 가로x세로를 써주기만 하면 된다. 이미지 확장자는 gif뿐만 아니라 jpg, jpeg, png도 사용 가능하다. 생성(?)된 이미지를 다운로드 ..