CODING/HTML & CSS
-
CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법CODING/HTML & CSS 2019. 4. 29. 17:15
display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) Lorem Ipsum Dolor 박스 오른쪽에 여백이 있는데, li 요소에 margin-right: 0px; 를 추가해도 사라지지 않습니다. 이 여백을 없애는 방법 두 가지를 소개합니다. margin 이용하기 첫번째 방법은 margin 값을 음수로 하는 것입니다. -4px 정도면 여백이 사라집니다. li { display: inline; border: 1px solid #bcbcbc; padding: 10px; margin-right: -4px;..
-
SASS 문법CODING/HTML & CSS 2019. 3. 11. 11:19
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; padding: 6px 12px;..