선택자

새로운 선택자, 사용법 공부!

1. * 에스터리스크!

알고있던 에스터리스크의 사용법은 전체 테그 선택자였다.
추가로 알게된 사용법은 상위선택자의 자손요소를 모두 선택하는 것이 가능하다 것이다.

.class * {}
//형태로 사용이 가능하며, boder, margin등 모든속성이 각각의 태그에 모두 적용되므로 사용시 주의해야함.
//(class는 예시 선택자)

2. +, ~

.article + p {} 
//article 바로 다음에 위치한 형제요소중 p태그를 선택, 
.article ~ p {}
//article 다음에 위치한 형제요소중 모든 p태그를 선택, 

3. nth-child()

.class div:nth-child(2n)
// class의 자식중 짝수번째이고, div태그만 선택.
.class div:nth-child(2n+1)
// class의 자식중 홀수번째이고, div태그만 선택.
.class div:nth-child(n)
// class의 자식중 div태그만 선택 (n을 'n'으로 사용시).
.class div:nth-last-child(n)
// class의 자식중 마지막에서 n번째 태그선택.

4. not

p:not(#only)
//p엘리먼트중 id가 only인 엘리먼틀를 제외하고 선택.
//소괄호 안의 선택자를 제외하게됨.

Flex

• display: flex 속성은 부모요소에 적용
  flex-direction : row(defaulte), column
• 자식요소는 flex속성 사용
  flex:0 1 auto; (default)
  flex: <shrink 수축지수> <basis 기본크기> // 단축속성
  grow,shrink 속성 단위 없음.
  basis값은 grow값이 기준이하일때 적용된다.
  grow 값이 0이어야 grow를 통한 n분할이 정확하다.

HTML

<textarea></textarea>
태그를 이용하여 다수의 줄을 입력 할 수 있는 창을 생성할 수 있음.
CSS 에서 resize : none 속성을 추가하여 크기 못하게 할 수 있음.