keyframe이란? CSS에서 사용할 수 있는 예약어입니다. 애니메이션의 이름을 생성하고, 그 애니메이션이 각 단계별(프레임별)로 수행할 코드를 작성할 수 있습니다. 다음은 애니메이션을 사용할때 작성하는 구조입니다. div { animation-name: ; /*애니메이션의 이름을 지정합니다.*/ animation-duration: ; /*애니메이션의 시작에서 끝까지 도달하는 시간을 정합니다.*/ animaition-timing-fuction: ; /*애니메이션의 속도 곡선을 지정합니다.*/ animation-delay: ; /*애니메이션 시작 지연을 지정합니다.*/ animation-iteration-count: ; /*애니메이션의 재생횟수를 지정합니다.*/ animation-direction: ; ..
🦴HTML & CSS/style.css
hover란? 가상 클래스(Pseudo Class)의 한 종류입니다. 그렇다면 가상클래스는 또 뭘까요? 특정한 상태를 가진 요소를 선택하여 스타일을 적용하는 선택자 입니다. 유저와의 상호작용에 따라 요소의 상태를 선택하여 스타일을 변경할 때 사용합니다. hover의 역할은 마우스를 롤오버 했을 때, 요소의 상태를 변경하는 것입니다. (롤오버? 마우스를 요소 위에 올려둔다는 말입니다.) 그리고 사용할 때는 ( : ) 콜론을 붙입니다. button:hover { background-color : red; } 그렇다면 이 호버 기능을 사용하는 이유가 뭔지 생각해보겠습니다. 보통 마우스를 통해 웹과 상호작용을 하게 되는데요. 그럴때마다 보여질 효과를 적용하기 위해 hover를 사용하게 됩니다. UX 관점에서 보..
1. Image, Input 요소 IMG HTML -src: 이미지 소스의 URL 혹은 경로를 명시합니다. -alt: 이미지를 보여줄 수 없을 때, 이미지를 대체할 텍스트를 명시합니다. CSS .logo { width: 50px; height: 50px; object-fit: cover; object-position: left; } -object-fit: fill의 경우 기본값입니다. 이미지 크기 맞게 종횡비를 변경시킵니다. cover의 경우 이미지가 종횡비를 유지하고 이미지크기에 맞게 잘립니다. contain의 경우 이미지가 종횡비를 유지하고 이미지 크기 속에 들어가게 됩니다. none는 조정되지 않습니다. -object-position: center, left, right으로 이미지의 보여질 프레임을..
1. 가상 클래스, 요소 가상 클래스 별도의 클래스를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있습니다. .example:hover { background-colror: Blue; // example 클래스에 마우스를 롤오버 했을 때 } .example:active { font-size:24px;//example 클래스를 마우스를 클릭했을 때 } .example:focus { border: 2px solid Black; //example 클래스가 포커스됐을 때 } .example span:first-of-type { font-size:30px; // example 클래스의 span태그를 가진 처음 요소 } .example span:last-of-type { font-size:5px; // exam..
1. CSS 란? css는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다. C -> Cascading S -> Style S -> Sheets 마치 html로 콘크리트를 쌓아올렸다면, css는 그 외관을 꾸미는 것이라고 할 수 있습니다. 2. CSS 적용방법 인라인 스타일 CSS의 인라인스타일입니다. 내부 스타일 시트 외부 스타일 시트 span { display: block; } 스타일 적용 순서 인라인 스타일 -> 내부 스타일 시트, 외부 스타일 시트 -> 웹 브라우저 기본 스타일 3. CSS 기본 문법 선택자 선택자는 스타일을 적용시킬 html의 태그, 클래스, id 등의 위치를 가리킵니다. 속성(Property) 선택자의 어떻게, 어떤 것을 바꿀지 나타냅니다. 속성값 선택자를 얼마나 바꿀지 ..