Ideveloper's software blog

css:스켈레톤 UI css 만으로 구성하기 | Why ? 특정 페이지를 개발할때, 로딩 스켈레톤을 구현해야 하는 상황이 있었습니다. 이 ui를 구현하기 위해 여러 라이브러리를 사용할 순 있겠지만, 이런 라이브러리들로 인해 프로젝트의 크기가 늘어나고, 불필요한 리소스 낭비가 될 수 있다는 생각도 들었습니다. 따라서, css만으로도 충분히 스켈레톤 ui를 구성 할수 있다 생각되어 css로 스켈레톤 ui, 그리고 그에대한 애니메이션을 구현해 보았었습니다. 아래는 구현한 여러 스켈레톤 ui중 특정 페이지의 모바일 리스트 뷰에 해당하는 디자인 시안에 맞춰 본인이 구성한 UI입니다. UI를 구성하는 방식은 background-image 와 background-size css 속성을 활용해 임의의 스켈레톤 ui를 ..

CSS: 쉽게 가운데로 수직 정렬하기 | 시작하기에 앞서 종종, 요소들을 가운데로 수직정렬해야 할때가 있다. 그때 사용할수 있는 css tip이 있다. | 정렬하는법 가운데 수직 정렬을 하려면 아래와 같이해주면 깔끔하게 요소들이 수직 정렬된다. display: inline-block; vertical-align: middle; height: 100%; https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div위의 링크를 참고해보면, 위와 같이 수직정렬하는것이 크로스 브라우징 이슈도 해결하고 best practice라고 나와있다.자주 애용해도 좋을 것 같다!> 예제http://jsfiddle.net/kiz..

css :선택자(selector) | 부모 자식 선택자 1. 모든 자식에게 적용 ( ul 밑의 모든 li 에게 css 적용)ul li{ }2. 직계 자손에만 적용 ( id가 example인것 바로 아래 li에만 적용)#example > li{ } 3. 모두에게 적용 (ul태그와 ol 모두에 적용)ul,ol { }[예제] 1, 2, 3 사용된 예제 코드 // ul 밑의 모든 li 에 적용 ul li{ color:red; } // #lecture밑의 직계자손 li에만 적용 #lecture>li{ border:1px solid red; //color: blue; 더 많은 pseduo class selector참고링크: https://developer.mozilla.org/ko/docs/Web/CSS/Pseud..

css:transition 관련 참고하면 좋을 링크 애니메이션 효과는 부드러운 UX를 제공하는 것이 매우 좋다. 애니메이션이 버벅거리는 효과는 오히려 답답하고 느린 웹사이트로 인식될 수 있다.CSS Transition을 활용하면, 그문제가 대부분 해결된다. CSS Transitions and Transforms for Beginners https://robots.thoughtbot.com/transitions-and-transforms

CSS: 레일스 프로젝트에서 scss 파일적용으로 클래스명명, 반복된 코드줄이기 >css파일을 적용하다보면, 명명규칙이나, 다른 뷰파일에 같은 css가 적용되는등의 문제점들이 많이 발생하게된다. 이를 해결하기 위한것이, scss이고 레일스는 scss를 프로젝트를 만들면 뷰파일에관한 스타일링을 scss로 기본으로 제공하기 때문에 레일스 프로젝트에서 scss파일 적용하기를 활용해보자. 이승규 컴퓨터공학과 15 "쌰럽. 펔유" -home/index.html.erb .var-highlight{ color: #C0AD60; font-family: 'courier new'; ​ } .string-highlight{ color: rgba(253, 149, 90, 0.8); font-family: courier; } ..

CSS: Sass란 ? >Sass란? CSS를 효율적으로 작성할 수 있도록 도와주는 프로그램이다.기존의 CSS의 유지보수의 불편함 등을 SASS를 사용하면 해결 할 수 있다. 위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 즉, SASS문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환합니다. >Sass의 장점 1.코드중복을 줄일수 있다. SASS 사용 전 코드 (코드가 복잡할수록 더 유지보수가 어려워 집니다.) #navbar { width: 80%; height: 23px; }#navbar ul { list-style-typ..