본문 바로가기

IT/HTML, CSS10

[CSS] CSS 벤더 프리픽스 자동 추가 - auto prefixer 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.. 2021. 2. 27.
[CSS] px, rem, em 간단 정리 - 절대값으로 사용 됨- 뷰포트 크기 상관 x- 고정된 값으로 렌더링 된다.​- 루트 엘리먼트의 폰트 사이즈를 기준으로 적용된다.- 크기가 변하는 곳(ex. media query)에 사용하면 편리​- 상위 엘리먼트의 폰트 크기를 기준으로 적용된다.​ex).main { font-size: 2.5rem; height: 3em;} - height는 2.5rem의 3배가 된다. 2021. 1. 3.
[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.

티스토리툴바