본문 바로가기

전체 글169

[CSS] position : relative, absolute, sticky, fixed : 네이버 블로그 예시는 여기서.positionThe position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.developer.mozilla.orgposition의 default(기본값)은 static이다.​● position: relative원래 있던 자리를 유지하되, 상대적으로 사용자가 지정한 포지션(top, right, bottom, left) 만큼 이동한다.​● position: absolute근접한 부모 중에 static이 아닌 부모의 기준에서 움직인다.​● position.. 2021. 1. 2.
[CSS] flex box 이해 게임 [한글 버전] https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com CSS의 flex 속성을 게임으로 쉽게 이해할 수 있다. 이 속성을 이용해 개구리를 원래의 연못으로 옮기는 게임이다. 2021. 1. 2.
[CSS] Absolute 일 때 중간 정렬 Absolute Centering in CSS If you want to center something horizontally in CSS you can do it just by, using the text-align: center; (when working with inline… medium.com parent 요소를 position:relative로 하고, child 요소를 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 로 한다. OR flexbox를 사용하는 방법도 있다. 위 블로그 글 참고. 2021. 1. 2.
[html] video가 웹페이지에 안 나올 때 아이폰 디스플레이 목업 파일에 영상을 추가하고 싶었다. 하지만 영상은 뜨지 않았고... 코덱 문제인지 영상에 문제가 있는 건지 몹시 답답했다. ​ 소스에 문제가 있을지 살펴보았지만, src에 다른 영상의 경로를 추가하니 실행이 잘 되었다. Your browser does not support the video tag. 그렇다면 영상에 문제가 있는 게 확실하다. 구글링을 하다 용량이 너무 크면 안 된다는 글을 보았고, compress 과정을 거치니 잘 해결되었다. 용량을 잘 확인하자..^^ 2021. 1. 1.
[JavaScript] clientX/Y, pageX/Y, MouseEvent -clientX, clientY는 window 창에서 시작다. -pageX, pageY는 page의 제일 상위부터 시작한다. (페이지의 시작점부터) MouseEvent.clientX - Web APIs | MDN The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page). For example, clicking on the left edge of the viewpo developer.mozilla.org .. 2021. 1. 1.
[JavaScript] document.querySelector * document.querySelector(css 선택자) ​ Syntax: element = document.querySelector(CSS selectors); - name, id 를 제한 X - css선택자로 요소를 찾는다. ​ - This string must be a valid CSS selector string; if it isn't, a SYNTAX_ERR exception is thrown ​ ​ * document.querySelectorAll(css 선택자) ​ Syntax: element = document.querySelectorAll(CSS selectors); ​ 기능과 사용법은 document.querySelector와 동일하지만, css 선택자를 사용하여 모든 요소를 찾는다.. 2021. 1. 1.

티스토리툴바