CSS 2일차

1. 문자열 속성 선택자

• ~= : 여러 속성값 중 하나라도 일치하면 선택
  ex) div[name ~= aaa] {
  background-color : greenyellow;
  }
• |= : "-"기호 앞쪽 단어가 일치하는 요소를 선택
  ex) div[class= |= "str"] {
  color : red;
  font-weight: bold;
  }
• ^= : 특정값으로 시작하는 요소 선택
  ex) div[class ^= "class"] {
  background-color: black;
  color : white;
  }
• $= : 특정값으로 끝나는 요소 선택
  ex) div[class $= "class2"] {
  font-size: 30px;
  }
• = : 특정값을 포함하는 요소 선택
  ex) div[name = "2"] {
  border : 3px solid blue;
  }
  

2. 일반 구조 선택자(순번 : 뒤에서 앞)

• first-child : 형제 관계의 요소 중 첫번째 요소
  ex) #test1 > p:first-child {
  background-color: red;
  color: white;
  }
• last-child : 형제 관계의 요소 중 마지막 요소
  ex) #test1 > p:last-child {
  background-color: orange;
  }
• nth-child(수열) : 형제 관계 요소 중 지정된 수열번쨰 요소를 모두 선택
• nth-last-child(수열) : 형제 관계 요소 중 뒤에서부터 지정된 수열 번쨰 요소를 모두 선택

3. 형태 구조 선택자(순번 : 앞에서 뒤)

• first-of-type : 같이 선택된 형제들 중에서 첫번쨰 요소
• last-of-type : 같이 선택된 형제들 중에서 마지막 요소
• nth-of-type(수열) : 같이 선택된 형제들 중에서 수열번째 모든 요소
• nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열번째 모든 요소

4. 부정 선택자(not) : 선택자1:not(선택자2)

• ex) test3 > li:not(:nth-of-type(3n)) {
  background-color : aqua;
  }

5. 기타 선택자

• only-child : 특정 요소의 자식이 하나밖에 없을 때 선택
• only-of-type : 특정 요소의 자식 중 지정된 형태와 같은 자식요소가 하나만 있을 때 선택
• empty : 자식 요소가 없는 요소를 선택
• 여러 선택자 동시 선택
  ex) #test4-1, #test4-2, .test4-3 {
  css 코드 ;
  }
• 특정 요소 내부에 있는 특정 클래스만 선택하기
  ex) #test5-1 .c5 {
  css 코드;
  }
• 클래스가 여러개인 요소만 선택
  ex) .test.c6 {
  css 코드;
  }

6. CSS 선택자의 우선순위

• 1순위 : css속성 : 속성값 !important;
• 2순위 : inline-style 속성
• 3순위 : 아이디 선택자
• 4순위 : 클래스 선택자
• 5순위 : 태그 선택자

7. 레이아웃(layout)

• 화면 배치 방법(형식) : display 속성
  block : 화면을 수직 분할, width/height 속성 사용 가능
  inline : 화면을 수평 분할, width/height 속성 사용 불가능
  inline-block : inline의 수평분할 + blick 크기 조정
  none : 화면에 요소가 표시되자 않으나 존재하고 있는 상태
  flex : 요소의 정렬되는 방향, 요소간의 간격을 유현하게 처리하는 형식
  visibility : hidden (투명 O)

8. 요소의 영역(여백) 관련 속성

• content 영역 : 요소의 내용이 작성되는 영역
• padding 영역 : content 영역과 border 영역 사이
• border 영역 : 요소의 테두리가 지정되는 영역
• margin 영역 : 다른 요소와의 간격을 나타내는 영역
• padding 속성
  값 1개 : 상하좌우
  값 2개 : 상하, 좌우
  값 3개 : 상, 좌우, 하
  값 4개 : 상, 우, 하, 좌
• border 속성 : border속성은 상하좌우 방향을 각각 별도로 지정할 수 없음
  값 1개만 작성 가능한데 상하좌우 전부를 적용
• box-sizing 속성 : border, padding, width, height 속성을 포함한 사각형을 만들 수 있음
  ex) #box-sizing {
  border: 10px solid black;
  padding: 20px;
  width: 300px;
  height: 300px; box-sizing: border-box;
  }

9. 배치 관련 스타일(position)

• position : relativ: (상대적인)
  지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성
• position : absolute; (절대적인)
  기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함
• position : fixed; (고정된)
  항상 고정된 위치에 요소를 배치함.