본문 바로가기

개발

Javascript 객체와 배열을 복제하기 위한 메서드 Javascript 배열을 복제하기 위한 메서드 var a = [1, 2] console.log(a) // [1, 2] var b = Array.from(a) console.log(b) // [1, 2] console.log(a, b, a === b) // [1, 2], [1, 2], false b.push(3) console.log(b) // [1, 2, 3] console.log(a) // [1, 2] Javascript 객체를 복제하기 위한 메서드 var a = {name:'haemil'} var b = Object.assign({}, a) var c = Object.assign({top: 10, left: 7}, a) console.log(b) // {name: 'haemil'} console.l..
Javascript Tip 변수 키워드는 var 대신 const, let 을 사용하자 전통적인 자바스크립트 변수인 var 대신에 let, const 등을 사용하자(block Scope) var(function scope) 은 쓸 이유가 없으며, 오히려 var을 let, const 등과 같이 사용하면 문제가 생길 수 있다. 기본적으로 const를 사용하며, 값이 바뀌는 변수일 경우 let 을 사용한다. 직관적이고 편리한 querySelector를 사용하자 CSS 문법에 대한 이해가 있다면 쿼리 셀렉터를 사용하는 편이 훨씬 직관적이다. 같은 문법을 사용하고 있고, IE 9(8까지도?)도 지원하므로 쓰지 않을 이유가 없다. HTML5 커스터마이징 속성인 'data-' HTML5 커스터마이징 속성인 data- 를 통해서 엘리먼트에 사용자..
HTML로 구현된 화면에서 글자(text)가 보이지 않아야 할 때 적용할 CSS HTML로 구현된 화면에서 글자(text)가 보이지 않아야 할 때 적용할 CSS 들여쓰기를 사용하는 방법 text-indent: -9999em; 위치 지정을 사용하는 방법 position: absolute;left: 0;top:-9999em;
보이는 대로 생각하는 일을 넘어서기 미관을 위해서 제목이 필요없다면 굳이 제목 태그를 기입하지 않게 되는데...! About Services Portfolio Contact Us 목록을 만들 때에는 제목을 꼭 적는 일이 습관이 되어야 한다. 제목이 미관에 어울리지 않는다면 CSS를 통해서 얼마든지 보여주거나 보여주지 않는 처리를 할 수 있다. 중요한 것은 HTML 상에서 웹 접근성을 위한 구조가 잘 짜여졌는가이다. Main Menu About Services Portfolio Contact Us
크로스 브라우징을 하기 위한 속성 *hack - IE6,7에서만 적용됨 *(asterisk)를 붙이면 IE 하위버젼에서만 적용이 되는 CSS코드를 작성할 수 있게 된다. *position: absolute; *top: 65px; 아래의 코드를 적용하면 IE6,7에서 플롯을 해제할 수 있다. *zoom:1; IE 조건부 주석( Conditional Comment )
reset CSS 자주 적용되는 부분들을 모아서 작성한 reset CSS body에 서체와 글씨크기를 적용했더라도 적용되지 않는 서식 컨트롤들까지 함께 기입 글씨 크기는 12px을 기준으로 한다. 그려면 11px로 글씨를 줄일 수도 있고, 그 이상으로 글씨를 키울 수도 있다. 단, 11px 보다 더 작으면 글씨가 뭉개질 수가 있다. 공백과 세미콜론의 사용을 최소화한다. 맑은 고딕은 많은 브라우저에서 지원하며, 윈도우 비스타이상이면 설치되어 있다. 필드셋의 보더를 0으로 설정한다. 익스플로러 하위 버전에서는 이미지에 a링크를 걸면 테두리가 그려지므로 border를 0으로 설정한다. em, address는 의 폰트스타일은 노말로 변경하고, 이탤릭체가 따로 필요할 때 적용한다. a의 decoration은 none으로 설정한다...
overflow: hidden의 중요성... CSS를 이용해서 반응형 웹을 만들 때... overflow: hidden의 중요성을 다시 한 번.. 느끼게 되었다. content 영역에 overflow: hidden을 적용하지 않으면.. 좌우 스크롤 현상이 생긴다... ...! 일단 글감으로 적어놓고 추후에 다시 정리하겠...
블록 레벨 요소 vs 인라인 레벨 요소 블록 레벨 요소 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다. 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다. 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있습니다. " div, h1~h6, p, ul, li, table ..." 인라인 레벨 요소 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다. 라인의 흐름을 끊지 않으므로 요소 앞뒤로 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다. 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다. 즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없습니다. " span, i, img..