!important

코드내 중복된 선택자로 인해 css가 겹치는 경우가 있다.

#box {
	width: 200px;
	height: 200px;
	background: red;
}
.
.
.
.

#box {
	width: 200px;
	height: 200px;
	background: blue;
}

이 경우 먼저 쓰인 선택자가 뒤에 쓰인 선택자에 의해 덮어 씌워지므로 웹페이지에는 box선택자들이 blue색상으로만 출력 될것이다.
이때 !important를 사용하면, 최우선으로 css가 적용되어, 선택자가 겹치는 부분을 해결하는 등, 작업에 도움을 줄수있다.

#box {
	width: 200px;
    	height: 200px;
      /* 이 경우 뒤에 중복되는 box선택자의 background:blue를 무시한다. */
   	 background: red !important ;
}
.
.
.
.

#box {
	width: 200px;
    	height: 200px;
        background: blue;
}

:focus

웹페이지의 input요소에 마우스나 키보드를 클릭,tab했을때 받는 요소를 나타내준다.

:focus는 포커스를 받은 요소 자체에만 해당한다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 :focus-within을 사용한다.

/* foucs시 외곽선을 안보이게 한다. */
.box > input:focus {
	outline: none;
}

css 클래스화

자주 적용,사용해야하는 css코드를 클래스로 만들어 html에 직접 적용시킬수있다.

/* etc */

.m10 {
	margin: 18px 0 10px 0;
}

.mt100 {
	margin-top: 100px;
}

.wh460 {
	width: 460px;
}

html
<div class="join_group mt100 wh460">
  .
  .
  .
</div>

display: flex

css의 한계를 넓히기 위해 사용되는 속성. 요소의 이동, 정렬에 다양하게 적용 할수있다.

https://flexboxfroggy.com/#ko 을 통해 flex연습이 가능하다.

• justify-content
  flex 요소들을 가로선 상에서 정렬한다.

  flex-start (default), flex-end, center, space-between, space-around, space-evenly

• align-items
  flex 요소를 세로선 상에서 정렬한다.

  flex-start, flex-end, center, baseline, stretch(default)

• flex-direction
  정렬할 방향을 지정한다.

  row(default), row-reverse, column, column-reverse

• order
  flex요소의 순서를 지정한다.

  integer 사용
  ex)

  #div {
  	display: flex;
  }
  .yellow {
  	order: -1;
  }

• align-self
  지정된 align-items 값을 무시하고 flex요소를 세로선 상에서 정렬한다.

  flex-start, flex-end, center, baseline, stretch

• flex-wrap
  flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬한다.

  nowrap (default), wrap, wrap-reverse

• flex-flow
  flex-direction과 flex-wrap을 간략히 한 속성이다.

  ex)

  #pond {
  	display: flex;
  	flex-direction: column-reverse;
  	flex-wrap: wrap-reverse;
  }
  
  /* 위 코드와 같은 결과를 출력 */
  /* 속성값 사이에 빈공간을 준다. */
  #pond {
  	display: flex;
  	flex-flow: column-reverse wrap-reverse;
  }
  

• align-content
  세로선 상에 여분의 공간이 있는 경우 flex컨테이너 사이의 간격을 조절한다.

  flex-start, flex-end, center, space-between, space-around, space-evenly, stretch (default)