CODE CAVE

CSS가 발전함에 따라 이제 포토샵으로 해야만 했던 작업들이 코딩으로 가능해지고 있습니다. 이번 포스팅은 그 중 이미지 혼합 기능인 blend-mode 에 대한 실험입니다. 색상과 이미지를 혼합하는 기능을 어디서 쓸까 생각하다가 운영중인 쇼핑몰에서 색상과 재질을 선택해서 미리 볼 수 있는 Custom Option 기능을 만드는데 활용했습니다. [재질과 색상의 혼합] - http://www.trymoon.kr - NO BRAND BUT GOOD SENSE 위 화면은 신발 쇼핑몰에서 혼합 모드를 응용하여 개발한 것입니다.정의해놓은 재질을 선택하고, 색상을 선택하면 재질 이미지와 색상을 혼합하여 결과를 아래 보여주는 방식입니다. 위 화면을 개발하기전, 제가 블랜드 모드 관련 샘플로 만들어놓은 화면입니다. 위 ..

트렌디적인 리스트 디자인 혹은 UI를 꼽자면 핀터레스트를 뺄 수 없습니다.한국 서비스로는 피키캐스트가 유명하죠! 아마 리스트에서 각각의 목록이 이미지가 중요한 리스트라면 단순한 2,3단 배열보다 훨씬 볼만합니다. 백번의 말보다 한번의 예제! 샘플 만들어봤어요.아래 이미지 처럼 리스트 카드가 겹쳐서(?) 나오는 형식의 디자인 입니다. 이런 리스트는 자바스크립트로도 개발할 수 있고 CSS로도 개발할 수 있는데요. 저는 CSS로 할 수 있는 거면 CSS단에서 끝내자는 주의라서 CSS로 구현해보았습니다! 소스코드는 제 깃허브에 올렸습니다. github : https://github.com/kkotkkio/pinterest-list 원본 출처 : https://opentutorials.org/course/2473..

이젠 모바일 웹앱은 필수가 되면서 반응형은 필요요소가 되었습니다. 적응형으로 모바일 디자인을 따로 만든다고해도, 모바일 디스플레이가 워낙 크기가 다양해서 어쨌든 준(?) 반응형으로 만들어야 합니다. 적응형은 미디어쿼리를 쓰지 않을 뿐이지 각종 디스플레이 크기에 반응해야하기 때문에 고정값으로 가로세로 크기를 지정하면 안되니까요~ 적응형이라고 꼭 미디어쿼리를 쓰지 않는다는 것은 또 아니고, 결국 적응형도 반응형이나 다름 없다는 것이죠. 반응형은 반응하는 기기의 범위가 데스크탑 까지 가있는 것입니다. 뭔가 시작부터 되게 헷갈리게 만드는 말들을 주저리 주저리 했네요.. 아무튼 그래서 이번 포스팅에서는 반응형으로 동영상쪽 퍼블리싱+JavaScript 하실 때 참고하시라고 제가 작업했던 내용을 공유드리려고 합니다...

말풍선 스타일도 참 여기저기 많이 쓰이죠~ 저도 일반적으로 포토샵을 활용하여 이미지로 만들어서 썼었는데 이게 단점이 텍스트 양에 따라서 이미지 사이즈가 조정되어 좀 귀찮은 작업들을 해야한다는 단점과 위에서 색상이라도 바꾸자고 하면 포토샵에서 또 새로 색 입히고 다시 자르고 이미지 폴더에 덮어쓰기하고.... 별로 디자인 할 필요도 없는 간단한 말풍선이라면 더더욱 짜잘한 수정사항이 짜증나질 수 있죠.. 아무튼 여러모로 매우 귀찮습니다! 이런 말풍선 정도는 CSS로 만들 수 없을까?? 생각하다가 찾아봤는데 말풍선, CSS로 만들 수 있습니다!! 네! 찾았습니다! 그것도 바로 실무에서 복붙할 수 있도록 말풍선 CSS를 만들어주는 사이트가 있어서 소개해드립니다. 전 이 사이트의 스타일 고대로 가져와서 몇가지만 수..

CSS 에는 opacity 라는 멋진 속성이 있죠, 하지만 이 속성의 단점은 해당 요소의 자식 요소 까지 모두 투명해진다는 단점이 있습니다. 배경만 투명하게 하고 싶으실 시에는 rgba를 이용하시면 됩니다. 사용법은 아래와 같습니다. background-color: rgba(255,255,255,0.5); 위 명령은 하얀색에 투명도를 50%로 준 것입니다. 그럼 즐 코딩하세요!

보통 가운데 정렬 할때 margin:0 auto; 많으들 쓰시죠. 하지만 이건 가로크기를 고정으로 해야한다는 단점이 있습니다. 유동적으로 하고 싶을 때의 방법은 text-align: center;와 display: inline-block; 을 이용하는 것입니다. 텍스트가 아닌데 text-align 하면 먹히는건 경험 해보셨나요?? 이 태그가 text-align 속성이 먹히는 이유는 이게 inline-block 속성을 가진 태그 이기 때문입니다. 즉 text-align 은 텍스트와 inline-block 속성을 가진 태그들을 정렬 해줍니다. ul을감싸는wrap { text-align: center }ul { display: inline-block; } 끝~ 즐코딩하세요~~ 도움이 되셨다면 아래 공감 버튼을..

태그를 쓰면 입력한 그대로 보이기 때문에 한줄로 쭉~~~ 적은 글의 경우 가로스크롤이 생기기 마련입니다. 그렇다고 오버플로우 쓰자니 가려지기만하고, 제대로 해결 되지 않습니다. 하지만 이 속성 하나면 됩니다. pre { white-space: pre-wrap; } 그럼 모두 즐코딩 되세요!!

* { margin: 0 auto; padding: 0; } a { text-decoration: none; } CSS 초기화 코드로 검색하면 이것저것 많이 나오는데요~ 제가 생각했을 땐 위의 코드면 충분하다고 생각해요~ 오히려 많은 초기화 코드를 작성할시 좀 규모 있는 퍼블리싱 할 때 방해가 되는 경우도 있습니다. 부트스트랩이나 뭐 다른 라이브러리 쓰실 때 자신은 padding 같은것을 준적도 없는데 막 패딩이 있고, 제가 설정한 스타일이 적용이 안되고, 디버깅 해보면 부트스트랩의 초기화 코드에 덮힌다던지 (물론 이 경우는 CSS 호출 순서나 !implement; 로 해결이 가능하긴 합니다.) 등의 문제.. 제 생각엔 그냥 필요성이 느껴질 때 떠오른 것을 하나씩 추가하는게 제일 이상적 인것 같아요. 그..