🦴HTML & CSS

keyframe이란? CSS에서 사용할 수 있는 예약어입니다. 애니메이션의 이름을 생성하고, 그 애니메이션이 각 단계별(프레임별)로 수행할 코드를 작성할 수 있습니다. 다음은 애니메이션을 사용할때 작성하는 구조입니다. div { animation-name: ; /*애니메이션의 이름을 지정합니다.*/ animation-duration: ; /*애니메이션의 시작에서 끝까지 도달하는 시간을 정합니다.*/ animaition-timing-fuction: ; /*애니메이션의 속도 곡선을 지정합니다.*/ animation-delay: ; /*애니메이션 시작 지연을 지정합니다.*/ animation-iteration-count: ; /*애니메이션의 재생횟수를 지정합니다.*/ animation-direction: ; ..

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) 선택자의 어떻게, 어떤 것을 바꿀지 나타냅니다. 속성값 선택자를 얼마나 바꿀지 ..

1. HTML 이란 HTML이란 웹페이지의 구성요소를 표현할 때 사용되는 지배적(아직까지 절대적으로 필요한)인 마크업구조 언어이다. H -> Hyper T -> Text M -> Markup L -> Language 2. HTML의 문법 구성요소 내용입니다. 위에 보이는 바와 같이 , => 이 부분을 태그(Tag)라고 부릅니다. 그리고 앞부분을 시작태그, 마지막을 종료태그라고 합니다. 내용입니다. => 이부분 전체를 요소(Element)라고 합니다. 요소 요소는 크게 세가지로 나눌 수 있습니다. -블락 요소 다른 블락 요소를 포함할수도 있으며, 인라인 요소 역시 포함할 수 있습니다. 또한 블락 요소에는 원래 태그가 내포하고 있는 의미가 있는 태그가 있는데, 이를 시멘틱 태그(Sementic tag)라고 ..