전체 글
[CSS] display:flex
1. 플렉서블 박스 = 부모 박스- 부모 박스에 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 작동 2. 플렉서블 박스의 자식 박스 = 플렉스 아이템- 자식 박스가 속성값에 의해 작동하는 순간부터 플렉스 아이템이라 부른다 3. 플렉서블 박스의 축 - 주축과 교차축- 주축 = 중심이 되는 축- 주축이 가로 -> 왼쪽에서 오른쪽으로 배치- 주축이 세로 -> 위에서 아래로 배치- 축의 방향 - 축의 시작과 끝이 존재하는 이유는 플렉스 아이쳄이 처음 배치되는 위치(시작점)와 플렉스 아이템이 마지막에 배치될 위치(끝점)가 필요하기 때문 ( 속성 값은 플렉서블 박스에 적용한다. ) ※ 익스플로러 11 이상에서 작동. 안드로이드 4.4이상에서 자동※ 플렉서블 박스는 브라우저 접두사를 사용해야 한..
[CSS] 마우스커서 커스텀
https://jsfiddle.net/Kimara/nnj7L0xc/ Custom Cursors커서 모양을 이미지로 바꿀 수 있다. 모바일용 브라우저, 오페라 에서는 적용 X익스 6이상 O style="cursor: url(smiley.gif), url(myBall.cur), auto" 첫번째 이미지(smiley.gif)가 없거나 가져오지 못했을 때, 두번째 이미지(myBall.cur)가 적용되고, 이것도 실패하면 마지막에 설정된 값(auto)이 적용된다. 이미지를 가져오지 못할 경우에 적용될, 마지막 설정(키워드 값)은 반드시 해줘야 한다. 브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값을 입력하도록 한다.이미지의 크기는 "128 ×128"px 까지 허용되지만, "32 x 32"px 가 적..
[CSS] 뷰포트
뷰포트는 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 된다. 그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는 문젝 발생할 수 있다.이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 한다. ※뷰포트 속성 - width device-width, 양수 뷰포트의 너비를 지정한다.- height device-height, 양수 뷰포트의 높이를 지정한다.- initial-scale 양수 뷰포트의 초기 배율을 지정. 기본값은 1이다. 1보다 작은 값을 사용하면 축소된 페이지를 표시하고, 1보다 큰 값을 사용하면 확대되..
[CSS] 미디어쿼리
미디어쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나입니다. (IE9 이상) @media [only 또는 not] [미디어유형] [and또는 ,콤마] (조건문) {실행문} @media (min-width:320px) {실행문} => width값이 320px 이상일 때 실행문을 실행 @media (min-width:320px) and (max-width:768px) {실행문} => width값이 320px 이상이고 768px 이하일 때 실행문을 실해 min/max(접두사 구문): min은 최소, 즉 이상이라는 의미고 있고, max는 최대, 즉 이하라는 의미 ※주의사항 - 띄어쓰기 주의. ~and (min-width:320px) {}- mi..
[CSS] reset.css와 normailize.css
브라우저마다 설정되어 있는 기본 스타일의 차이를 없애고 사이트 제작 스타일 설정을 효율적으로 할 수 있도록 리셋 CSS 나 노멀라이즈 CSS를 사용합니다. 리셋 CSS는 모든 스타일을 완전히 초기화하는 것이고, 노멀라이즈 CSS는 유용한 스타일을 보유하고 일부 스타일을 리셋하여모든 브라우저에 기본 스타일을 동일하게 하고 있습니다. 리셋CSS 계열 1. Reset CSS(Eric Meyer's CSS reset) : http://meyerweb.com/eric/tools/css/reset/2. HTML5 Reset Stylesheet : http://html5doctor.com/html-5-reset-stylesheet/3. Tinyreset-tiny CSS reset for the modern web :..