코드공부방

CSS 로딩UI 만들기 #3. 좌우 이동을 반복하는 막대기(bar) 요즘 계속 로딩 UI만 만들고 있다. 재밌어서 그런건 아니고 뭔가 계속 포스팅을 하려다보니 콘텐츠를 짜내는 중(?) 인가보다. 앞서 만든 회전하는 원, 시간차를 두고 스케일 조절을 반복하는 원에 이어 세번째 로딩 UI 제작이다. CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) 앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다. CSS 로딩UI 만들기 #1. 회전하는 원(Circle) CSS 로딩UI 만들기 #1. 회전하.. code-study.tistory.com CSS 로딩UI 만들기 #1. 회전하는 원..

CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) 앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다. CSS 로딩UI 만들기 #1. 회전하는 원(Circle) CSS 로딩UI 만들기 #1. 회전하는 원(Circle) 웹사이트에 자주 사용되는 로딩 UI 중, 무한으로 회전하는 원(Circle)을 사용하는 경우가 있다. 이때 돌아가는 원을 GIF이미지로 만들어 사용하는 경우도 있는데 그 경.. code-study.tistory.com 이번에는 세개의 원을 나열해두고 각각 시간차를 두고 일정은 크기로 커졌다 작아졌다 하는 로딩 UI를 만들어보려고 한다. 이미지를 보지 않으면 설명이 어려우니 우선 결과물부터 보자. 먼저 화면 중앙에 레이어를 하나 띄어 그 박스 안..

페이지 프린트(print)할때 background 안나오는 현상 해결 오프라인에서 사용할 문서를 온라인에서 출력할 수 있는 페이지(팝업창)를 작업해달라는 요청이 와서 작업을 진행했다. 진행할 업무 얘기를 들었을때부터 "아 뭔가 프린트할때 이슈가 생기겠구나" 예상은 하고 우선 보내준 엑셀 파일을 참고하여 UI 작업을 진행했다. 별도 디자인이 없는 상황에서 참고용으로 준 엑셀문서보다는 보기좋게 결과물이 나와야 했기 때문에 여기저기 테이블 스타일을 참고하여 웹페이지 작업은 마무리됐다. 그리고 별 기대없이 해당페이지를 출력해봤다. 결과는? 역시 보란듯이 background-color가 표시되지 않았다. 예상했기에 덤덤하게 관련 키워드로 검색해보니 @media print 안에 -webkit-print-color-..

CSS로 한줄, 여러줄 글 길어지면 말줄임("...") 표시하기 웹사이트 제작시 필수로 사용되는 말줄임표시, 보통 한줄 말줄임표시만 CSS에서 처리하고 그 외 여러줄 말줄임 표시는 개발자에게 맡기거나 하는편이다. 이 포스팅에서 CSS가지고 한줄, 여러줄 말줄임표시(CSS3)를 구현하는 방법과 CSS3속성이 지원되지 않는 하위 브라우저에서는 어떻게 대응해야하는지 알아보려고 한다. 먼저 아래와 같이 HTML과 CSS 코드를 작성한다. 쉽게 볼 수 있는 최신 글 목록 UI이다. 뉴스목록 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea..

유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기 (YouTube videos in responsive size) 웹페이지 또는 개인 블로그 내에 Youtube영상을 삽입해야하는 경우가 있다. Youtube에서는 자체적으로 동영상을 공유하는 기능을 제공하고 있다. 유튜브에서 제공하는 코드를 내 페이지에 붙여넣으면 iframe을 통해 내 페이지에서 유튜브 영상을 바로 볼 수 있다. 코드에 대해 잘 모르는 사람들에게는 정말 편리한 서비스를 제공한다고 볼 수 있다. 하지만 한가지 아쉬운점이 있다. 바로 iframe으로 태그 자체로 공유기능을 제공하다보니 최적화된 사이즈로 제공이 어렵고 특히 반응형웹에는 취약할 수 밖에 없다. 위 이미지를 보면 우선 작은 사이즈로 갈 경우에 높이가 고정이다보..

CSS 로딩UI 만들기 #1. 회전하는 원(Circle) 웹사이트에 자주 사용되는 로딩 UI 중, 무한으로 회전하는 원(Circle)을 사용하는 경우가 있다. 이때 돌아가는 원을 GIF이미지로 만들어 사용하는 경우도 있는데 그 경우에 background 처리가 깔끔하게 되지 않는다. 이때는 웹에서 background가 투명처리된 png이미지를 다운받거나 디자이너로부터 이미지를 받아 CSS로 돌리는 방법도 있지만 따로 디자이너의 손을 빌리지 않고 직접 만들어 쓸 수 있도록 CSS로 몇가지 로딩UI를 만들어보려고 한다. 첫번째는 아주 심플한 원을 무한으로 회전시키는 UI이다. (물론 디자이너 손을 거쳐나온 이미지가 더 이쁘겠지만..) 위와 같이 레이어를 띄워 dim 처리된 배경 가운데에 로딩하는 원을 돌려볼..

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..