[TIL]21.05.27

CSS Selector, 레이아웃 초기화, em, rem 사용

: CSS 셀렉터에서

<ul>
  <li>
  	<div>감사합니다</div>
    	<div>영어론 땡큐</div>
  </li>
</ul>

를 부모셀렉터에서 자식셀렉터로 선택하는 방법

ul li:first-child{
	font-weight: bold;
    	color: red;
        list-style:none;
}

ul li > nth-child(2){
	font-size: large;
    	color: blue;
}

를 한다면

가 나온다, 즉 우선순위가 first-child로 선택된 것이 먼저라 두번째 nth-child(2)셀렉터에서 적용된 속성들이 적용이 안되는 것이다. 정확히 말하면 first-child 보다 밀리는 것이다.

즉 저렇게 적용하고 싶다면 다음과 같이 적어야 한다.

li{
 	list-style:none;
}

ul > li:nth-child(1){
	font-weight: bold;
    	color: red;
}

/* li:nth-child(2){
	font-size: large;
    	color: blue;
} */

.thank {
  	font-size: large;
    	color: blue;
}

레이아웃 초기화

* {
	box-sizing: border-box;
}
body{
 	margin: 0;
 	padding: 0;
}

// 도 괜찮고,

* {
	box-sizing: border-box;
    	margin: 0;
 	padding: 0;
}

// 처럼 전체셀렉터로 적용해줘도 레이아웃을 초기화하기 좋은 것 같다..
// 아직 잘 모르지만.. 따로 body를 안쓸때는 저렇게 쓰는 것 같다.

기본 폰트사이즈는 16px이다.

: 그러므로 기본적으로 따로 폰트사이즈를 지정해주지않고, em과 rem을 쓴다면 기본 폰트사이즈는 16px을 상대단위로 측정해서 적용되게 된다.

프로그래머스 level 1, 소수만들기 문제 풀었다.

:

const solution = (nums) => {
    let result = 0;
    const len = nums.length;
    
    for(let i = 0; i < len; i++){
        for(let j = i + 1; j < len; j++){
            for(let k = j + 1; k < len; k++){
                const numbers = (nums[i] + nums[j] + nums[k])
                if(isPrime(numbers)){
                    result++;
                }
            }
        }
    }
    return result;
}

function isPrime(number){
    if(number < 2)return true;
    for(let i = 2; i < number; i++){
        if(number % i === 0)return false;
    }
    
    return true;
}