Web

[자바스크립트] 원시타입 참조타입

자바스크립트의 자료형에는 두가지 형태가 존재한다. 원시타입: 숫자(Number), 문자열(String), 논리형(Boolean), Null, Undefined, Symbol(ES6에서 추가) 참조타입: 함수(Function), 배열(Array), 객체(Object) 이 둘의 차이점은 참조타입의 경우 원본이 바뀌면 복사본도 똑같이 바뀌지만, 원시타입은 그렇지 않다. - 원시타입은 값을 복제하기 때문에, 원본이 바뀌어도 복제된 값은 바뀌지 않는다. - 원본 값과 복제된 값은 별개의 값이된다. - obj1의 값을 변경하니 obj2의 값도 자동으로 바뀐다. - 참조타입은 값을 참조 하기 때문에 원본값이 바뀌면 참조하는 값도 바뀐다. - 참조 값은 별개의 값이 아니라 원본의 값을 향하고 있는 것이다.

[퍼블리싱] 퍼블리셔

평소에 잘못알고 있었던것들을 바로 잡아보자. / 웹 퍼블리셔 디자이너가 기획에 맞게 구성한 화면 디자인 파일(psd)을 받아 웹 브라우저에서 동일하게 보일 수 있게 구성합니다. 하지만 단순히 디자인 파일대로 웹 브라우저에 옮기는 일만 하는 것은 아닙니다. 구조화된 내용 으로 웹 페이지를 만들어 웹 브라우저에게 우리가 만드는 사이트가 무엇을 전달하고자 하는지 정보를 전달 하는 일을 합니다. 웹 퍼블리셔는 콘텐츠를 다루는 사람이다. 웹 페이지에서 전달하려는 내용을 제대로 해석하고 그 콘텐츠 해석에 맞게 HTML,CSS,자바스크립트를 작성하는 콘텐츠 전문가이다. 웹 개발자 웹 사이트 뒤쪽에 있는 여러 시스템(서버, 데이터베이스)을 다루고 개발하는 사람입니다. 서버 구성이나 데이터 처리 등 눈에 보이지는 않지만..

[CSS] 모서리 자르기

HTML 모서리 한개 BUTTON BUTTON BUTTON BUTTON 모서리 두개 BUTTON BUTTON 모서리 여러개 BUTTON CSS body { background: #ddd; } .button { width: 150px; line-height: 40px; text-align: center; margin-bottom: 20px; } .top-left { background: linear-gradient(135deg, transparent 10px, #58a 0); } .top-right { background: linear-gradient(-135deg, transparent 10px, #58a 0); } .bottom-right { background: linear-gradient(-45de..

[자바스크립트] script의 async와 defer 속성

'async'와 'defer' 는 ' 스크립트 파일이 비동기적으로 로드되며, 로드가 완료되면 즉시 실행된다. HTML 파싱을 중단하지 않고 스크립트 파일을 로드하므로, 다른 리소스롸 병렬로 로드 될 수 있다. 스크립트의 실행 순서가 보장되지 않는다. 여러 개의 'async' 스크립트가 있을 경우 로드 완료 순서에 따라 실행된다. 주로 독립적인 스크립트 또는 분석 코드 등에 사용된다. 주의) 여러 개의 'async' 스크립트가 있을 경우, 로드가 완료되는 대로 실행될 수 있으므로 순서에 주의한다. defer 속성 : 스크립트 파일이 비동기적으로 로드되지만, HTML 파싱이 완료된 후에 실행된다. 즉, 스크립트 실행은 문서의 로딩이 완료되기 직전에 발생한다. 스크립트의 실행 순서가 보장된다. 여러 개의 'd..

[자바스크립트] requestAnimationFrame

일반적으로 JS에서 애니메이션을 만들 때는 'setInterval' 함수를 사용하여 일정한 간격으로 코드를 실행시키는 방식을 사용할 수 있다. 그러나 'setInterval'은 정확한 타이밍으로 실행되지 않을 수 있고, 브라우저의 성능에 따라 애니메이션이 부드럽지 않게 나올 수 있다. 이에 반해 'requestAnimationFrame' 은 웹브라우저에서 제공하는 메서드로, 웹 애니메이션을 부드럽게 처리하기 위해 사용된다. 이 메서드를 사용하면 애니메이션을 구성하는 함수가 브라우저의 리플로우(reflow)와 리페인트(repaint) 주기에 맞춰 호출된다. 브라우저는 모니터의 주사율에 맞게 애니메이션을 업데이트하므로, 성능에 따라 알맞은 주기로 실행된다. 기본적인 'requestAnimationFrame'..

[CSS] 웹페이지 프린트 설정

프로젝트 진행중, 웹페이지의 어느 부분을 프린트해야했다. 나는 이제까지 웹에서 보여지는 뷰랑 프린트 되는 뷰랑 같다고 생각을 했는데, 그건 내 착각이었다. 프린트 전용 css가 있으며, page 여백을 조절할 수도 있었다. 중요한 건 내가 원하는 부분에서 떨어지고 사이즈가 조절되게 사용하는 것이었다. 하지만 프린트 설정 영역까지 내가 컨트롤 할 수는 없었다. 브라우저 고유 영역이기 때문이다. 이번 프로젝트를 정리하면서 알게된 웹페이지 프린트 설정 부분을 정리해본다. * display: block 처음에 뷰페이지랑 같은 css를 썼더니 프린트 시 다 깨져서 css를 걷어내고 다시 작업을 했다. display: flex로 단을 나누던걸 display:inline-block으로 변경 단은 나눠졌지만 page-..

[CSS] footer 하단에 고정 시키기

컨텐츠 양이 화면보다 길면 괜찮지만 짧을 때 푸터가 컨텐츠 바로 밑에 붙어서 모양이 안이쁠 때가 있다. 푸터는 말그대로 화면 하단에 붙어있어야 푸터 같기 때문이다(?) ㅋㅋㅋㅋㅋ 그럴때를 위해서 footer를 하단에 붙여보자.. display: flex 를 이용하기(ie11이상) https://jsfiddle.net/Kimara/wg8dtaLz/6/ 요점은 감싸는 박스에 display:flex; flex-direction:column; 을 주는 것과, 감싸는 박스의 높이값이 정해져 있어야 한다는 것이다. 그러면 그 전체적인 높이 안에서 footer에 margin-top:auto 를 줘서 위에 마진을 주는 것이다.

[CSS] display:flex 속성

요즘 들어 회사 프로젝트에서 크로스 브라우징을 IE11 이상으로 맞추는걸로 진행되고 있다. 너무 좋다^*^// display: flex 는 기존의 display: inline-block과 float:left의 장점을 섞은 아주 좋은 css다. 꾸준히 써보면서 내 것으로 만들어야지. { display : flex; (가로 정렬) justift-content : flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다.(처음과 끝이 맨 왼쪽, 오른쪽에 붙는다.) space-around: 요소들 주위에 동일한 간격을 둡니다. }..

[자바스크립트] PC, MOBILE 구별하기

2020.12.01 댓글에 이렇게 써져 있어서 참고할겸 캡쳐했다. 어차피 실제 사이트에서는 저런 소스 안쓴다. 개발자가 알아서 조절한다. 단지 저런게 있구나. 하고 알 겸 쓴건데. 환장한다며 쓰지마라고 누가 만들어서 퍼트리니 마니 그러니까 혹시나 내 블로그 보고 따라 쓸 것 같아서 맨위에 올려둔다. 알아서 걸러 보길.. * 스크립트로 PC와 MOBILE 구별 할 때. "win16|win32|win64|mac|macintel"; Win16 : 16비트 윈도위기반 컴퓨터 Win32 : 32비트 윈도위기반 컴퓨터 Win64 : 64비트 윈도위기반 컴퓨터 Mac : 매킨토시컴퓨터 MacIntel : 인텔CPU 를 가진 매킨토시 컴퓨터 // 모바일 위주로 구별 var mobileKeyWords = new Arra..

[CSS] CSS Framework 종류

관리자 페이지나 사이트 제작을 위해 혹은 다양한 CSS/HTML 스타일을 공부하기 위해 다양한 CSS 프레임워크를 배워두면 좋다. 1. 부트스트랩 http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드하세요. 하나의 프레임워크, 모든 기기. 부트스트랩은 웹사이트와 어플리케이션을 단일 코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절합니다. 많은 기능들 부트스트랩과 함께, ..