css 선택자, flex, 아코디언 메뉴(appearance)
학원 수업 내용 Day5
오늘 진짜 알차고 보람찼다!
flex는 예습해서 어느정도 알고 있었지만,
자유시간이 주어져서 flex 이용해서 header부분만 만들었는데 반응형까지 하고싶어서 진짜 급하게 했다.
정신 날아가는 줄 알았다…
그리고 다양한 css 선택자를 배웠는데 유용하게 쓸 수 있을 것 같다.
/* A+B : A 바로 뒤에 있는 B 선택 */
h2+ul{
color: blue;
}
/* A~B : A 뒤에 나오는 모든 연결된 B 선택 */
h2~ul{
color: blue;
}
/* 대괄호 : 해당 속성 선택 */
input[type='email']{
color: blue;
}
a[target]{ /* 속성 입력 안하면 유무만 확인 */
color: blue;
}
a[target='_blank']{
color: blue;
}
h2[class^='main']{ /* ^='값' 값으로 시작하는 속성 선택*/
color: blue;
}
마지막에 이런 선택자를 활용한 예제(FAQ)도 만들었는데,
이 부분이 너무 신선한 점이 많았다.
radio input 체크유무로 효과들을 바꿨는데, position을 적극적으로 사용해서 준 효과들이 신선했다.
appearance: none;도 오늘 처음 배웠다.
인풋 요소를 존재는 하지만 보이지만 않게 하는 속성이라고 한다.