YoonStudyNote

우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성(property)을 우선 적용할 지 결정하는 방법 3가지 방법이 있다. (명시도, 선언 순서, 중요도) 1. 명시도 점수가 높은 선언이 우선(명시도) 2. 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선(선언 순서) 3. 명시도는 '상속' 규칙보다 우선(중요도) -->즉, 상속은 간접적으로 스타일이 적용되기 때문에 우선순위에서 떨어진다. 4. !important가 적용된 적용된 선언 방식이 다른 모든 방식보다 우선(중요도) 1. 가장 중요(!important) 모든 선언을 무시하고 가장 우선 점수 : 무한pt div { color : red !important; } 2. 인라인 선언 방식(Style A..

.ecosystem에 적용된 색상이, 하위 요소들에게도 적용이 된다. (모두 그런것은 아니고 주로 text가 이러한 현상이 일어난다.) .ecosystem{ color : red; } 생태계 동물 호랑이 1. 강제 상속 상속되지 않는 속성(값)도 inherit이라는 값을 사용하여 "부모"에서 "자식"으로 강제 상속 시킬 수 있다. "자식"을 제외한 "후손"에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아니다. .parent{ position : absolute; /* 상속되지 않는 속성과 값 */ } .child { position : inherit; /* 강제 상속 받아 position : absolute;와 동일 */ }

1. atter^=value 속성 class을 포함하며 속성 값이 btn-로 시작하는 요소 선택 [class^="btn-"] { /*btn-으로 시작하는 모든 클래스 선택*/ font-weight : bold; border-radius : 20px; } Success Danger Normal 위의 CSS에서는 캐롯("^")을 사용해서 btn-으로 시작 하는 모든 클래스를 선택하게 만들었다. 2. attr$=value 속성 class을 포함하며 속성값이 sucees 또는 danger로 끝나는 요소 선택 [class$="sucess"]{ color : green; } [class$="danger"]{ color : red; } Success Danger Normal

1. attr 속성을 포함한 요소 선택 --> class, id에서 이름짓는건 개발자들에게 여간 힘든일이 아니다. 하지만 id와 class없이도 지정하고 스타일링 할 수 있다! .disabled{ opacity : 0.2; /* 20% */ } ****이것을 이렇게 바꾸면 된다. [disabled]{ opacity : 0.2; /* 20% */ } [type=password] { opacity : 0.5; color : red; } 모든 태그이름이 input이라서 구분이 어려울때 타입으로 지정된 속성으로 "type=password"로 입력해서 CSS설정 해 줄수있다.

주의!! 무조건 CSS에 content라는 요소가 있어야한다! content요소가 없으면 아무런 스타일이 적용되지 않는다. 가상클래스와 구분하기 위해 "::" 콜론을 두번사용해야한다. 1. before html 작성한 태그 앞에 CSS스타일을 입히는 것이다. ul li::before{ content : "숫자"; /*이부분은 작성하지 않으면 아애 안나온다*/ font-weight : bold; color : red; margin-right : 20px; } 1 2 3 4 5 6 7 8 2. after html태그 뒤에 CSS스타일을 사용하는 것이다. ul li::after{ content : "숫자"; /*이부분은 작성하지 않으면 아애 안나온다*/ font-weight : bold; color : red..

1. nth-of-type 태그이름과 동일한 타입인 형제 요소 중 n번째 요소라면 선택 .fruits p:nth-of-type(1){ /*p태그중에 첫번째꺼를 빨간색으로 하겠다*/ color : red; } **주의사항(오류)** .fruits .red:nth-of-type(1){ color : red; } 딸기 망고 사과 오렌지 다음과 같이 입력이 된다면, nth-of-type이 1이기 때문에 li태그중 딸기를 선택하게 된다. 하지만 딸기태그는 red라는 이름이 없기 때문에 오류가 된다. 2. 부정 선택자(Negation Selector) .fruits li:not(.red){ color :red; } 딸기 망고 사과 오렌지 클래스 red만 제외하고 전부 li태그를 빨간색으로 하겠다 라는 뜻이다.

1. .fruits의 첫번째 자식 요소가 p태그가 아니기 때문에 선택되지 않는다. .fruits p:nth-child(1){ color : red; } 딸기 망고 오렌지 사과 2. 후손 선택자가 모두 선택이 되기 때문에 1만 CSS처리 되지않는다. .box-group div:first-child{ color : red; font-weight : bold; } 1 2 3 3-1 3-2 3-3 3. 만약 div태그 1만 스타일링 적용하려면 수정해야 한다. 자식선택자로 수정해주면 된다. .box-group>div:first-child{ color : red; font-weight : bold; } 4. 만약 자식요소들의 태그가 다른상황인데 동시에 CSS 적용하고 싶다면? .box-group:first-chil..

1. First child 형제 요소 중 첫번째 요소라면 선택 .fruits li:fist-child{ color : red; } 딸기 망고 사과 오렌지 cf. 다음과 같이 후손 선택자를 많이 이용한다. 2. Last child 형제 요소 중 마지막 요소라면 선택 .fruits li:last-child{ color : red; } 딸기 망고 사과 오렌지 3. Nth child 형제 요소 중 n번쨰 요소라면 선택 (키워드 사용시 0부터 해석(Zero-base)) 2번째 요소만 선택 .fruits li:nth-child(2){ color : red; } 딸기 망고 사과 오렌지 2의 배수 요소들 선택 .fruits li:nth-child(2n){ color : red; } 딸기 망고 사과 오렌지 3번째 요소부..

이 선택자들은 이벤트와 느낌이 많이 비슷하지만, 이벤트와 관련이 없다. 이 3가지 케이스는 특이한 경우이다. 1. Hover 마우스(포인터)가 올라가 있는 동안에만 선택 a:hover{ font-weight : bold; font-size : 20px; } 그럼 마우스가 a태그위에 있을 시에만 CSS기능이 작동이 된다. 2. Active 마우스로 클릭하는 동안에만 선택 a:active{ font-weight : bold; font-size : 20px; } 3. Focus 포커스 된 동안에만 선택 input{ width : 100px; outline : none; border : 1px solid orange; padding : 5px 10px; transition : 0.4s; } input:focus..