Css의 특징
html에 바로 적용할수도 있지만 코드도 길어지고 다른 페이지에 적용할때마다 코도를 적어줘야 한다.
- css파일을 따로 생성해 놓으면 링크를 써서 적용할수 있다.
<link href="저장위치" rel="stylesheet"/>- 그리고 css 파일은 cascading 구조로 가장 밑에 있는 코드가 적용된다. (중복 되는 상태에서)
margin, padding
-
margin은 box의 border로 부터 바깥에 있는 공간이다.
-
padding은 box의 border로 부터 안쪽에 있는 공간이다.
margin: px px px px ;
- 위 오른쪽 아래 왼쪽 순으로 적용 (시계방향)
margin: px px ;
- 상하 좌우 적용전체 적용시 사용
* { } ;pisition,opacity
position:fixed; 고정되는 태그. 화면을 움직여도 따라온다.
opacity: 0.5; 반투명 설정하는 태그 . 해당 태그가 (설정 수치 만큼) 반 투명해 진다.
:nth-child
:nth-child(even){}; 짝수인 태그들 변화 시킬때 씀
:nth-child(odd){}; 홀수인 태그들 변화 시킬때 씀
:nth-child(n){}; n번째 태그 변화 시킴
:nth-child(2n){}; 짝수인 태그들 변화 시킴
:nth-child(2n+1){}; 홀수인 태그들 변화 시킴
:nth-child(3n){}; 세개씩 태그 변화 시킴' > : 바로 밑 child에게 적용된다.'
div > span span : 이 많은 경우 div 바로밑에 있는 첫번째 span에 적용된다.
'+ 안에 속한 태그가 아닌 다음에 오는 해당 child에 적용된다.'
'div + span div : 안이 아닌 그다음에 있는 span에 적용'
~ 해당 태그가 바로 뒤에 오지 않을때 사용
div ~ span
button
button:active 마우스를 누른 상태에서 변화
button:hover 마우스를 올린 상태에서 변화
button:focus 키보드로 선택되었을때 변화
button뿐만 아니라 a태그에도 적용된다.
a:visited 방문했을시 (링크에만 적용된다.)focus-within 같은 태그중에 키보드 , 마우스가 올라갔을 경우에 변화 (부모에 적용된다.)
form:hover input:focus 이런식으로 사용 가능하다.
이런 식으로 하면 마우스가 올려져 있으면서 input에 있는 것을 focus가 적용된다.
::placeholder placeholder에 적용하고 싶을때
::placeholder{color:red;};
::selection 마우스로 드래그 했을때 변화주고 싶을때
::selection{background-color:tomato; 🍅 }combinator
p span {} : 부모 자식 관계
p > span {} : 부모와 바로 밑 자식 관계
p + span {} : 바로 다음에 오는 형제 관계
p ~ span {} : 바로 다음에 오지 않아도 되는 형제 관계
attibute
input[type="word"] {} type="word" 인 input만을 선택
input[type~="word"] {} "word" 를 포함하는 input을 선택
input[type$="word"] {} 끝에 "word" 가 오는 input을 선택
input[type^="word"] {} 앞에 "word"가 오는 input을 선택state
:hover 커서가 올라간 상태
:acive 클릭할 때 동작
:focus 키보드로 선택한 경우
:visited link에서 쓰이고 사이트를 방문한 이력이 있을 경우에 색이 변함
:focus-within 자식들 중 하나라도 focus상태에 있다면 부모가 바뀔때 쓰임pseudo element
::placeholder placeholder만을 꾸밀때 사용
::selection 드래그 했을때
::first-letter 앞글자에 변화를 줄때 사용
::first-line 첫줄에 변화를 주고 싶을때 variable(custom properties)
:root 라는 element에 변수(variable)를 추가 하는 것이다.
:root은 기본적으로 모든 document의 뿌리가 되는 것이다.
출발점이 되는 것이다. 여기에 변수 이름을 쓰고 --main-color라고 변수 이름을 주고
이것을 document의 root에 저장하는 것이다.
--를 써주고 변수 이름을 써줘야 한다.
변수는 --2개 그리고 변수 이름 빈공간이 있다면 -로 채워야한다.
물론 컬러로만 저장 할수 있는게 아니다!
--default-border:2px solid var(--main-color);
p{
background-color:var(--main-color);
}
a{
background-color:var(--main-color);
}animation
@keyframes 애니메이션 이름{
from{ 적용할 태그 작성
transform:rotateY(0);
}
to { 적용할 태그 작성 ex:) transform: rotateY(360deg);
}
}사용하기
img{
animation: 애니메이션 이름 재생시간 옵션 ex:) animation: 2s ease-in-out slidein;
}무한으로 반복되게 하려면 뒤에 infinite를 붙여 주면 된다.
-Media query는 오직 css만을 이용해서 스크린의 사이즈를 알수 있는 방법이다.
(웹사이트를 보고 있는 사용자의 스크린 사이즈)
-@media screen and (max-width: 00px) {}이를 이용하여 몇 픽셀 부터는 달라 보이도록 만들수 있다.
이를 통해 스크린의 사이즈를 알수 있다.
-
min 사이즈와 max 사이즈를 조절하여 단계별로 만들면, 스크린 사이즈의 범위를 알수 있다.
-
브라우저에서 inspect의 device toolbar 를 이용하여 핸드폰 기종 별 사이즈로 브라우저를 볼수 있다.
-
media screecn에 (orientation:landscape)를 이용하면, 세로모드인지 가로모드인지도 구별할수 있다.
