All

[CSS] css기본 규칙들

*내가 놓치고 있는 CSS 기본 규칙들.. CSS 우선순위 CSS는 기본적으로 선언된 순서에 따라 적용되지만 각종 선택자와 삽입 위치에 따라 우선순위가 달라질 수 있다. 선택자 우선순위 !important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자 경쟁 규칙이 같은 선택자 그룹에 속해 있다면 선택자의 종류와 수에 따라 우선순위가 결정된다. 즉 높은 우선순위의 선택자를 더 많이 사용한 규칙이 이긴다. 삽입 위치 우선순위 1. 요소안의 style 요소2. 요소안의 @import 문3. 요소로 연결된 CSS 파일4. 요소로 연결한 CSS 파일 안의 @import 문5. 최종 사용자가 연결한 CSS 파일6. 브라우저의 기본 스타일시트 예외적으로, 최종 사용자..

[자바스크립트] 공부2

기초1var = 데이터를 저장하는 공간var a = '' //문자열var b = 0; //숫자var c = false; //불린 var d = null; //널 var e = undefined //언디파인드 둘 다 빈 값인데 차이가 있다. undefined는 변수를 만들어 놓았는데 아무 값도 집어 넣지 않았을 때 자동으로 undefined(정해지지 않음)이 되고, null은 빈 값을 변수에 의도적으로 넣는것이다. null은 그냥 넣는게 아니라 기존에 있는 값을 지울 때 사용한다. var f = []; //배열var g = {}; //객체var h = function(){}; //함수프로그래밍에서 ==은 같다이고 =은 대입한다는 뜻

[자바스크립트] 공부1

2018.05.17 생활코딩 자바스크립트 - 숫자와 문자 123456Math.pow(3,2); // 9, 3의 2승 Math.round(10.6); // 11, 10.6을 반올림Math.ceil(10.2); // 11, 10.2를 올림Math.floor(10.6); // 10, 10.6을 내림Math.sqrt(9); // 3, 3의 제곱근Math.random(); // 0부터 1.0 사이의 랜덤한 숫자 Math.round( 100 * Math.random() ); // 0~100 랜덤 생활코딩 자바스크립트 - 비교 == 동등 연산자. 좌항과 우항을 비교해서 서로 값이 같다면 true, 다르다면 false 1234alert(1==2) //falsealert(1==1) //truealert("one"=="t..

[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 :..

[CSS] font-smoothing

-webkit-font-smoothing: subpixel-antialiased;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;

[CSS] 컨텐츠 요소를 가운데 오게 하는 방법

컨텐츠 요소를 가운데 오게 하는 방법?반응형을 작업할 때 어떤 요소를 가운데 오게 하는 방법은 상당히 중요하고 방법도 여러가지가 있습니다. 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다. - 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게) - 요소(블록구조) : margin:0 auto; line-height: (height값과 동일하게)요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다. - 부모요소 : display:table; - 자식요소 : display:table-cell, text-align:center;..