YoonStudyNote

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..

1. 전체 선택자(Universal Selector) (요소 내부의)모든 요소를 선택 * { color : red; } 2. 태그 선택자(Type Selector) 태그 이름으로 요소 선택 li { color : red; } 3. 클래스 선택자(Class Selector) HTML class속성의 값으로 요소 선택 .hey { color : red; } 4. 아이디 선택자(ID Selector) HTML id속성의 값으로 요소 선택 #hey { color : red; } 1. 일치 선택자(Basic Combinator) 동시에 만족하는 요소 선택 span.orange { color : red; } 오랜지 2. 자식 선택자(Child Combinator) 자식 요소를 선택 (실질적으로 스타일링이 적용되는거..

1. CSS @import를 이용하여 외부문서로 CSS를 불러와 적용하는 방식 즉, 는 html에서 외부 링크를 가져오는것이지만, @import는 CSS에서 외부 CSS를 가져올때 사용하는것이다. /* common1.css */ @import url("./common2.css"); /* common2.css */ div{ color : red; font-size : 20px; } 다음과 같이 입력이 된다면, common1.css는 common2.css의 내용을 들고왔다는 것이다. @import html에서 외부 링크를 가져오는것 CSS에서 외부 CSS를 가져오는것 병렬방식 호출 직렬방식 호출 한꺼번에 호출하기 때문에 시간이 단축됨 CSS에서 작업이 끝난 후에 다음 CSS가 호출이 되기때문에 시간이 오래 ..

1. CSS 기본 문법 CSS문법은 HTML보다 더 쉽다. 아래 예시처럼 선택자, 속성, 값이 있으며 무엇을 의미하는지 이해하는 것으로 문법은 충분하다. div{ font-size : 20px; color : red; } /*다음과 같이 이해할 수 있다.*/ 선택자{ 속성 : 값; 속성 : 값; } 2.선택자의 역할 선택자는 HTML에 스타일(CSS)을 적용하기 위해서 HTML의 특정한 요소를 선택하는 사인이다. 적용할 스타일을 속성(color)과 값(red, blue)으로 나타내고 적용할 대상(h1, p)을 선택자로 나타낸다. 제목.. 본문.. h1 { color: red; } p { color: blue; } /*빨강 글자색(CSS, color: red;)을 저기 제목(HTML, )에 적용하겠어!” ..