'YANGKONG TECH' 태그의 글 목록 (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] States , Pseudo elements

2023.06.01

[웹] States , Pseudo elements ( UPDATE 2023 - 05 - 30 ) States active 해당 요소를 마우스로 클릭 했을 때 효과를 적용 hover 마우스가 해당 요소 위를 지나갈 때 효과를 적용 focus 키보드로 선택 되었을 때 효과를 적용 visited 방문한 사이트일 경우에 효과를 적용 focus-within 부모 요소에게 적용. 자신의 자식 요소 중 하나가 focus되었을 때 효과를 적용 (자식 상태에 따라 부모 상태 바뀜) form:hover input form이 hover된 상태면 input이 바뀌는 것 (부모 상태에 따라 자식 상태 바뀜) form:hover input:focus form과 input의 상태 모두 충족해야 적용됨 Pseudo element..

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

[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; 상하 좌우를 이동 하고 싶을 때 사용함. 부..

티스토리툴바