HTML10 div 세로 중앙 정렬팁 - 03(transform) div 세로 중앙 정렬팁 - 03(transform)"display": "table","top": "50%","left": "50%","transform": "translate(-50%, -50%)" 2019. 9. 26. CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) Lorem Ipsum Dolor 박스 오른쪽에 여백이 있는데, li 요소에margin-right: 0px;를 추가해도 사라지지 않습니다. 이 여백을 없애는 방법 두 가지를 소개합니다.margin 이용하기첫번째 방법은 margin 값을 음수로 하는 것입니다. -4px 정도면 여백이 사라집니다.li { display: inline; border: 1px solid #bcbcbc; padding:.. 2019. 4. 29. SASS 문법 1) Variables ($)변수선언은 '$'으로 시작.변수의 값으로는 문자, 숫자, 컬러가 올 수 있다.$변수명 : 속성값;$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; color: $primary-color;}2) Nesting부모자손 선언 - tree구조, 포함관계, 중첩적 선언꺾쇠 선택자를 통해 직접선택도 가능( ul > a)& : 상위요소(자기자신)을 뜻함 = thisnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; .. 2019. 3. 11. calc() class="a">width: 80%; class="b">width: calc( 80% - 20px ); class="c">width: calc( ( 40% * 2 ) - 40px / 2 ); class="d">font-size: calc( 4em / 2 + 5px ); 브라우저 지원Chrome : 26.0+Firefox : 16.0+Internet Explorer : 9.0+Opera : 15.0+Safari : 7.0+ 출처 : https://www.codingfactory.net/10373 2019. 2. 28. 자바스크립트 성능 최적화 #2 : 렌더링 + α 자바스크립트 성능 최적화 #1 포스트와 마찬가지로 NHN은 이렇게 한다 자바스크립트 성능 이야기의 내용들이다.브라우저 렌더링 과정 및 기타에서도 속도를 향상 시킬수 있다. 렌더링 및 기타 방법에는 크게 아래 4가지 방법이 있다. reflow, repaint 최소화노출 제어를 통한 reflow 최소화 (display 속성 이용)DOM, 객체 캐싱기타 reflow, repaint 최소화같거나 동일한 작업은 그룹을 묶어 실행한다. (구버전 브라우저에서는 전의 작업의 경우, 여러번의 reflow와 repaint가 발생하나 최신 버전 크롬의 경우 한번만 발생한다고 함)reflow와 repaint에 대한 설명은 아래 글 참고브라우저 렌더링 : reflow & repaint1234567891011// 전var wid.. 2018. 12. 19. 브라우저 렌더링 : reflow & repaint 렌더링 과정1) DOM 트리 생성2) 스타일 구조체 생성3) 렌더 트리 생성4) 레이아웃 처리5) Paint6) 페이지 기능에 따라 Reflow, Repaint가 추가로 발생 reflow생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시, 영향받은 모든 노드(자식, 부모 등)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업1234function reflow() { document.getElementById('test').style.width = '100px'; return false;}Colored by Color Scriptercs repaintReflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업.수치와 상관없는 background-color, visibillty,.. 2018. 12. 19. 이전 1 2 다음 반응형
