CSS7 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. 자간, 어간, 행간 간격조절 자간, 어간, 행간 간격조절 css 로 글씨의 자간, 어간 , 행간 간격을 조절해보겠습니다.letter-spacing 속성은 글자사이의 간격 [자간]속성은 0 , 1, -1 인데요 word-spacing 단어사이의 간격 [어간]속성값은 마찬가지로 0.1.-1 입니다. line-height 줄간격 조절 [행간]속성값은 px % 1.0.1.2.1.5입니다. 2018. 11. 1. div 세로 중앙 정렬팁 - 02(display: table) 종종 사이트를 제작할 때 화면의 세로 가운데에 요소를 배치해야 되는 경우가 있는데가로 가운데 배치는 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{display:blo.. 2018. 10. 23. 이전 1 2 다음 반응형
