'양콩테크' 태그의 글 목록 (2 Page)

[HTML&CSS] Animations

2023.06.01

[HTML&CSS] Animations ( UPDATE 2023 - 05 - 31 ) Animation - 1 Animation 마우스를 위로 올리거나 transition 없이 원하는 만큼 계속 재생되는 애니메이션을 만들 수 있다. 애니메이션을 만들기 위한 규칙은 @ketframes 라고 적고, 그 다음에 애니메이션의 이름을 정한다. A에서 B까지 움직이는 애니메이션 만들기 @keyframes 이름{} 만든 후 안에 A지점 부터 B지점까지의 애니메이션을 선택 from{A} to{B} @keyframes coinflip { from {transform: rotateX(0);} to {transform: rotateY(360deg);} } /* 이렇게 내 에니메이션을 설정하고, 애니메이션을 줄 속성에 작성하..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[HTML&CSS] Transition , Easing Function, Transformations

2023.06.01

[HTML&CSS] Transition , Easing Function, Transformations ( UPDATE 2023 - 05 - 31 ) Transition transition '어떤 상태에서 다른 상태로의 변화'를 보여주는 애니매이션이다 rule1> transtion은 state가 없는 요소에 붙어야한다. 만약 state 자체에 transition을 준다면 변화를 준 상태(예를들면 hover)를 그만 두었을 때, 바로 변화 이전의 상태로 돌아간다. rule2> transtion은 state가 기준이 되어 바뀌는 것이다. 상태가 바뀌는 요소가 있을 때 transition이 가능하다. 예시) hover, active, focus ... Easing Function Easing Function 브..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[HTML&CSS] Colors , Variables

2023.06.01

[HTML&CSS] Colors , Variables ( UPDATE 2023 - 05 - 30 ) Colors 색상 체계 (color system) 1) hexadecimal color (16진수 컬러) #2ecc71와 같은 색상 코드 2) rgb (디자이너들이 많이 씀) 각각 red, green, blue를 의미. rgb(0,140,200)의 경우엔 red 값이 0, green 값이 140, blue 값이 200이라고 이해할 수 있다. 3) rgba rgb와 동일하지만 a가 포함된 형태. 'a(alpha)'는 투명도를 의미 0(투명)~1(불투명) 사이의 값으로 조절할 수 있다. Variables (=custom property) variables (=custom property) css를 프로그래밍언..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[HTML&CSS] Combinator, Pseudo selectors - 2

2023.06.01

[HTML&CSS] Combinator, Pseudo selectors - 2 ( UPDATE 2023 - 05 - 27 ) combinator, pseudo selectors div span div 안의 span div > span div 안의 직계 span p + span p ‘바로 다음’으로 오는 span p ~ span p ‘다음’ 으로 오는 span ( 바로 뒤에 오지 않을 때 씀) input:required input에 required 있는 경우만 적용 input[type=“password”] input에 password 타입만 적용 input[placeholder=“username”] placeholder가 username 인 경우만 적용 input[placeholder~=“name”] pl..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[HTML&CSS] Position , Pseudo selectors - 1

2023.05.31

[HTML&CSS] Position , Pseudo selectors - 1 ( UPDATE 2023 - 05 - 26 ) Position Position 의 디폴트는 static position : fixed; 스크롤을 올리든 내리든 초기에 세팅한 그 위치에 고정됨. 상단 메뉴 바 등을 고정할 때 많이 씀. position : fixed; (주의점) top, bottom, left, right 중 하나라도 수정하면, 별개의 레이어처럼 겹쳐질 때, fixed를 제일 상위로 하고 겹쳐짐 posititon : relative; 위치 조금 옮기고 싶을 때 사용. 처음 위치한 곳을 기준으로 상하좌우로 수정함. (부모 요소 무시X) position : absolute; 상하 좌우를 이동 하고 싶을 때 사용함. 부..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

14 자바스크립트로 회원가입폼 유효성 검사하기

2023.05.31

자바스크립트로 회원가입폼 유효성 검사하기 aleart 이용해서 회원가입 폼의 유효성을 검사했다. 지금까지 내가 공부한 것들을 최대한 담으려고 했다. 오늘 처음 자바스크립트를 건들기 시작했다. 아예 코드를 새로 짜기보다는, 작성했던 HTML과 CSS 코드들을 재활용하는게 나을 것 같아서 코드들을 다시 살펴봤다. 그동안 이런저런 시행착오(삽질)를 겪은 덕분인지 며칠 차이인데도 개선해야할 부분이나, 오타 등이 눈에 잘 보였다. 오늘 작성한 코드들도 개선할 날이 또 오겠지? 코드 양콩 코딩스쿨 회원가입 - - 00000000 인증번호전송 3:00 인증완료 지역을 선택하세요. 서울 경기도 제주 충청도 전라도 경상도 여성 남성 이전 페이지로 가입하기 *{ box-sizing: border-box; } body{ d..

티스토리툴바