코드공부방

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도 사용 가능하다. 생성(?)된 이미지를 다운로드 ..

웹퍼블리싱만을 할 줄 아는 것(html, css를 사용하여 레이아웃을 만들고 jQuery로 동적UI 구현)으로는 더이상 큰 경쟁력이 없다. 아마도 2018년부터 웹퍼블리셔 구인시장을 봤다면 누구나 공감할 것이다. 신입 웹퍼블리셔는 국비지원 교육의 활약으로 미친듯이 시장으로 쏟아져나오고 있는데 반해 웹퍼블리셔가 서있을 곳은 점점 좁아지고 있다. 기업 입장에서 정규직으로 웹퍼블리셔를 내부에 두고 있는 것이 부담스러운 것이 사실이다. 쉽게 비유하자면 있으면 좋고 없으면 아쉬운 포지션이 아닐까? - 그럼 웹퍼블리셔 입장에서 어떻게 처신해야할까? 1. 엄청 잘하면 된다. 어떤 분야든 상위 클래스는 먹고사는 것에 지장이 없다고 한다. 하지만 셀 수도 없는 수 많은 퍼블리셔들 가운데에서 상위클래스가 되는 것이 그리 ..

시작이 반이다. 늦었다고 생각할때가 제일 빠를 때이다. ... 뜬금없이 속담과 명언을 쏟아낸다. 나는 2011년 초 웹디자이너로 일을 시작하였고, 회사의 필요에 의해 html, css, js 코드를 조금씩 보다가 그것에 재미를 느끼고 본격적으로 공부하여 2012년 회사의 배려로 웹퍼블리셔로 전향할 수 있었다. 처음엔 디자인과 퍼블리싱을 겸하다가, 2012년 6월쯔음 이사님과 면담 후 디자인을 안하기 시작했으니 웹퍼블리셔로서의 경력은 7년 1개월이네. 내 기억으로 4~5년차까지는 업무관련 세미나나 교육도 많이 들으러 다니고 정기 스터디모임도 잘 찾아다니고 그랬던 것 같다. 근데 큰 성과가 없다고 생각해버린 것일까? 이런 외부활동에 발길을 서서히 끊어버렸다. 그동안의 경험이 있으니 더이상 자기개발을 하지 않..