예방이의 개발일기

reset css 사이트 CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */..

웹페이지가 구축되기 위한 과정 1. 기획 2. 시안작업 : 시각적인 웹페이지를 구현하기 위한 용어 3. 개발작업(코딩) : 웹페이지 구현과 관련된 용어 4. 서버구축(완료) : 웹페이지 연결 및 구축과 관련된 용어 1. 시각적인 웹페이지를 구현하기 위한 용어 - 랜딩페이지 : 광고에 쓰이는 개념, 서비스 및 광고 등을 목적으로 특별 제작된 웹페이지 단일 웹페이지인 경우가 큼 - 반응형 웹 : 하나의 웹페이지로 모든 기기에 호환되는 웹디자인 형태 - 원페이지 : 광고에 쓰이는 개념, 서비스 및 광고 등을 목적으로 특별 제작된 페이지 웹페이지의 메인화면에서 브라우저에 꽉차게 레이아웃을 보여주는 형태로 스크롤링을 통해 컨텐츠를 배치하는 스타일 - 그리드 : 웹페이지 레아아웃 형성을 위한 셀의 분배, 가이드 라..

작성시 높은 순서대로 작성 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px 모바일 가로, 태블릿 : 480px ~ 767px 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/ @media all and (min-width:480px) and (max-width:7..

Media Query : 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 미디어 쿼리 사용법 /* 미디어쿼리 구문은 대소문자 구별 X */ @media [only 또는 not] [meida type] [and 또는 콤마(,)] (미디어 특성 = 조건문) { CSS 작성... } 논리연산자 and : 모든 쿼리가 참이여야 적용 not : 모든 쿼리가 거짓이여야 적용 not tv : tv를 제외한 모든 미디어 유형에만 적용 only : 미디어쿼리를 지원하는 브라우저에서만 적용 IE 6,7,8 버전에 미디어쿼리 미지원 -> 그래서 only 키워드 작성안함 [media type] screen (화면대상) tv (티비) print (인쇄물) all (모든 디바이스 대상) projection, handheld..

⭐️ 이미지 태그일 때 .parent { position: relative; width: 100%; height: 0; padding-top: calc(861 / 1280 * 100%); } img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } height를 0을 주었기 때문에 박스 모델 높이에 영향을 주는 건 padding-top 뿐이다. padding-top 계산식 => calc( 이미지 높이 / 이미지 폭 * 100%) 로 계산한다 이미 계산된 비율 aspect ratio | padding-top value --------------|---------------------- 16:9 | 56.25% 4:3 | 75% 3:2 ..