Frontend Development/HTML (3) 썸네일형 리스트형 Frontend 서버 webpack, resource download Frontend를 웹서버에 Deploy하고 필요시 webpack 자원과 소스코드를 다운로드 받아야 할 때가 있다. 보통 웹 브라우저로 웹 접속 후 Chrome 개발자 도구에서 sources 항목을 보면 디버그 모드로 deploy된 경우 webpack 소스와 application 소스들이 열람이 가능하다. 개발 중 띄운 Frontend 웹페이지에 접속 하고 크롬 브라우저 F12로 개발자 모드를 열고 Sources 항목에 들어가 보면 좌측에 로딩 되어 있는 소스와 webpack 결과물들이 열람가능함을 볼 수 있다. 로딩되어 있는 소스 파일들을 다운받으려면 chrome 웹 스토어에 있는 Resource Saver라는 확장 프로그램을 설치하면 된다. 크롬 웹 스토어에 진입해서 resource saver로 검색하.. [HTML] Viewport 개념 모바일용 반응형 웹을 개발할때 필수적으로 알아야 하는 개념이 viewport이다. 안드로이드 등 단말에서 실제 표현되는 화면 크기를 viewport라고 하는데 쉽게 와닿지가 않아서 밑바닥부터 살펴보았다. 해상도 우리가 모바일에서 보는 해상도는 일반적으로 FHD, FHD+, QHD 등등 어마무시하게 큰 사이즈들이다. 갤럭시 S10+의 경우 3040 * 1440라는 어마어마한 크기를 보여줍니다. 우리가 일반적으로 PC에서 사용되는 해상도가 1920 * 1080 ( FHD ) 이라는 것을 생각해 본다면 작은 화면에 엄청난 해상도가 들어가 있음을 알 수 있다. 보통 피씨 디바이스는 화면이 모바일 기기보다 훨씬 크다. 만일 두가지 디바이스의 해상도가 같다면 디스플레이에 표시되는 내용도 같을 것이고 아래와 같이 화.. HTML5 data 속성으로 추가 정보 저장 HTML5에서는 각 Element들에 대해서 data-* 형식으로 추가 정보를 저장할 수 있다. 특정 요소와 연관되어 있지 않지만 데이터에 대한 확장 가능성을 두고 의미론적으로 HTML 요소에 추가 정보를 저장한다. JQuery로 해당 data 속성의 값을 가져올 수 있다. .attr : HTML5의 attrbutuer 속성으로 가져옴 .data : dom 객체 속성 (Property)로 가져옴 //attr로 가져오면 String 속성이다. console.log($("#menu").attr("data-role")); //String "menu" console.log($("#menu").attr("data-last-value")); //String "99" console.log($("#menu").attr.. 이전 1 다음
