jfmam 개발 블로그

개요 css를 적용할 때 우선순위로 적용되는 경우에 대해 알아보자 css우선순위는 0,0,0,0을 기억하면 된다. 인라인 스타일로 작성 되었는가? id 선택자를 기반으로 스타일시트가 작성 되었나? 클래스, 가상클래스, 속성선택자 기반으로 스타일시트가 작성되었나? 요소를 기반으로 스타일시트가 작성 되었나? 💡 왼쪽의 수가 높을수록 우선순위가 높다. 1,0,0,0 은 0,1000000000,0,0 보다도 우선순위가 높다. 올림픽 메달과 개념이 비슷하다. 💡 숫자는 갯수를 의미하며 여러개가 있으면 해당 갯수만큼 숫자를 붙여준다 인라인 스타일로 작성된 경우 1, 0, 0 ,0 이 된다 id선택자로 스타일시트를 작성한 경우 #idSelector { } 두번 째 수를 갯수만큼 올려준다 class선택자로 스타일시트를..

개요 회사 렌딩페이지를 만들면서 모바일, 태블릿 등 다양한 기기 환경에서도 볼 수 있는 UI를 제공하기 위해서 반응형을 고려하였다. 해당 글은 프로젝트를 진행하면서 학습했던 것을 정리 하는 용도로 작성되었으며 참고용으로 봐주었으면 한다 목차 뷰포트 설정하기 break point (중단점) 설정하기 비율 설정을 통해 화면 크기에 맞추기 뷰포트 설정하기 디바이스 화면크기에 맞추며 초기배율은 1배수(100%)를 따른다. 또한 핀치줌을 지원하여 확대 축소가 가능하게 지원한다. 핀치줌이란? 모션을 통해 확대 축소를 하는 행위를 말한다. 모니터로는 컨트롤+ 스크롤 모바일로는 검지와 엄지를 대각선으로 벌리고 줄임으로써 확대축소를 할 수 있다. 예시 break point(중단점) 설정하기 중단점을 설정함으로써 다양한 ..