css 정리 2(+미완)

반복.공통되는 style

css를 적용시키는 방법으로 1. html 에서 <link>의 href 속성을 이용  2. @import url 을 특정 css에 다른 css를 추가하는 법

css애서는 대쉬 2개(--) 를 앞에 붙이면 변수로 선언 가능 ex. --not-good   : not-good 이라는 변수   / css에서 변수를 사용할 때는 var(변수이름, 변수없을 경우 대안값) 형식을 이용 ex. u{ background-color: var(--warn, lightblue)    :  --warn 변수가 없으면 lightblue를 적용 ,   :변수이름   ----> 의 형태의 경우 모든 요소들에서 적용할 수 있는 변수

  특정 요소에서만 특정 css를 적용시키기 위해 {} 로 둘러 쌓는다. ex. u { --not-good: wavy underline orange}    : u 태그 에서 not-good에 해당하는 변수부분에 css 적용. 

  웹사이트 색조합 사이트 참고해서 만들

---

선택자 심화

가상요소를 사용할때는 : 가상요소   형식 이

속성값을 기준으로 선택, 특정 속성이 있는 요소 선택( ex. 속성값 없이 속성만 쓰이는 특정속성들,  disabled) , 속성값이 특정 텍스트를 포함하하는 요소(ex.  [class *= 특정 텍스트]{ 적용시킬 css}  ----> class 중 특정텍스트를 포함하는 모든 요소에 대해 css 적용) , 속성값이 특정 텍스트로 시작하는 요소(ex. 이전과 같은 형식에서 ^=특정 텍스트  의 경우 특정 텍스트로 시작하는 것들에 대해 css 적용), 속성값이 특정 텍스트로 끝나는 요소  들의 사용법 이해 ( 같은 형식에서 $=특정 텍스트  의 경우 특정텍스트로 끝나는 것들에 대해 css 적용)

특정요소 : 가상클래스   형식으로 여러가지 가상클래스 사용가능 ( ex. hover , active, radio 의 경우 checked의 경우 선택한 상황, radio 의 경우 기본상태는 enabled임 , 

탭으로 선택을 넘어가는 경우 보이기위해 focus-visible 이용 /   first-child 와 first-of-type 이 어떻게 다른지 이해

가상 클래스 mdn 문서 참고하며 작업해

html 에서    ::가상클래스   형식을 추가하고 ,  css에서 :: 가상클래스를 이용해 css에서 표현한 것을 html에서는 가상클래스 요소 외에는 안보이게 작성 가능 (마지막 예시 확인)

---

상속과 리셋  

상속은 부모요소가 갖고 있으면 자식들도 부모요소에 적용된 것을 그대로 가짐 

inherit /    initial은 브라우저가 각 속성에 정한 초기값 설정을 없애버리고 각 속성의 기본 초기값을 설정한다.

---

벤더 프리픽스

아직 나오지 않은 기능을 사용할때 접두사 사용

---

서체와 웹폰트

css폰트는 사용하는 사람 컴퓨터에 다운받아져 있어야 사용 가능하기에 만약 없을경우 font-family에 적은 순서대로 차례대로 적용

web 폰트는 서버에 저장된 서체를 불러올 수 있도록 함. 구글폰트, 눈누참고 이때 사용할때 라이센스 저작권 확인

구글폰트에서는 맘에 드는 폰트 고른후 select this style 누룬후 코드 복사

---

텍스트 심화

텍스트와 관련된 input,button,image 관련

white-space에서 자주 사용하는 걸로는 nowrap, pre   / text-overflow 에서 clip은 넘어가는 부분은 자른다는 의미, ellipsis는 넘어가는 부분은 ...으로 표시

---

float ,  clear 속성 

요즘사용되지 않는 속성 -----> 대안으로는 flex,   그니까 참고만 하고 필요할때 다시 와서 공ㅂ부 

float 된것들 끼리는 자리가 겹치지 않음  

---

Grid 레이아웃

fr(action) 단위는 gap을 제외한 것으로 화면속 고정된 %단위와 다르게 유동적으로 화면비율이 맞게됨 

부모적용 속성, 자식적용 속성 구분 // 겹치게 만들 수 있음

---

변형과 애니매이션

transform 에서 % 단위는 부모기준이 아닌 본인의 기준으로 따짐 그래서 어떤 요소를 가운데로 배치할때 유용히 이용, 왜냐하면 flex 에서는 분모기준이라 가운데로 옮기고자 하는 요소가 어떤것인지 미리 정해진게 아니면 사용할 수 없음. deg(ree)  /// 어떤 요소의 css효과가 바뀌면서 그 바뀌는 사이에 적용하는  간단한 애니메이션 적용 ex. 파워포인트 애니메이션 시각효과 

animation  != transition

---

적응형 vs 반응형 웹

적응형은 모바일, 컴퓨터용 각각 따로 제작 ex. 네이버,   반응형은 하나로 모바일,웹 둘다 적용되게  ex.애플

반응형 만들기 위해 '미디어 쿼리'  배워야함 

---

기타속성들  

1) clip, clip-path

2)scroll-snap