반응형 웹 반응형 웹은 PC, 태블릿, 모바일(가로, 세로) 등을 모두 지원할 수 있게끔 설정 해주는 템플릿을 의믜한다. 일반적으로는 CSS의 미디어쿼리를 이용하여 분기처리를 하지만 적응형 웹으로도 사용할 수가 있다. 기기 장치에 따라 CSS 템플릿을 다르게 적재해서 사용하는 것을 의미 몇 년 전만 해도 모바일의 가로 크기는 보통 480px 이하로 작성했는데 노트 플러스, 아이폰 플러스 등의 비교적 큰 화면의 스마트폰이 나오기 시작하면서 모바일의 가로크기가 점점 커지기 시작했다 그리고 PC의 화면은 아직까지는 1920px로 유효하다. 가끔 27인치 이상의 모니터에서는 가로크기를 2500px을 넘기는게 간혹 있긴 한데 아직까지는 크게 신경쓰지 않아도 될 부분이다. CSS 반응형 웹 작성시 필수적인 기본 미..

무지개색상별 그라디에이션 코드 필요한 색상만 골라서 사용하면 됌 https://codepen.io/xhdvfwfb/pen/RwWLVyY

PC에서는 버튼을 클릭 시 크게 효과가 없지만 모바일에서는 터치로 클릭하였을 때 손가락이 터치했다는 걸 사용자에게 인지하기 위에서 버튼 클릭 시 살짝 버튼이 아래로 가게 하는 기법이 있어서 UX의 만족도를 조금 더 높여 줄 수 있는 방법이다 각 CSS 프레임워크 별 버튼 비교 Normal, Bootstrap, Material, Flat, Element UI 등등이 대표적입니다 가볍게 코딩을 해보았습니다 버튼 클릭 효과 위의 예제에서 마지막에 custom button을 보면 기존의 프레임워크와의 클릭이 조금 다르다는 것을 확인할 수 있습니다. 클릭(active)을 했을 때만 transform: translateY(4px); 를 추가하여 클릭한 효과를 줄 수 있습니다. .custom:active { back..

반응형 웹 (모바일 디바이스) 해상도— 2014년 11월 27일반응형 웹 적용을 하기 위해서는 데스크탑 뿐만아니라 최소한 모바일 디바이스의 해상도는 알고 있어야 되겠지요. 이전에 정리했던 데이타에 최근 출시한 iphone6, iphone6 plus, 갤럭시 노트4, 삼성 갤럭시 노트 엣지 추가했습니다. 기본 해상도가로폭디바이스480px스마트폰800px태블릿1024px넷북1600px데스크톱 스마트폰 해상도 : 브라우져 해상도의 2배디바이스해상도브라우져 해상도아이폰4, 4S 640 * 960320 * 480아이폰5(326ppi)640 * 1136320 * 568아이폰6(326ppi)750 * 1334375 * 667아이폰6 plus(401ppi)1242 * 2208414* 736갤럭시 S3720 * 1280..