[취업준비일지] - 118

1.css에서 font를 설정할 때 특정 폰트를 사용하는 것도 좋지만
sans-serif, serif, monospace를 사용할 경우 사용자가 직접 선택해서 사용할 수 있기 때문에
선택권을 넘겨주거나 사용자의 default 글꼴을 보여줄 때 사용하면 좋다.

하지만 어떤 글꼴을 사용하느냐에 따라서 사이즈가 차이날 수 있기 때문에
생각한 범위를 벗어나게 될 수 있다는 점을 고려해야 할 것 같다.

특정 font를 사용하고 싶다면 fonts.google.com에서 다양한 폰트를 받아 사용할 수 있다.


2.선택자에는 id, class, tagName등의 존재는 알고 있었고
그런 선택자의 상태(hover, active 등)에 따른 적용이 가능한 것도 알고 있었지만
[disabled]{}와 같은 형태로 css를 적용할 수도 있다는 부분은 처음 알게 되었다.


3.id값은 단순히 선택자로만 사용되는 것이 아니고 
url의 끝에 #기호와 id를 통해 해당 요소로 즉시 이동하게 할 수 있다.

예를 들어 우측의 id entry594Comment의 위치를 가고 싶은 경우
아래의 주소 처럼 #entry594Comment를 추가하면 사진처럼 이동된 모습을 볼 수 있다.
https://happyp.tistory.com/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%ED%9A%8C%EA%B3%A0#entry594Comment

 

또한 이를 응용해 내가 현재 보는 페이지를 공유하고 싶은 경우 id가 부착된 url을 전달하거나
작게 copy 또는 공유하기 버튼을 만들어 현재 url에 #id가 추가된 내용을 복사시켜
유저들이 편하게 공유할 수 있게 만들 수 있으며

대주제들로 이동하기 쉽게 링크를 상단에 만든 다음
해당 링크들을 누를 경우 해당 위치로 이동시키는 기능을 구현할 수 있겠다.

마지막으로 여러 페이지들에서 중요한 내용들을 검색하는 기능을 구현할 때
검색명 + 드롭다운으로 원하는 키워드를 쉽게 검색할 수 있게 한 다음
해당 키워드가 존재하는 페이지에서 키워드가 바로 보이는 위치로 이동하게 할 수 있겠다.


4.react가 아닌 js의 경우 class명을 사용할 때는 
카멜케이스가 아닌 하이폰("-")을 사용해야 하는데
클래스에서는 대소문자 구별을 하지 않기 때문에 구별이 제대로 되지 않기 때문이다.


5.css에는 우선순위가 존재하는데 개발자도구에서 확인할 경우 
중요한 내용이 위에서부터 내려오기 때문에 적용은 위에서부터 되고
밑줄이 처진 내용은 우선순위에서 밀려 사라졌다는 것을 알 수 있다.

이전에는 중구난방으로 밑줄쳐진 내용들을 이해하기 어려웠는데
알고보니 우선순위 때문에 사라진 내용이었고
우선순위가 낮은 내용들이 margin등을 표시하는 박스 바로 위에 있기 때문에
항상 뭔가 밑줄이 쳐져 있는 것 처럼 보였던 것이다.

또한 하위 우선순위는 아무리 고치더라도 상위 우선순위에 있는 내용이 변경되지 않는데
예전에 css를 잠깐 테스트한다고 이런저런 확인을 할 때
운 좋게도 상위 우선순위에서 수정할 때는 잘 되었지만
대충 드래하고 아무 위치에서나 css를 수정할 경우 작동이 되지 않는 이유도 이것이었다.

우선순위는 아래와 같으며 important?같은 강조 우선순위도 존재하는 걸로 알고 있다.
* => 태그 => 클래스,의사클래스,속성선택자 => ID => inline styles



(1).백준 10866 덱은 스택, 큐를 합친 것 같은 문제였다.
앞, 뒤로 숫자를 넣은 다음 앞, 뒤에서 숫자를 뺴거나 앞, 뒤의 숫자를 구하거나
사이즈, 덱 존재 여부 등을 구해야 했는데
이전과 유사하게 조건으로 분기한 다음 shift, pop, push, unshift를 사용해 처리했다.

const input = `22
front
back
pop_front
pop_back
push_front 1
front
pop_back
push_back 2
back
pop_front
push_front 10
push_front 333
front
back
pop_back
pop_back
push_back 20
push_back 1234
front
back
pop_back
pop_back`.split('\n')

const deque = []
const result = []

for(let i = 1 ; i < input.length ; i++){
    if(input[i] === "pop_front"){
        const shifted = deque.shift()
        if(shifted === undefined){
            result.push(-1)
        }
        else{
            result.push(shifted)
        }
    }
    else if(input[i] === "pop_back"){
        const poped = deque.pop()
        if(poped === undefined){
            result.push(-1)
        }
        else{
            result.push(poped)
        }
    }
    else if(input[i] === "size"){
        result.push(deque.length)
    }
    else if(input[i] === "empty"){
        result.push(Number(deque.length < 1))
    }
    else if(input[i] === "front"){
        const shifted = deque.shift()
        if(shifted === undefined){
            result.push(-1)
        }
        else{
            result.push(shifted)
            deque.unshift(shifted)
        }
    }
    else if(input[i] === "back"){
        const poped = deque.pop()
        if(poped === undefined){
            result.push(-1)
        }
        else{
            result.push(poped)
            deque.push(poped)
        }
    }
    else{
        const [order, number] = input[i].split(' ')
        if(order === "push_front"){
            deque.unshift(number)
        }
        else{
            deque.push(number)
        }
    }
}

console.log(result.join('\n'))