2020-11-11

1. 한줄라인 글자 수 제한

<div class="txt-line">오늘의 할 일은 코딩 공부를 8시간 이상 하는 것이다.</div>

.txt-line {
  width: 70px;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

• Block 레벨에서 적용된다.
• overflow: hidden : 너비가 70px을 넘어서는 내용에 대해서는 보이지 않게 처리한다.
• text-overflow: ellipsis : 글자가 너비 70px을 넘을 경우 생략 부호를 표시함.
• white-space: nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한 줄로 나오게 처리한다.

2. Element.classList

Element.classList : 읽기 전용 프로퍼티

classList 사용은 공백으로 구분된 문자열인 element.className을 통해 element의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

const elementClasses = elementNodeReference.classList;

만약 클래스 속성이 설정되어 있지 않거나 비어있다면 elementClasses.length는 0을 반환한다.

element.classList 그 자체는 읽기 전용 프로퍼티지만 add( ) 와 remove( ) 메서드를 이용하여 변형할 수 있다.

 

메서드

* add(String [, String [, ... ]])

지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 element의 class 속성에 이미 존재한다면 무시한다.

* remove(String [, String [, ... ]])

지정한 클래스 값을 제거한다.

const div = document.createElement('div');
div.className = 'container';

// 요소의 자식 요소를 포함하여 요소를 나타내는 직렬화된 HTML 파편을 가져온다.
// <div class="container"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove('container');
div.classList.add('anotherclass');

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// add or remove multiple classes
div.classList.add('foo', 'bar', 'baz');
div.classList.remove('foo', 'bar', 'baz');

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"]
div.classList.add(...cls);
div.classList.remove(...cls);

* toggle(String [, force])

하나의 인수만 있을 때 : 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.

두 번째 인수가 있을 때 : 두 번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.\

// if visible is set remove it, otherwise add it
div.classList.toggle('visible');

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle('visible', i < 10)

* contains(String)

지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

if (div.classList.contains('visible') {
  console.log('visible');
} else {
  console.log('not visible');
}

* replace(oldClass, newClass)

존재하는 클래스를 새로운 클래스로 교체한다.

// replace class "foo" with class "bar"
div.classList.replace('foo', 'bar');

 

참조 : MDN Web docs