NOTE

# Inline-block의 대안 - flexbox

• flexbox enables you move boxes anywhere you want.

• The rules of flexbox

  1. You do not talk to the childeren. You only talk to the father. 자식 엘리먼트에 어떤 것도 적지 않고, 부모 엘리먼트에만 명시하기. 예를 들어 아래 태그에서 div들을 변경하고 싶다면 body 태그에 명령해야 한다. CSS에서 body 셀렉터에 display: flex; 적어주면 된다. 그러면 parent태그인 바디 태그를 통해 div에 대한 많은 속성들을 수정할 수 있다.

2. Main Axis (주축)
   : justify-content 속성은 주축에 적용되고, align-items 속성은 교차축에 적용된다. By Default, 주축은 수평선이며 교차축은 수직선이고, 이는 변경할 수 있다.

   -> 어떻게? flex-direction: column/row; row가 디폴트. column으로 설정을 하면 주축이 수직이 되고, 교차축이 수평이 된다.
   

3. 원하는 만큼의 flexbox를 생성할 수 있다. 만약 위의 태그에서 div들 안에 텍스트를 입력하면, 자식이 생긴 것이므로 부모 엘리먼트인 div들을 flexbox로 만들어 텍스트들에 대한 명령을 내릴 수 있다.

Tip. Height: 100vh; 할 때 vh는 viewport height를 뜻하며, viewport=screen이라고 생각할 수 있으므로 100vh=100 screen height는 화면 높이의 100%를 의미한다.

• flex-wrap: 화면이 줄어들면 엘리먼트들이 자동으로 아래로 배치되게(wrap) 할 건지, 그러지 못하게 할 건지(nowrap) 명령 가능하다.
  
  

# "Position" Property

• CSS로 태그의 포지션을 설정해줄 수 있다. 이 포지션 프로퍼티는 요소들이 어느 부분에 배치될지를 설정하는 것이 아니라 어떤 방식으로 포지셔닝 될 것인지를 설정해준다.

• 속성값을 fixed로 설정하면 해당 element는 초기 설정된 위치에 고정되어 가장 위에 보여지며, 스크롤을 내려도 보이는 위치가 변하지 않는다.

• 초기 설정된 위치를 바꿔주는 방법은 top, bottom, left, right 속성을 사용하는 것이다.

• 속성값 static은 레이아웃이 element를 처음 배치한 곳에 두는 것을 말한다.

• 속성값 relative은 어떤 element의 위치를 아주 살짝씩 바꾸고 싶을 때 유용하게 쓰인다. position: relative; 를 적은 후 top/bottom/left/right: +/-number 해주면 적힌 넘버만큼 현 위치에서 element가 적힌 방향으로 이동한다.

• 속성값 absolute는 relative에 비해 좀 더 extreme하다. Element를 가장 가까운 위치 지정 부모 요소에 대해 상대적으로 배치한다. 단, 부모 태그들에 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼고, 최종 위치는 top, right, bottom, left 값이 지정한다. 스크롤과 함께 움직인다(항상 보이는 것이 아니라 고정된 위치에 있는다는 얘기).
  = absolute를 지정한 태그의 부모 태그에 위치 정보가 없다면 지정 태그는 바디 태그 기준으로 배치가 된다. 따라서 박스A 안에 있는 박스B의 위치를 박스A 안에서 조정하고 싶은 경우엔 부모 태그인 박스 A에 position: relative; 설정을 해주어야 한다.
  
  

  # Pseudo Selectors

  (rf. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
  일반적으로 쓰이는 세 가지 종류의 셀렉터가 아닌, 다른 좀 더 complex한 방법으로 태그를 선택하고 싶을 때 쓴다. 이 방법은 html 태그들에 id나 class를 부여해서 css를 적용하는 방식보다 훨씬 효율적이다.

  How to write?

• div:first-child, div:last-child
  : div의 가장 첫 번째 자식이나 마지막 자식을 골라서 속성을 적용한다는 것이다.

• div:nth-child(2)
  : 괄호 안 숫자째 자식을 고르는 법.

  • 짝수번의 자식을 고르고 싶으면 숫자 넣는 곳에 even, 홀수번의 자식을 고르고 싶으면 odd를 써넣으면 된다.
  • 혹은 2n, 2n + 1, 3n + 1 등등을 써넣어도 된다.

• 두 개의 셀렉터를 함께 고르는 법
  

• input 태그의 required 속성이 있는 태그와, 그렇지 않은 태그를 pseudo selectors를 사용해 따로 골라줄 수 있다. input:required를 쓰면 필수인 인풋들을, input:optional를 쓰면 필수가 아닌 인풋들을 선택해 준다.

• Attribute Selecotrs(rf. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
  : matches elements based on the presence or value of a given attribute.

  • input 태그 중에 type="password"인 태그를 고르고 싶다? → input[type="password"]
  • input 태그 중에 placeholder 값에 name이란 단어가 들어간 태그를 고르고 싶다? → input[placeholder~="name"

# Pseudo Selectors 2 - States

1. Active
   : 유저의 클릭 등으로 활성화된 태그 상태를 선택. 가령 button 태그로 버튼을 만들었는데, 그 태그가 클릭되었을 때의 모습을 설정하고 싶다면 button:active 셀렉터 사용.

2. Hover
   : 버튼을 hovering하는 상태의 모습을 설정하고 싶다면 button:hover 셀렉터 사용.

3. focus
   : 키보드로 선택했을 때의 모습을 설정하고 싶다면 focus를 사용. 예를 들어, input 태그로 텍스트를 입력할 수 있는 창을 만들고 input:focus 셀렉터를 사용해 background-color를 지정해주면, 텍스트 입력창을 클릭해 작성할 때 그 창의 색이 변한다.

4. visited
   : 링크에만 적용된다. a:visited 를 사용해주면 그 링크를 방문한 후의 모습을 설정할 수 있다.

5. focus-within
   : focused인 자식을 가진 부모 엘리먼트에 적용되는 것. 가령, input 자식들을 가진 form 부모가 있다 하자. 이 input들 중 하나가 focused, 즉 키보드로 선택될 때 그 부모의 상태를 설정하는 셀렉터. form:focus-within 이라고 적어주면 된다.

states를 다른 엘리먼트와 연계해서 사용할 수도 있다.

• 예를 들어,

  form:hover input {
  background-color: sandybrown;
  }

form이 hover 되었을 때 input 태그의 배경색을 샌디브라운으로 바꾸라는 명령이 된다. 이때 input이 form의 자식 태그여야지만 명령이 수행된다.

• 이런 식으로 결합도 가능하다.

  form:hover input:focus { background-color: sandybrown;
  }

form이 hover가 되고, input이 focus 되었을 때 배경색을 샌디브라운으로 바꾸라는 명령.

# Pseudo Selectors 3 - placeholder

실제로 존재하는 element들은 아니지만, 스타일링을 할 수 있게 해준다.

1. ::placeholder
   input::placeholder 셀렉터를 사용하면 placeholder를 스타일링할 수 있게 해준다. 이렇게 하지 않고 input 자체의 텍스트 색을 변경한다면, placeholder의 색은 그대로고 input에 적는 텍스트의 색만 변경될 것이다.
   이런 식으로 안에 들어가 있는 글씨들이 placeholder.

2. ::selection
   : 마우스를 드래그해서 셀렉한 부분이 어떤 모습으로 보일지를 설정할 수 있게 해준다. 가령 p::selection 셀렉터를 써 background-color를 yellowgreen으로 지정해주면, p 안에서 드래그 하는 것들의 색이 아래와 같이 yellowgreen으로 바뀐다.
   

3. ::first-letter/::first-line
   : 첫 번째 글자/줄의 모습을 설정할 수 있게 해주는 셀렉터.
   p::first-letter 셀렉터를 쓰면 p 안에 들어간 텍스트의 첫 글자의 모습에 대해 명령할 수 있다.

# Combinators

(rf. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
Combinators는 셀렉터 사이의 관계를 설명해준다.

Four different Combinators in CSS

1. descendant selector (space)
   ex. "div p span"은 div 안에 있는 p 안에 있는 span을 모두 고르는 셀렉터

2. child selector (>)
   ex. "p > span"은 p의 direct children인 span을 고르는 셀렉터

3. adjacent sibling selector (+)
   ex. "p + span"은 p의 바로 다음에 오는 같은 계급의 span을 고르는 셀렉터. 다만, 바로 다음에 오는 게 아니라 p와 span 사이에 다른 태그가 끼어있다면 적용되지 않는다.

4. general sibling selector (~)
   ex. "p ~ span"은 p 다음 어디에든 위치한 같은 계급의 span을 모두 선택하는 셀렉터.