8.21 HTML/CSS/JQuery 공부

before after 하면 inline요소
inline요소는 값을 안 주면 크기가 없다

가운데를 기점으로 퍼지기
.gnb a:before {
  content: '';
  position: absolute;
  background-color: crimson;
  height: 1px;
  width: 1px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: .3s;
}

.gnb a:hover:before {
  /* left: 0; */
  width: 100%;
}

글자 사이 간격 주기 hover 할때
letter-spacing: 3px;

Checkbox 만들기(글씨 클릭해도 체크 되기)
<label>
      <input type="checkbox"> 약관을 충분히 이해했으며 동의 합니다.
</label>

더 선호
<input type="checkbox" id="agree-check">
    <label for="agree-check"> 약관을 충분히 이해했으며 동의 합니다.</label>

배경 위치(수평 수직)
 background-position: left center

radio에는 속성 name 있어야함

checkbox, radio 디자인 fontawesome 사용

클릭하는 느낌 주기 active(누르는 동안 행동)
form input[type=checkbox] + label:active:before {
  transform: scale(0);
}

background-image: url(images/snow-photo.jpg);
background-repeat: no-repeat;
background-position: center center;

배경의 흰 부분 다 제거하고
background-attachment: fixed;

input 클릭 시 강조 안되게 outline:none 사용

placeholder는 CSS3버전 이후여서 ::사용
.search input[type=text]::placeholder

placeholder 클릭하여 사라지게 할려면 focus 속성 주기
.login input[type=email]:focus::placeholder

opacity 사라지게만 함
visibility: hidden 사라지고 존재도 없어짐
같이 쓰자