[HTML&CSS] Media Queries ( UPDATE 2023 - 05 - 31 ) Media Queries Media Query Media query는 반응형 웹을 만들 때 사용한다. (웹사이트를 보고 있는 사용자의 스크린 사이즈 기준) @media screen and (max-width: 0px) {} 을 이용하여 스크린 사이즈 별로 달라보이도록 만들 수 있다. - min 사이즈와 max사이즈를 조절하여 스크린 사이즈 별로 CSS 적용 device toolbar 브라우저의 개발자도구 inspect에서 device toolbar를 이용하여 기기 별 사이즈로 브라우저를 볼 수 있다. orientation: landscape 가로모드 적용 orientation: portrait 세로모드 적용 Me..
[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 ( 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 ( 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를 프로그래밍언..
[웹] 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 ( 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..
