TIL 220915 새롭게 알게 된 CSS + etc.

새롭게 알게 된 CSS 속성

calc()

calc를 사용하면 css속성값에 계산식을 이용할 수 있다.

<length>, <frequency>, <angle>, <time>, <percentage>, <number>, 또는 <integer>를 받는 속성의 값으로 사용할 수 있다.

length구문에 해당하는 아무 값에나 사용할 수 있다. 덧셈, 뺄셈, 곱셈, 나눗셈이 가능하다. 곱셈과 나눗셈은 오른쪽 피연산자가 숫자여야한다.

width: calc(100% - 80px);

---

filter

흐림효과나 색상 변형 등 그래픽 효과를 요소에 적용한다.

/* SVG 필터를 가리키는 URL */
filter: url("filters.svg#filter-id");

/* <filter-function> 값 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 다중 값 */
filter: contrast(175%) brightness(3%);

/* 필터 없음 */
filter: none;

/* 전역 값 */
filter: inherit;
filter: initial;
filter: unset;

• blur() : 가우시안 블러 적용, px이용 백분율 값은 받지 않는다.
• brightness() : 어둡기, 밝기, 0% 검정색, 100% 유지, 100% 보다 큰 값은 밝은 이미지
• contrast() : 이미지 대비 조절, 0% 회색 이미지, 100% 유지, 100% 보다 큰 값은 대비가 더 큰 이미지
• drop-shadow() : 그림자 효과 적용, offset-x와 offset-y 필수 그림자의 크기, blur-radius 그림자 반경이 커지고 옅어짐, 음수는 사용불가, color
• grayscale() : 이미지 흑백, 100% 흑백, 0% 유지
• hue-rotate() : 색조 회전, deg값을 사용, 0deg 유지 최대 360deg까지 가능
• invert() : 색상 반전,  100% 정반대, 0% 유지
• opacity() : 투명도, 0% 완전 투명, 100% 유지
• saturate() : 채도 변경, 0% 무채색, 100% 유지, 100% 보다 큰 값은 채도가 높은 이미지
• sepia() : 이미지를 세피아로 변경, 0% 유지, 100% 완전 세피아

 

함수 조합

함수를 조합해서 그려지는 모습을 변경할 수 있다.

/* 함수를 사용할 때의 구문 */
filter: <filter-function> [<filter-function>]* | none

/* 예시 */
filter: contrast(175%) brightness(103%)

 

SVG 필터 적용

URL 함수와 SVG 리소스를 사용할 수 있다.

/* svg요소에 대한 참조 */
filter: url(svg-url#element-id)

/* 예시 */
.target {
  filter: url(#c1);
}

.mydiv {
  filter: url(commonfilters.xml#large-blur);
}

---

startsWidth()

어떤 문자열이 특정 문자열로 시작하는지 확인하여 불리언 값을 반환한다.

// syntax
str.startsWith(searchString[, position])
// searchString : 찾을 문자열
// position : 찾을 위치

//startswith
var str = 'To be, or not to be, that is the question.';

console.log(str.startsWith('To be'));         // true
console.log(str.startsWith('not to be'));     // false
console.log(str.startsWith('not to be', 10)); // true

---

백준 1157과 런타임 에러

백준 1157문제를 푸는데 자꾸 런타임에러가 났다. 전에도 런타임 에러가 났는데 이유는 몰라도 로직을 바꾸면 문제가 풀렸다. 이번엔 다른 로직이 생각나지 않아서 꼭 런타임 에러 발생 이유를 알아내서 코드를 수정해야했다.

동기분이 처음부터 코드를 조금씩 제출해가면서 어디서 런타임에러가 나는지 확인해보라고 조언을 해주셨는데 그렇게 쪼개가면서 제출을 해도 찾을 수가 없었다. 그래서 근본적인 원인을 알아내려고 검색을 했다. 크게 런타임 에러가 나는 이유는 이렇게 있는데

1. 배열에 할당된 크기를 넘어서 접근했을 때
2. 전역 배열의 크기가 메모리 제한을 초과할 때
3. 지역 배열의 크기가 스택 크기 제한을 넘어갈 때
4. 0으로 나눌 떄
5. 라이브러리에서 예외를 발생시켰을 때
6. 재귀 호출이 너무 깊어질 때
7. 이미 해제된 메모리를 또 참조할 때

코드를 보고 하나하나 비교를 해보니까 바로 이유를 알게됐다. 이유는 1번!!!!!!!

// 런타임 에러
var fs = require('fs');
var input = `Mississipi`.toString().trim().toUpperCase();
let arr = [];
let inputChar = [...new Set(input)];
inputChar.forEach((str) => {
  arr.push([str, 0]);
});
for (let i = 0; i < input.length; i++) {
  for (let j = 0; j < arr.length; j++) {
    if (arr[j][0] == input[i]) {
      arr[j][1] += 1;
    }
  }
}
let sortArr = arr.sort((a, b) => a[1] - b[1]);
if (
  sortArr[sortArr.length - 1][1] == sortArr[sortArr.length - 2][1] // 이 조건에서 무조건 sortArr이 여러개 들어올거라고 가정했기때문에 런타임 에러가 났다 사실은 길이가 1일수도 있는 것이다.
) {
  console.log('?');
} else {
  console.log(sortArr[sortArr.length - 1][0]);
}

// 정답입니다!
var fs = require('fs');
var input = `Mississipi`.toString().trim().toUpperCase();
let arr = [];
let inputChar = [...new Set(input)];
inputChar.forEach((str) => {
  arr.push([str, 0]);
});
for (let i = 0; i < input.length; i++) {
  for (let j = 0; j < arr.length; j++) {
    if (arr[j][0] == input[i]) {
      arr[j][1] += 1;
    }
  }
}
let sortArr = arr.sort((a, b) => a[1] - b[1]);
if (
  sortArr.length >= 2 &&
  sortArr[sortArr.length - 1][1] == sortArr[sortArr.length - 2][1] // 이 조건에서 무조건 sortArr이 여러개 들어올거라고 가정했기때문에 런타임 에러가 났다 사실은 길이가 1일수도 있는 것이다.
) {
  console.log('?');
} else {
  console.log(sortArr[sortArr.length - 1][0]);
}

백준 문제에 나온 예시를 보면서 풀다보니까 문자가 1개만 들어올 수도 있다는 건 생각치도 못했다. 배열의 길이가 1일때는 배열의 길이보다 크게 접근하니까 런타임 에러가 났던 것이었다. 그동안 런타임 에러가 뜨면 도망가기 바빴는데 이제는 하나하나 보면서 왜 그런지 찾아봐야겠다. 그동안 로직을 다 뜯어고치느라 고생한 나에게 위로를.... 근데 그게 맞긴하다. 잘못된 코드라서 런타임 에러가 난거니까...

 

언제나 컴퓨터는 잘못이 없고 인간만 잘못을 한다...🥲 컴퓨터 짱...