예방이의 개발일기

반응형 웹에 등장 모바일 기기가 나오고 모바일 웹이 등장하고, 그 뒤에 계속해서 태블릿, 패블릿 기기 등 여러 사이즈의 기기들이 나오면서 다양한 화면에 최적화된 웹사이트를 제공하기 위해 반응형 웹이 등장하게 되었다. - 2015년 10월 반응형웹이란? 해당 기기 화면이나 환경에 맞게 자유자재로 변하는 것이 반응형 웹이라고 할 수 있다. 해당 사이트에서 다양한 반응형 웹사이트를 만나볼 수 있다. 반응형으로 작업해야하는 이유는? 유지보수의 간편함 반응형을 구축할 때 작업해봤는데 100% 인정은 할 수 없는 것 같다. 모바일과 웹의 디자인의 갭이 적었을 때 효과가 좋은듯? 적응형 사이트도 해봤는데 확실히 적응형보다는 유지보수가 쉬운 건 맞다. (적응형은 pc, mo 다 각자 수정해야하고 다 별도로 테스트 해야..

CSS filter를 이용해 사진에 다양한 이미지 변화효과를 부여할 수 있다. 필터는 주로 이미지, 배경, 테두리 렌더링 조정할 때 쓰인다. SVG 필터도 적용할 수 있다고 한다. /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); f..

순서에 따른 가상 클래스에 대해서 공부해보자. 순서관련 가상 클래스에는 1. first-child 2. first-of-type 3. last-child 4. last-of-type 5. nth-child() 6. nth-of-type() 이렇게 6가지가 있다. 클래스 이름이 매우 비슷해서 용도의 헷갈림이 많다. 📌 child vs of-type ✅ child : 형제 요소 중 형제 요소들 중에서만 형제 요소가 아니면 해당되지 않는다. ✅ of-type : 해당 요소(클래스) 중 자신의 유형과 일치하는 (형제요소 고려해야함) p의 first-of-type이면 p태그 중 자신이 무조건 첫번째라면 다 해당된다. 📌 참고 - 시니어 개발자도 모르길래 만든 영상 - 수코딩

선택자 패턴에서의 우선순위 적용 규칙 !important 인라인 스타일 요소 style="color:red" #id .class 속성기반 가상 Tag * CSS 명시도 계산법 1. inline 스타일 : 1000점 2. Id 선택자 개수(#) : 100점 3. Class 선택자 개수 (.) : 10점 4. Tag, Element 선택자 개수 : 1점 5. !important : 그냥 강제로 무조건 적용 (99999999...점) 6. 전체 선택자 (*) : 0점 7. 가상 엘리먼트는 무시 * 전역선택자(*), 조합자(+, >, ~, "", ||)과 부정 의사 클래스는 명시도 영향 없음 * 부정의사 클래스 내부에 선언한 선택자는 영향을 끼침 * 점수가 같다면 가장 마지막에 (가장 하단에) 작성된 선언이 적..

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) */..

⭐️ 이미지 태그일 때 .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 ..