8.15 HTML/CSS 공부

before after는 inline 요소

border에 animation을 줘서 크기 늘렸다가 줄였다가 못함 -> before,after 사용

center 정렬 방법
display: inline-block

float: left;
text-align: center

부모 display: flex
자식 flex: 1; text-align: center;
------------------------------------
display: flex 하면 div도 block에서 inline-block으로 바뀜

부모 입장에서 overflow 되어있으면
overflow: hidden

relative가 absolute보다 우선 순위권 높다

부모 요소 position: relative
자식 요소(before, after) position: absolute

html 내부에 자체 속성 만들기
표준형식: data-xxx=" "
css에서 사용
ex) content: attr(data-xxx);

img,input,form,button은 before/after 가질 수 없음

<input type="text" placeholder="">

css
input[type=text]

focus는 input에만 사용할 수 있는 가상 Class

인접 선택자 -> 자기 밑에 있는 ele들 바꾸기(html 상 밑에 있어야함)

gradient 주기
background: linear-gradient(방향, 시작색상, 종류색상)

animation-fill-mode : both -> animation이 끝나면 그 끝난 상태 유지
이것을 안하면 다시 0%위치로 간다

nth-child는 자식인 것만 하는것이 아니다
해결책 : nth-of-type

filter: grayscale(1) 회색으로 바꿈 색을(0-1) 안되는 브라우저 많음

transform-origin: ->어디를 기준으로 잡고 무슨 행동하냐

햄버거 버튼
<input type="checkbox"> 이 형식으로
그래야 클릭하고 또 클릭할때 돌아옴
radio로 하면 한번 클릭하면 끝 변화를 못 줌
id를 줘서 input의 자식과 같이 행동하게 한다
checked -> 자동 check 상태

label은 inline 값

+ 인접
~ 형제

radio 버튼은 동일한 name값을 가져야 같이 행동함

position absolute가 되면 inlineblock이 되어서 width 안 주면 아무것도 안 보임
그래야 text-align: center 가능