기억의 DataBase

width: 100px; w:100 + tab height: 100px; h:100 + tab width: 100%; w:100% + tab margin: 10px; m:10 + tab padding: 10px; p:10 + tab .box + tab #box + tab ul.list + tab list1 list2 list3 list4 list5 .container>ul.list>li.list-item*5>a{list$} + tab VSCode 기준(tab)으로 더 다양한 emmet은 https://emmet.io/

우선순위 color div { color: black; } #red { color: red; } .blue { color: blue; } * { color: white; } body { color: turquoise; } 결론은 인라인으로 style 속성을 추가한 yellow가 적용 이유는 CSS 명시도 점수에 따라 우선순위가 결정되기 때문이다 !important > inline 방식(1000점) > id(100점) > class(10점) > tag(1점) > *(0점) > 상속(-) 명시도 점수의 기준은 위와 같음 명시도 점수가 총합이 높은 경우가 먼저 적용되고, 점수가 같은 경우 뒤에 선언된 경우가 적용 (선택자들의 점수를 더함 - 내장방식과 링크 방식 둘 다 계산) 상속 부모내용자식내용 p { co..

딸기 사과 오렌지 망고 .fruits li:first-child { color: red; } .fruits li:last-child { color: red; } /* n번째 요소를 선택 */ .fruits li:nth-child(n) { color: red; } /* 2번째 요소 이상을 모두 선택 */ .fruits li:nth-child(n+2) { color: red; } /* 짝수 요소들을 선택 */ .fruits li:nth-child(2n) { color: red; } *해석할때 오른쪽(몇번째 자식)에서 왼쪽(어떤 요소)으로 해야 정확 (조건의 몇번째 자식요소가 어떤 요소다 이런식으로) 1 /* 선택 */ 2 3 3-1 3-2 3-3 3-4 4 .box div:first-child{ color:..

가상 요소 선택자(선택요소::before/after) 선택요소 내부 내용의 앞/뒤에 content(text/url/image)를 삽입 /* ul>li{$}*5 + tab */ 1 2 3 4 5 /* content 뿐아니라 스타일도 적용가능 */ ul li::before { /* content라는 속성 필수(content: ""라도 적어줘야 함) */ content: "Num : "; font-weight: bold; color: royalblue; } ul li::after { content: url("https://heropy.blog/css/images/logo.png"); } 속성 선택자(해당하는 속성을 가진 요소를 선택) 이름을 따로 짓는 수고를 덜 수 있음- class를 부여 할 필요 X suc..

div > ul {} div li {} li:nth-child(3) + li {} li:nth-child(2) ~ li {} 복합 선택자 (조건 선택요소) 부모요소 > 자식요소 : 바로 다음 요소 상위요소 하위요소 : 바로 다음 요소는 아닐 수 있음 선택요소 + 인접형제 : 바로 다음 형제요소 선택요소 ~ 일반형제 : 선택요소 다음 모든 형제들 .box { width: 100px; height: 200px; background: salmon; } .box:active/hover { transition: 0.4s; width: 200px; background: red; } input { width: 100px; outline: none; border: 1px solid lightgray; padding: ..

인라인 방식 인라인 내용 위와 같이 요소 내에 직접 style을 적용하는 것으로 변경시 하나하나 다 바꿔줘야 하기 때문에 지양된다. (js로 조작되는 경우는 사용됨) 내장 방식 HTML의 head 태그 내에 style을 작성하여 해당 html 파일 내에 적용하는 방식으로 재사용에 적합하지 않다. (쓰기 제일 애매한듯...) 링크 방식 가장 권장되는 방식으로 변경과 유지보수 모두에 용이하다. *세가지 모두가 쓰였을 때 적용의 우선순위 인라인 방식 > 내장 방식 > 링크 방식 (링크 방식을 기본으로 하고, 필요한 경우 인라인 방식을 쓰는게 BEST?)