WEB (6) 썸네일형 리스트형 [HTML/CSS] 서울대공원 키즈 사이트 최근에 HTML과 CSS 지식을 업데이트할 기회가 생겨 연습 겸 간단한 디자인과 웹 퍼블리싱 작업을 해보았다. grid 속성과 같은 최신? 문법을 사용해 보니 CSS도 다른 기술 못지않게 많이 발전했다는 생각이 들었다. 예전이라면 복잡하게 작성했을 레이아웃들이 너무 간단하게 구현된다.. 종종 관심 가는 사이트가 생길 때 시간을 내서 소스를 까봐야겠다. 호스팅 URL : https://injin.github.io/css-practice/grandpark-seoul/main.html 소스 코드 : https://github.com/injin/css-practice/blob/main/grandpark-seoul/main.html 그리고 이김에, 중요하다고 생각하거나 까먹기 쉬운 HTML, CSS 지식을 별도로.. [HTML/CSS] 중요 지식 정리 지극히 주관적인 중요 지식. 뭐든 오래 쓰지 않으면 까먹기 쉬우니 종종 찾아보자. 1. HTML 1.1 HTML 구조 의 의미 현재 버전을 알려주는 것. 현재의 문서가 HTML5임을 나타냄 HTML4, HTML5 문법 비교 1.2 해상도 PC 해상도에 따라 요소의 크기가 결정됨 PC 해상도가 1920인데 이미지가 960px이면 화면의 절반의 차지. 해상도는 쉽게 말하면 한 화면에 몇 개의 점이 찍히는가임. 같은 해상도라도 모니터의 크기가 다를 수 있음 1px의 실제 크기는 PPI (Pixel Per Inch)에 따라 달라짐. 웹&모바일은 72ppi 안드로이드 사이즈 단위 DP, iOS에서 사이즈 단위 PT 이미지를 원래 크기보다 크게 키우면 픽셀 사이사이를 벌려서 평균값으로 채움 웹기획에서 PC화면 크기.. [자바스크립트] 리스트 검색 필터 이미 클라이언트단에 나열된 리스트가 있다고 하자. 그럴 때 특정 키워드를 입력해 해당 단어를 포함한 목록들을 추려내고자 한다면 contains 함수를 사용할 수 있다. (본 게시글에서는 서버에서의 필터링을 다루지 않는다.) 검색: 나미야 잡화점의 기적(양장본) 창문 넘어 도망친 노인 코끼리의 무덤은 없다 꾸뻬씨의 행복여행(양장본) 앵무새 죽이기 [JSP] JSTL로 특정 option selected 주기 둘리 도우너 또치 [자바스크립트] 텍스트 기준 특정 Select Option 선택하기 보통은 value를 기준으로 특정 옵션에 selected를 부여하지만 옵션의 텍스트를 기준으로 선택 속성을 부여해야 한다면 선택자 contains를 사용해서 구현할 수 있다. 둘리 도우너 또치 [자바스크립트] Spacebar 이벤트 스크롤바 내림 방지 기본적으로 브라우저에서는 스페이스바를 눌렀을 때 스크롤이 된다. 따라서 특정 이벤트를 스페이스에 연결할 때 중복문제가 나타나기 때문에 기본 이벤트를 막아줘야한다. spacebar의 스크롤 이벤트는 keydown일 때 발생하기 때문에 이에 맞춰 작성하도록 한다. (keyup으로는 안된다.) $(document).keydown( function(event) { if (event.keyCode == 32) { event.preventDefault(); //기능구현 } }); 이전 1 다음
