프론트엔드Explorer

active나 focus는 user의 action에 따라 스타일링의 변화를 주고 싶을 때 사용하는 선택자(User Action Pseudo-classes)이다. 

둘은 비슷해보이지만, 차이가 있다. 

focus는 (input을 눌러) focusing이 되었을 때, background-color를 변하게 하고 싶으면 사용한다. 

active는 (input을) 누르는 찰나에 background-color를 변하게 하고 싶을 때 사용하면 된다. 

table width 고정, 자동 줄바꿈

table에서 width를 따로 설정했음에도 불구하고, 컨텐츠의 내용이 길어지니 아래와 같이 width가 계속해서 늘어났다. 

이를 방지하기 위해서는 테이블의 사이즈에 맞게, 컨텐츠가 알아서 자동 줄바꿈을 해야한다. 

word-break: break-all; 속성을 사용하면 아래와 같이 알아서 줄바꿈을 할 수 있다. 

table > tr > td{
    word-break: break-all;
}

word-break는 텍스트가 자신의 content-box 밖으로 overflow할 때 줄을 어떻게 바꿀지 정해주는 속성이다. 

css에서 nth-child는 다음과 같이 쓰인다.

/* 첫번째 item에 styling할 때 */ 
.item:first-child{
	color: #FFFFFF; 
}

/* 두번째 item에 styling할 때 */  
.item:nth-child(2){
	color: #0066FF; 
}

/* 마지막 item에 styling할 때 */
.item:last-child{
	color: #000000; 
}

nth-child의 child라는 말 때문에, item 클래스의 자식요소에 styling하라는 뜻인가? 싶을 수 있지만, 여기서 child의 의미는 item 부모 요소의 child를 의미한다. 

부모 요소의 child~ 이런 식으로 기억하는 것이 더 헷갈릴 수 있으므로, nth-child가 나오면 선택자와 같은 level에 있는 것 중 몇 번째인지를 확인해보는 게 가장 좋다. 

.curriculum .row:nth-child(2){
    margin-bottom: 48px;
} 

위의 코드는, curriculum 클래스의 자식인 row 클래스와 같은 level에 있는 요소 중에서 2번째의 margin-bottom을 48px로 해달라는 뜻이다.

한 가지 예시를 더 보자. 아래와 같은 html 코드가 있을 때, 짝수 번 list item에는 color를 red로, 홀수 번 list item에는 color를 yellow로 주고 싶을 때는 어떻게 할 수 있을까?

<ol>
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
	<li>E</li>
	<li>F</li>
</ol>

같은 level에 있는 li 요소 중, 짝수 번은 color를 #FF4949로, 

같은 level에 있는 li 요소 중, 홀수 번은 color를 #FFC82C로 준다는 뜻이 되는 것이다.

li:nth-child(2n){
	color: #FF4949;
}

li:nth-child(2n-1){
	color: #FFC82C;
}