beepbeep

1) transition-duration: n s transition의 시작부터 끝까지 걸리는 시간을 지정 2) transition-delay: n s transition이 시작될때까지의 시간을 지정 3) transition-timing-function : transition의 시간당 변형 속도를 조절 베지어 곡선?을 이용해서 시간당 변형 속도를 조절할 수 있음. * cubic-bezier()의 4개 파라미터는 각각 위의 p0, p1, p2, p3를 의미한다 - linear : 일정하게 / cubic-bezier( 0, 0, 1, 1 - ease(기본값) : 처음과 끝은 느리고 중간은 빠르게 / cubic-bezier( 0.25, 0.1, 0.25, 1 ) - ease-in : 점점 빨라지게 / cubi..

1) order : flex-container 내부의 item이 main-axis방향으로 배치되는 순서를 지정하는 속성 예) order : 1 기본값 0, 정수만 가능함(양수, 음수 가능) 2) flex-grow : item이 flex-container 내부에서 비어있는 공간을 메꿀 수 있도록 팽창하는 정도를 지정하는 속성 예) flex-grow: 4; * 기본값 : 0 * 여러 item에 지정한 경우, 각 item의 크기에 비례해서 팽창함 3) flex-shrink : flex-container가 줄어들 때 내부 item의 수축 정도를 지정하는 속성 예) flex-shrink: 0; * 기본값 : 1 * 여러 item에 지정한 경우, 각 item의 크기에 비례해서 수축함 * flex-wrap: nowa..

flex란? flex-direction flex-wrap justify-content align-items align-content 1. flex란? css의 flex 속성은 html문서의 레이아웃을 만들기 위해 고안된 속성입니다. flex는 크게 부모 요소인 flex-container와 자식 요소인 flex-item으로 구성됩니다. HTML 삽입 미리보기할 수 없는 소스 flex를 사용하기 위해 flex-container로 사용될 부모 요소 하나와 flex-item으로 사용될 자식 요소 다섯개를 준비했습니다. 요소는 기본적으로 block형식이라서 한 행을 전부 차지합니다. 그래서 세로로 배치되게 됩니다. 여기서 flex를 시작하고 싶다면 부모 요소인 flex-container에 display: flex..

선택자에도 우선순위가 있다! 만약 한 요소가 여러 선택자에 의해 선택되었고, 그래서 동일한 종류의 css 속성을 여러 개 적용받게 되었다면 선택자의 우선순위에 따라서 우선순위가 높은 선택자의 css 속성을 적용받는다 1. !important; 속성을 가진 css 효과 2. inline-style 직접 3. id 선택자 4. class 선택자 5. 태그 선택자 같은 우선순위 안에서는 가장 아래쪽에 위치한 효과가 적용된다. css 연습을 할 때 선택자의 우선순위를 신경쓰지 않아 css 효과가 원하는대로 적용되지 않는 경우가 있었다... 항상 우선순위에 주의해서 작성해야겠다.

가상 클래스 선택자 가상 클래스(Pseudo-class)는 요소의 특별한 상태를 가리키는 키워드입니다. 가상 클래스를 선택자와 함께 사용하면, 요소가 특별한 상태일 때 CSS가 적용되게 할 수 있습니다. 1. 일반 구조 선택자 2. 형태 구조 선택자 3. 부정 선택자 4. 반응 선택자 5. 상태 선택자 1. 일반 구조 선택자 선택자:first-child 해당 요소의 형제 요소 중 첫 번째 요소가 지정한 '선택자'와 같은 경우 선택합니다. 선택자:last-child 해당 요소의 형제 요소 중 마지막 요소가 지정한 '선택자'와 같으면 선택합니다. 선택자:nth-of-child(n) 해당 요소의 형제 요소 중 n번째 요소가 지정한 '선택자'와 같으면 선택합니다. 선택자:nth-of-last-child(n) n..

자식 선택자 후손 선택자 동위 선택자 1. 자식(자손) 선택자 부모 요소 > 자식 요소 자식 선택자는 특정 요소의 바로 아래 요소인 자식 요소를 선택하는 선택자입니다. ' > ' 기호를 사용해 양쪽 요소의 부모 자식 관계를 표현합니다. 자식 요소를 선택할 때는 태그, class, id, 속성 선택자 등을 사용할 수 있습니다. 강아지 강아지는 개과 동물입니다. 고양이 고양이는 고양이과 동물입니다. 판다 판다는 곰과 동물입니다. 위의 예시에서, 은 의 자식 요소입니다. 따라서 자식 선택자를 이용해 요소를 선택하고 싶다면 다음과 같이 작성할 수 있습니다. fieldset > ul{ font-weight: bold; } 그런데 자식 선택자는 부모 요소 바로 아래에 위치한 요소만을 선택할 수 있습니다. field..

CSS 선택자란? HTML 문서에 작성한 요소에 CSS효과를 적용하려면 효과를 적용할 특정한 요소를 선택해야 합니다. 이 때, 특정 요소를 선택하기 위해 사용하는 것을 CSS 선택자라고 합니다. 태그 선택자 id 선택자 class 선택자 속성 선택자 전체 선택자 안녕하세요. CSS를 공부하고 있습니다. 감사합니다. 2022년 10월 9일 드림 1. 태그 선택자 선택자의 종류에는 여러가지가 있는데, 기본적으로 태그 이름을 선택자로 사용할 수 있습니다. 예를 들어, 위에 보여드린 에서 태그로 묶인 문단의 글자 색을 바꾸고 싶다면 p{ color: red; } 태그 이름인 p를 적고 중괄호를 연 후 CSS코드를 작성하면 p태그의 글자 색이 빨간색으로 바뀌게 됩니다. 이 때 CSS 효과는 문서 내에 있는, 동일..