webomakase 님의 블로그

선택자is 선택자- 같은 스타일을 여러 태그에 한번에 적용하고 싶을 때 사용- 최근에 발표된 선택자- 복잡한 선택자를 조금 더 간단하게 바꿔줌. [기본형]- :is(선택자1, 선택자,2 선택자3...) {속성 : 값;} has 선택자- 부모 태그가 특정 자식 태그를 가지고 있는지 체크함. [기본형]- 선택자:has(B)

선택자7. 속성 선택자- 태그 중 특정 속성을 포함하고 있는 태그를 선택할 때 사용 [기본형]- 선택자[속성]: 선택된 태그 중 속성명과 일치하는 속성을 가진 태그만 선택 - 선택자[속성 = 값]: 선택된 태그 중 속성과 값이 모두 일치하는 태그만 선택 - 선택자[속성 ~= 값]: 선택된 태그 중 지정한 속성값이 단어로 일치하는 태그를 선택 - 선택자[속성 |= 값]: 선택된 태그 중 지정한 속성값이 하이픈을 포함한 단어로 일치하는 태그를 선택. 속성값이 해당값으로 시작하거나 해당 '값-' 으로 하이픈으로 이어진 단어도 선택하겠다는 의미 - 선택자[속성 ^= 값]: 선택한 태그 중 지정한 속성값으로 시작하는 태그를 선택 이때 값은 한 단어로 일치해야 함. - 선택자[속성 $=값]: 선택한 태그 중 ..

선택자4. 구조 선택자- 부모 태그안의 형제 관계 중 특정 태그를 선택하고 싶을 때 사용- 형제 태그가 모두 동일한 태그일 때 사용 가능 [기본형]- 선택자 : first-child: 형제 관계 중 첫 번째 태그를 불러옴. - 선택자 : last-child: 형제 관계 중 마지막 태그를 불러옴. - 선택자 : nth-child (수열 또는 수식): 형제 관계 중 특정 태그를 불러옴. 부모 태그와 자식 태그가 동일하면 부모 태그 또한 계산됨. - 선택자 : nth-last-child (수열 또는 수식): 형제 관계 중 뒤에서 특정 태그를 불러옴. 부모 태그와 자식 태그가 동일하면 부모 태그 또한 계산됨. - 선택자 : only-child: 부모 태그안에 하나뿐인 자식 태그를 선택할 때 사용 * 수열- ..

선택자1. 자손 선택자, 후손 선택자- 자손 선택자 : > 로 표기. 부모 태그의 바로 아래계층의 태그- 후손 선택자 : 공백으로 표기. 부모 태그안의 모든 자식 태그 [기본형]- 자손 선택자 : 부모태그A > 자식태그B: 선택자A의 바로 아랫계층의 자식 선택자B를 선택 - 후손 선택자 : 부모태그A 자식태그B: 선택자A 안에 있는 자식 선택자B를 선택 2. 동위 선택자- 동위 관계(형제 관계)에서 뒤에 위치한 태그를 선택할 때 사용- + 는 형태그의 바로 아랫줄의 동생태그 1개만 불러옴. 만약 바로 아랫줄에 해당 태그가 없다면 쓸 수 없음.- ~ 는 형태그 뒤에 있는 모든 동생태그를 선택할 때 사용함. [기본형]- 태그A + 태그B : 형태그 A의 바로 뒤에 있는 동생태그 B를 선택- 태그A ~ ..

flex 속성특징- '컨테이너' 안의 자식 박스들을 정렬하는 속성- 기본값은 가로 방향- '부모 박스'에 flex를 적용해야 함.- 자손요소까지만 적용된다.- 하위 정렬속성을 사용해도 '부모 박스'에 flex를 적용해야 함.- 부모보다 자식들의 넓이 총 합이 클 경우, 자식들의 넓이를 무시하고 무조건 한줄로 정렬하는 것이 기본값 [기본형]부모박스{ display : flex;} 하위 정렬 속성특징- 반드시 부모 박스에 display : flex;가 있어야 적용 가능- 자식들의 넓이, 높이를 유지하고 싶을 때 사용함.- 동일한 간격을 두어 배치하고 싶을 때도 사용함. 1. justify-content : 가로 정렬 속성 [속성값]- flex-start : 기본값. 왼쪽 정렬- flex-end : 오..

아이디 선택자 - 1순위.- 스타일이 맨 뒤에 있어도 이 속성 먼저 적용됨.- # (아이디를 불러올때 쓴다)#heading {  color: red;}  클래스 선택자 - 2순위.- 태그 선택자보다 속성이 먼저 적용됨.- . (클래스를 불러올때 쓴다).title {  color: green;}  태그 선택자 - 마지막 순위.- 우선순위가 가장 낮음- 초기화 시 많이 쓰임h2 {  color: blue;}  CSS(Cascading style sheets)- HTML과 함께 웹 표준의 기본 개념- 뼈대에 디자인을 입히는 역할- 태그의 크기, 색상, 위치 등을 제어 및 적용