html, css, bootstrap38 6.8 login form part one placeholder 색 변경 placeholder의 색을 변경하거나 디자인을 바꾸고 싶다면, ::placeholder 선택자를 사용하면 됩니다. :focus CSS :focus 의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다. transition 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있습 ease ; 천천-빠름-천천 linear ; 등속 ease-in ; 천천-보통 ease-out ; 보통-천천 ease-in-out ; 천천-보통-천천 cubic-bezier ; 커스텀 steps ; 뚝뚝 끊어 보여준다 2022. 11. 23. css_flex 다시정리 https://d2.naver.com/helloworld/8540176 flexbox의 구성 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성된다 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다. display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 된다 flex item은 주축(main axis)에 따라 정렬된다. 주축의 방향은 flex container의 flex-direction 속성으로 결정한다. flex-direction 속성을 따로 지정하지 않으면 기본값인 row가 적용된다. 속성값 row는 주축의 방향을.. 2022. 11. 21. css_transition 1. transition : 바꿀 대상 transition : backgroun-color 4s eas-in-out, color 5s ease-in-out ; all 5s ease-in-out : 모든 대상에 효과를 준다 - 태그 자체가 생겨 난 곳에 적용해야 한다. ex) a:hover {} 적용되지 않음 - 상태에 따라 바뀌는 요소가 있을 때 사용 ex) hover, active, focus.. 2. ease-in-out :브라우저에게 변화 방법을 알려줌 linear - 변화 그래프가 직선 ease-in 시작과 끝이 빠름 ease0out 시작과 끝이 느림 ease-in-out- 시작이 빠르고 끝이 느림 all : 변화요소를 한번에 다룸 all 뒤에 소수 요소만 추가해도 작동 ex) transition.. 2022. 11. 11. css_states 1. active: 대상을 클릭하고 있는 상태 2. hover: 마우스가 대상위에 있을 때 3. focus : active와 비슷하나, 키보드로 선택되었을때 4. visited : 링크에만 적용되며, 방문한적이 있을 때 5. focus-within: focuse 된 자식을 가진 부모 엘리먼트의 상태. ex. form은 그 자식인 inputdl focus가 되면 form의 모습을 바꾼다 6. 다른 엘리먼트와 연계사용이 가능하다. - 부모의 state에 따라 조정 form: hover input{ background-color : teal; 부모인 form 이 hover일 경우 input의 백그라운드 컬러를 변경 } - 부모와 자식의 state에 따라 조정 form:hover input:focus{ back.. 2022. 11. 11. css_position position position : fixed 초기위치는 고정 위치되었던 위치다. top, left, right, bottom 요소를 수정하면 가장 상단으로 다른 레이어로 이동한다. position : static(default) - 박스를 처음 위치한 곳에 둠 fixed : 처음 위치한 곳에서 스크롤 상관없이 고정, top,bottom,left,right로 이동할 수 있으나 새로운 레이어에놓임 relative : 박스가 처음 위치한 곳을 기준으로 이동 absolute : 가장 가까운 부모 엘리먼트에 position:relative를 추가하면 그 부모 위치를 기준으로 이동, 아닐 시 body 기준으로 이동 2022. 11. 11. css_flexbox flex (원하는 만큼 만들어 낼 있다) 1. 자식 엘리먼트를 움직이려면 부모 엘리먼트를 flex container로 만들어야 함. -> ex body 아래 div가 있다면 body 태그에 display : flex 해주어야 함 그 아래 원하는 속성 추가 - justify-content ; space-between, center 등 빈공간을 줄 지 속성 지정가능 2. justify-content는 주축(main axis 수평) align-item는 교차축(cross aixs)로 움직인다 주축과 교차축을 설정하는 것 : flex-direction (row가 default) flex-direction : column 이면 주축과 교차축의 수직 수평이 뒤바뀐다. column reverse, row-revers.. 2022. 11. 11. 이전 1 2 3 4 ··· 7 다음
