내가 보려고 정리한 CSS정리 part.1

CSS Reset

---

body { margin: 0; padding: 0; }

css선언방식

---

1. 내장방식
2. 링크방식(병렬방식)
   • link는 HTML에서 외부의 css를 가져오는 방법

   <link rel="*" href="./style.css">

3. @import 방식(직렬방식)
   • import는 css에서 외부의 css를 가져오는 방법
   • 앞의 css가 불러와지고 세팅이 완료되어야만 다음의 css가 불러져 올 수 있다.

선택자

---

1. 기본선택자

1. 전체 선택자 : 요소내부의 모든 요소 선택

   * {
   	color: red;
      }

2. 태그 선택자 : 태그가 *(div, span, ul)등등인 요소 선택

   div {
   	background-color: red;
      }

   • 단독으로 사용할 경우 활용도가 많이 떨어지는 단점

3. 클래스 선택자 : HTML의 class속성이 *인요소 선택

   .title {
   	color: black;
          }

   • 사용빈도 높음

4. Id 선택자 : HTML Id속성이 *인 요소 선택

   #frog {
   	color: green;
          }

   • 클래스 선택자처럼 중복사용 불가능

2. 복합선택자

1. 일치선택자 : A와 B를 동시에 만족하는 요소 선택

   span.orange {
   		color: orange;
                }

2. 자식 선택자 : A의 자식요소 B를 선택

   ul>.orange {
   		color: orange;
               }

3. 후손(하위) 선택자 : A의 후손요소 B선택

   div .orange {
   		color: orange;
                }

   • 선택자 사이에는 띄어쓰기를 해주어야 함
   • 조상요소에는 부모요소도 포함됨

4. 인접형제 선택자 : A의 다음 형제요소 B하나만 선택

   .orange+li {
   		color: orange;
               }

   • class가 orange인 요소 다음의 li tag를 가진 형제요소에 css 적용

5. 일반형제 선택자 : A의 다음 형제요소 B를 모두 선택

   .orange~li {
   		color: orange;
               }

   • class가 orange인 요소 다음의 li tag를 가진 형제요소 모두에 css 적용

3. 가상 클래스 선택자

1. hover : 요소에 마우스가 올라가 있는 동안에만 요소 선택

   a:hover {
   	font-size: 24px;
       	}

2. active : 요소를 마우스로 클릭하는 동안에만 선택

3. focus : 요소가 포커스 된 동안에만 요소 선택

4. first child : 요소가 형제요소 중 첫번째라면 선택

   .fruits li:first-child {
   			font-size: 12px;
               		}

   • 작은 부분 모두에 클래스명을 설정하기 귀찮거나 어려울때 종종 사용함

5. last child : 요소가 형제요소 중 마지막 요소라면 선택

6. nth child : 요소가 형제요소 중 n번째 요소라면 선택

   .amount p:nth-child(1){
   			border-color: blue;
               		}

7. nth-of-type : 요소의 타입과 동일한 타입인 형제요소 중 요소가 n번째 요소라면 선택

   .fruits p:nth-of-type(2){
   			color: red;
               		}

   • type자리에는 태그의 이름
   • :nth-of-type의 앞에는 클래스가 들어가선 안 된다.

8. 부정 선택자 : S가 아닌 E선택

   E:not(S)

   • S에는 클래스 선택자 기입 가능
     

4. 가상요소 선택자

• HTML에 가상의 요소를 생성해 제공하는 역할

1. Before : 요소 내부의 앞에 내용을 삽입

   ul li::before {
   		content: ''; //이 속성을 작성하지 않으면 화면에 표시가 안 됨!!!! 내용 없어도 꼭 적기!! 
           font-weight: bold;
           background: tomato;
           	}

2. after : 요소 내부의 뒤에 내용 삽입

5. 속성 선택자

1. attr : 속성 attr을 포함한 요소 선택

   [disabled] {
   		opacity: 0.2;
               }
   
   [type = password] {
   		color: red;
           	  }

   • 이름을 짓지 않고 주어진 속성을 선택해 기회비용을 향상
   • [ 속성=값 ] 을 이용해 좀 더 자세하게 찾을 수 있다

2. attr ^= value : 속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택

   [class ^= "btn-"] {
   		border-radius: 2px;
           	  }

   • class명이 btn으로 시작하는 요소 모두 해당

3. attr $= value : 속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택

   [class $= "success"] {
   		color: green;
           	      }

   • 클래스 값이 success로 끝나는 것 해당

상속

---

• 위의 속성이 하위 요소들에게 적용
• 종류: font, color, text, letter 등 글자를 다루는 속성들

우선순위

---

• 같은 요소가 여러 선언의 대상이 될 경우 어떤 선언의 css 속성을 우선 적용할 지 결정하는 방법

1. 명시도 : 명시도 점수가 가장 높다

1. !important : 가장 우선
2. 인라인 선언방식 : 유지보수 제약이 있음
3. id 선택자
4. class 선택자 : 가상 클래스 포함
5. tag 선택자 : 가상요소 선택자 포함
6. 전체 선택자
7. 상속 : 부정선택자 :not() 포함

2. 선언순서 : 가장 나중에 해석

3. 중요도 : 명시도는 '상속' 규칙보다 우선

• !important가 다른 것보다 중요