A-Z FrontEndDeveloper

CSS 애니메이션2CSS 애니메이션 가속도 함수의 이해linear, ease 가 가장 많이 사용되고, 나머지 속도 함수들은 사용 빈도가 많이 낮다. linear : 일정한 속도로 애니메이션 재생 - 가속도 없이 일정하게 움직이는 애니메이션ease : 기본 값, 애니메이션이 느리게 시작했다 빨라지고, 다시 느리게 끝남.시작 부분에서는 더 짧은 시간에 빨라지며, 끝나는 부분에서는 더 긴 시간 동안 느려짐. - 점점 빨라졋다 서서히 멈추는 애니메이션을 원하면 easeease-in : 애니메이션이 느리게 시작함.ease-out : 애니메이션이 느리게 끝남.ease-in-out : 애니메이션이 느리게 시작했다 빨라지고 마지막에는 느리게 끝남.시작과 끝나는 부분의 속도 증가/감소가 대칭임.step-start : s..

모든 HTML 요소는 HTML 문서 안에서 차지하는 영역이 있고,영역의 끝 부분에 다른 요소와 맞닿는 경계가 있다.Padding: 요소 내부 컨텐츠와 경계선 사이의 여백을 패딩(Padding).Margin: 경계선에서 다른 HTML 요소, 또는 부모 요소와의 사이에 지정하는 외부 여백을 마진(Margin).Border: HTML 요소의 테두리는 보더 또는 테두리라고 하고 요소 경계에 다양한 선 속성을 부여할 수 있다.각 속성의 사용방법은 4가지 속성을 한번에 적용하는 것으로 코드를 작성했다.padding, margin, border-width 사용법은 다 동일하다.div{ padding: 2px 3px 2px 4px // top → right → bottom → left}하지만, border-wid..

CSS 애니메이션 - 1대표적으로 "transform", "transition", "@keyframes", "animation" 키워드가 있다.CSS로 기초적인 애니메이션을 구현하는데 주로 사용하는 속성.CSS 애니메이션의 속성은 블록 요소에 적용되는 것을 기본으로 한다.블록 요소가 아닌 요소들은 블록 요소로 감싸서 블록 요소를 애니메이션 하는 것이 기본적인 사용법Transform요소를 이동하거나, 크기를 변경하는 요소의 크기, 위치, 색상 등의 속성 값을 바꾸는 동작을 하고, 시간 개념은 없다."transform" 속성은 요소의 속성을 변경하는 동작을 하지만, 트랜스폼 속성만으로는 시간 순서에 따르는 애니메이션이 일어나지는 않습니다.변형이 적용된 결과만이 보여 지며, 시간 순서에 따른 애니메이션 효과를..

입력 요소 가상 클래스:checked체크한 입력 요소을 선택라디오버튼 체크박스 한정:disabled사용 불가 상태입 입력 요소를 선택:enabled사용 가능 상태인 입력 요소를 선택disabled로 설정하지 않은 입력 요소는 모두 "enabled".:focus포커스가 위치한 입력 요소를 선택마우스 클릭, 또는 탭 키로 활성화된 입력 요소 1개를 선택.:in-range, :out-of-range특정 범위 안의 값을 가진 입력 요소를 선택입력 값의 범위를 가지는 입력 요소 한정으로 사용되며,입력 요소 속성 "min", "max" 값으로 범위를 지정함.ex> 다음 코드에서 range을 벗어나는 값을 입력시 border가 빨간색으로 변한다. Enter your age (18-65): ..

클래스, 아이디 이름으로 선택div[class="클래스이름"]div[id="아이디"]/* 선택자 설명 : 의 자식인 태그들이 선택 */ul[class="menu"] li{ color: red;}시작하는 이름으로 선택div[class^="클래스이름일부"][id^="아이디일부"]/* 예시: 아이디가 "side-"로 시작하는 요소를 선택하고, 선택된 요소와 그 하위 요소들에 빨강색으로 텍스트 색상이 상속되어 적용. */[id^="side-"]{ color: red;}Css 선택자 고급 - 가상 클래스(Pseudo Class):first-child, :last-child부모 요소의 전체 자식 요소들 중 첫 번째, 또는 마지막 요소를 선택하는 가상 클래스이다.자식 요소들의 순서를 기준으로 첫 번째, ..

가상 요소(Pseudo Element)가상 요소는 실제 HTML 페이지에 요소가 존재하지 않지만, 요소가 추가된 것과 같은 효과를 내는 CSS 선택자입니다.CSS에 컨텐츠("content") 속성을 가지는 일부 가상 요소는 웹 브라우저 개발자 도구에서도 하나의 요소로 처리되며, HTML 소스 보기에서 별도로 가상 요소가 함께 표시가 된다.가상 요소는 총 5개.가상 요소는 블록 요소에만 사용할 수 있고, 블록 요소에 추가의 요소가 블록 요소 앞/뒤에 덧붙는 형태로 구현된다.::before요소 앞에 가상 요소 'content' 속성으로 입력한 내용을 표시."::before" 가상 요소는 속성으로 "content"가 있으며, "content" 속성에 표시할 텍스트 내용이 있어야 가상 요소가 표시된다.HTML ..

속성 선택자(Attribute Selector)속성 선택자는 태그, 클래스, 아이디로 선택한 요소들을 태그 속성 값으로 구체적으로 필터링을 하기 때문에 선택 범위를 구체화할 수 있다.[속성명]📌 속성이 있는 모든 요소를 선택한다.체크박스 / 라디오 버튼의 체크 속성을 사용하면 체크된 입력 필드 라벨만 CSS를 적용할 수 있다.값의 유무는 상관없이 속성명의 여부에 따라 결정됨.ex> GitHub을 제외한 태그들만 스타일이 적용된다.Attribute Selector ExampleExampleGoogleOpenAIGitHuba[target] { color: green; text-decoration: none;}[속성명=값]📌 속성이 있고, 정확히 일치하는 속성값이 있는 모든 요소를 선택한다.속성..