HTML, CSS, JS 4

팝업창 해상도 상관없이 컨텐츠 너비/높이

팝업창 띄울시, 부모창에서 width, height를 지정하지 않고 자식창의 너비/높이에 따라 자동 조정되도록 함 요소 너비/높이 속성 (모두 Margin 요소 미포함)offsetWidth : 요소의 전체 너비 사용 ( Boarder 까지 요소의 너비/높이 + 스크롤바 )clientWidth : 스크롤바를 제외한, 요소의 내부 너비 ( Padding 까지의 요소의 너비/높이 - 스크롤바 제외 )scrollWidth : 스크롤바를 포함한 요소 내부 너비 ( Padding 까지의 요소의 너비/높이 + 스크롤바 포함 )width : 요소의 순수한 크기 (content width)innerWidth : width + paddingouterWidth : width + padding + border부모창 : wid..

HTML, CSS, JS 2025.02.10

JQuery

JQuerygetElementById 같이 HTML 핸들링을 간단하게 해주는 JS (일부 JS 순수 함수들을 래핑한 API도 있다)제이쿼리에서는 변수를 지양하는 게 좋다 (가독성) (1) Syntax  ①~③ 은 배열형태로 반환 ④은 단일값으로 반환되기 때문에 순환구조가 없음①$(this).hide() - hides the current element.②$("p").hide() - hides all elements.③ $(".test").hide() - hides all elements with class="test".④$("#test").hide() - hides the element with id="test". HTML의 태그가 다 실행된 후 실행, document.eventListener... ..

HTML, CSS, JS 2024.11.01

Css - syntax, selectors

구조 : .#선택자 {속성: 값} 1. SYNTAX External cssHTML 외부에 css 파일을 따로 만들어서 정의ex.html abc/ style.css@charset "UTF-8";h1 {color:green;} inline cssHTML 태그 안에 있는 내용물에 적용 구디아카데미  internal csshead 태그 안에 style 태그를 정의   스타일 적용 중복시 우선순위inline css > internal css  2. SELECTORScss selector - 태그 이름 : div, p, .....  - id : 특정 하나의 태그에만 적용이되고, 한 HTML에서 하나만 부여할 수 있다. 스타일 태그에서 #으로 받는다.one - class : 스타일 태그에서 .으로 받으며, 여러 ..

HTML, CSS, JS 2024.10.25