[포스코x코딩온] 풀스택 부트캠프 1주차 정리 -3 (CSS)

가상 선택자:

a:hover {마우스를 갖다 댔을 때 효과 적용}

a:active {/*클릭하는 동안 (press down하고 press up하는 동안)*/}

a:focus {/*클릭 해서 활성화 된 동안*/}

/*----------------------------------------------------------*/

.fruits span:first-child {/*'fruits' 의 하위 요소인 span이 class의 첫 번째 자식일 경우 해당 값 적용*/}

.fruits span:last-child {/*'fruits' 의 하위 요소인 span이 class의 마지막 자식일 경우 해당 값 적용*/}

.fruit *:nth-child(2) {/*class fruit의 2번째 하위요소에 css적용 (*를 넣어서 응용 가능하다)*/}

.fruit *:nth-child(2n) {/*(n은 0부터 시작해서 끝까지 적용, 짝수번째 선택)
n은 0부터 시작하지만 children은 1부터 시작하므로 0번째 children의 css는 적용되지 않는다. 
고로 line 15의 parameter가 2n+2가 되어도 무방하다. */}
 
/*----------------------------------------------------------*/

.fruits *:not(span) {/* 'fruits의 하위 요소인 모든 요소 중, span 태그가 아닌 모든 태그에 적용}


.box::before { /*가상 요소 선택자, box의 textcontent 앞에 추가 할 수 있다.*/
  content: " /*빈 값이라도 넣어야 다른 css가 적용됨*/ "
}

.box::after { /*가상 요소 선택자, box의 textcontent 뒤에 추가 할 수 있다.*/
  content: " /*빈 값이라도 넣어야 다른 css가 적용됨*/ "
}

 

line-height로 행간의 크기를 설정할 수 있으며 container의 높이와 동일하게 설정하면 글자를 수직 정렬하는 효과를 가질 수 있다.

 

block-element VS inline-element

block-element  1. block element의 width는 부모 요소의 width와 같다. 2. padding과 margin을 줄 수 있다. 3. 한 line당 하나씩이다. (1번 특성이 원인이 된 것 같다.)

inline-element 1. 컨텐츠의 크기에 따라서 width와 height가 자동적으로 적용된다. (*img 요소는 inline-element지만 예외적으로 width 와 height 조정 가능.) 2. 좌우 padding과 margin만 줄 수 있다.  (*엄밀히 말하면 상하 padding과 margin을 줄 수 있지만 보이기만 하고 실제 높이로 적용되지 않는다. 즉, 다른 요소와 다  상쇄된다.) 3. 부모의 width가 허락하는한 한 line에 여러 개가 올 수 있다.

---

text-align은 해당 태그가 수평 정렬이 되는 것이 아니라
태그의 자식요소들 중에서 inline 속성을 가지는 요소들을 해당태그의 너비 기준으로 정렬하는 특성을 가지고 있다.

그래서 자식요소가 block일 때는 적용되지 않고 inline 요소일 때만 적용된다.
즉

<p> dummy text! </p>

에서 text-align: center; 가 적용되는 이유는

p 태그에서 "dummy text", text-content는 p 태그의 자식요소이고, text-content는 inline element이기 때문에 적용되는 것이라고 추론할 수 있겠다.

 

참고로 block요소를 수평 정렬하기 위해서는 좌우 margin을 auto로 설정하면 된다.

---

또한 마진 상쇄 현상은 상하 마진끼리, block element 끼리만 일어난다. 따라서 block과 inline-block 사이에는 일어나지 않는다.

 

덧붙여 자식 요소를 수직 정렬하기 위해 상하 margin을 설정하려 한다면 마진 상쇄 현상 때문에 적용하기 어렵다.

그러므로 수직 정렬을 하려면

 

1. 자식 요소를 inline-block으로 설정해서 margin을 준다. (이걸 쓴다면 좌우 margin도 직접 계산해야 한다)

 

2.1  display를 absolute로 설정해서 top을 (부모 height - 자식 height)/2 로 준다.

2.2 display를 absolute로 설정해서 top을 50%로 설정하고 transform: translate(0 -50%)를 준다.

      (*처음 50%는 부모의 height, 두 번째 50%는 자신의 height)

 

3. display를 flex로 하고 flex-direction에 따라 justify-contents나 align-items를 center로 주면 된다.

  (* flex-direction에 따라 자식 요소의 direction이 변하기 때문에 화면을 기준으로 둘 중 하나를 선택하라고 했지만, 자식 요소를 기준으로 말하자면 align-items가 수직 방향이다.)

 

이렇게 하면 될 것 같다.