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부모 요소의 전체 자식 요소들 중 첫 번째, 또는 마지막 요소를 선택하는 가상 클래스이다.자식 요소들의 순서를 기준으로 첫 번째, ..

":nth-" 가상 클래스로 필터링"nth-" 시작하는 Css 선택자는 선택 조건에 맞는 "n번째 요소(1부터 시작)"를 선택하는 Css 선택자이다.종류는 3가지뿐이지만, 몇 가지 트릭을 조합하면, 필요로 하는 요소들을 정확하게 선택할 수 있다. 타이틀 아이템 아이템 아이템 아이템 아이템이 코드 예시에서짝수 요소만 선택nth-child, nth-last-child 가상 클래스 선택자는 부모 요소의 모든 자식 요소 중 파라메터 조건식에 매치되는 요소를 먼저 선택하고, 그 다음에 자식 요소의 클래스/태그로 한정..posts .item:nth-child(2n).posts .item:nth-child(even)홀수 요소만 선택.posts .item:nth-child(2n+1).posts .item..

가상 요소(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;}[속성명=값]📌 속성이 있고, 정확히 일치하는 속성값이 있는 모든 요소를 선택한다.속성..

HTML하이퍼텍스트 문서를 기술하는 언어 또는 문서.HyperText: 서로 분산된 문서, 또는 내용들이 연결을 통해 하나의 전체 문서를 구성하는 구조를 말한다.Markup: 문서의 내용을 표현하기 위해 태그를 사용하고, 태그에는 다양한 속성들이 있으며, 이렇게 태그를 이용해서 문서를 기술하는 것이 마크업.HTML 문서의 기본 구조 이해HTML5 문서 규격인 HTML 문서임을 표시하는 태그 모든 HTML 문서의 태그를 품는 루트 태그로 모든 태그는 이 태그 안에 위치해야 한다. HTML 문서에 대한 기본적인 정보를 표시하는 여러가지 태그들이 오고, CSS도 올 수 있음.외부 CSS, JAVASCRIPT 파일을 연결하는 링크도 여기에 정의한다.이 안의 태그들은 웹 브라우저에서 내용이 출력되지 않는다. 실제..