postCSS를 사용한다면 필요 없는 기능이지만, 바닐라 CSS를 사용 중일 경우에는 CSS 호환성을 위해 벤더 프리픽스를 추가해주어야 한다. (하지만 주요 웹 브라우저의 최신 CSS 표준 지원이 빨라지고 있으며 웹 브라우저 시장에서 구글 크롬의 사용률이 크기 때문에 벤더 프리픽스의 필요성도 줄어들고 있다.) 브라우저별 벤더 프리픽스 브라우저 벤더 프리픽스 파이어폭스 -moz- 사파리 -webkit- 크롬 -webkit- 오페라 -o- 인터넷 익스플로러 -ms 이에 관련된 플러그인도 있지만(projects.verou.me/prefixfree/) Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unpref..

- 절대값으로 사용 됨- 뷰포트 크기 상관 x- 고정된 값으로 렌더링 된다.​- 루트 엘리먼트의 폰트 사이즈를 기준으로 적용된다.- 크기가 변하는 곳(ex. media query)에 사용하면 편리​- 상위 엘리먼트의 폰트 크기를 기준으로 적용된다.​ex).main { font-size: 2.5rem; height: 3em;} - height는 2.5rem의 3배가 된다.

예시는 여기서.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..

[한글 버전] https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com CSS의 flex 속성을 게임으로 쉽게 이해할 수 있다. 이 속성을 이용해 개구리를 원래의 연못으로 옮기는 게임이다.

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를 사용하는 방법도 있다. 위 블로그 글 참고.

아이폰 디스플레이 목업 파일에 영상을 추가하고 싶었다. 하지만 영상은 뜨지 않았고... 코덱 문제인지 영상에 문제가 있는 건지 몹시 답답했다. ​ 소스에 문제가 있을지 살펴보았지만, src에 다른 영상의 경로를 추가하니 실행이 잘 되었다. Your browser does not support the video tag. 그렇다면 영상에 문제가 있는 게 확실하다. 구글링을 하다 용량이 너무 크면 안 된다는 글을 보았고, compress 과정을 거치니 잘 해결되었다. 용량을 잘 확인하자..^^

미디어 쿼리를 만드는 중이다.​@media (min-width: 992px){...}@media (min-width: 768px){...}@media (min-width: 576px){...}​ ..등등​그런데 값 적용이 아무리 안 되는 것이다.알고보니 순서가 중요했다...^^min-width를 오름차순으로 해야한다.​@media (min-width: 576px){...}@media (min-width: 768px){...}@media (min-width: 992px){...}​​운 좋게 이때까지 올바른 순서로 했었는데 이번에 반대로 하면서 깨닫게 되었다.정말 이런 기본도 몰랐다니 반성하게 된다.

developer.mozilla.org/en-US/docs/Web/CSS/--* Custom properties (--*): CSS variables - CSS: Cascading Style Sheets | MDN Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function. Custom properties are scoped to the element(s) they are declared on, and part developer.mozilla.org w..

- block의 경우 (예를 들어, div) margin: auto로 수평 center 가능하다. (수직으로는 불가능) ​ - text-align의 경우 요소를 수평 center 가능하지만 수직으로는 불가능하다. 블록 요소에는 적용이 안 된다. ​ -transform: translate(50%, 50%) translate(x축, y축)이다. 50씩 이동하므로 완전한 center. ​ -텍스트인 경우 text-align: center line-height: __px (__에는 부모 상자의 height 만큼 넣어주면 된다.) ​ ​ ​ 그냥 justify-content를 사용하도록 하자... developer.mozilla.org/en-US/docs/Web/CSS/justify-content justify-..

커서를 가져다대면 나타나는 메뉴를 제작하고 싶었다. jquery나 js를 사용해야하는건지 머릿속이 복잡했다. ​ 하지만 css만으로 가능했다. How TO - Hoverable Dropdown How TO - Hoverable Dropdown ❮ Previous Next ❯ Learn how to create a hoverable dropdown menu with CSS. Dropdown A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Hover Me Try it Yourself » Create A Hoverable Dropdown Create a dropdown menu..