일상속으로

CODING/HTML & CSS

• 브라우저 렌더링 : reflow & repaint

  CODING/HTML & CSS 2018. 12. 19. 16:43

  렌더링 과정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, outline..

  Read More
• 자간, 어간, 행간 간격조절

  CODING/HTML & CSS 2018. 11. 1. 12:00

  자간, 어간, 행간 간격조절 css 로 글씨의 자간, 어간 , 행간 간격을 조절해보겠습니다.letter-spacing 속성은 글자사이의 간격 [자간]속성은 0 , 1, -1 인데요 word-spacing 단어사이의 간격 [어간]속성값은 마찬가지로 0.1.-1 입니다. line-height 줄간격 조절 [행간]속성값은 px % 1.0.1.2.1.5입니다.

  Read More
• div 세로 중앙 정렬팁 - 02(display: table)

  CODING/HTML & CSS 2018. 10. 23. 17:28

  종종 사이트를 제작할 때 화면의 세로 가운데에 요소를 배치해야 되는 경우가 있는데 가로 가운데 배치는 margin:0 auto; 나 text-align:center을 사용하면 되지만 세로로 가운데 정렬하는 경우에는 보통은 javascript로 top 값을 지정 했었다.그러나 css의 display:table과 table-cell 속성을 이용하면 좀 더 쉽게 세로 가운데 정렬을 구현할 수 있다.HTML 세로로 가운데 정렬 CSS.modal-table{display:table;position:relative;width:100%;height:200px;border:2px solid #666;} .modal-cell{display:table-cell;vertical-align:middle;} .box{displ..

  Read More
• div 세로 중앙 정렬팁 - 01(line-height, :after)

  CODING/HTML & CSS 2018. 10. 23. 17:18

  line-height 속성을 이용해서 높이를 알 수 없는 이미지를 세로 중앙 정렬 하는 것이 가능하다. https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> line-height 값을 박스의 높이와 같은 값을 지정하고 안의 이미지를 vertical-align: middle을 사용해서 정렬한다. content 속성을 이용해서 공백을 넣었기 때문에 좌우 정렬은 약간의 오차가 발생할 수 있다. 출처 : https://www.xpressengine.com/tip/22835216

  Read More