너무 많아서 머리 아파 ㅠ (position / pseudo selector)

뭐가 이리 많을까? 아 그리고 너무 이론만 배우는 느낌이라 빨리 클론을 해보고 싶다. 약간 실전에서 적용하구 싶은데 이것저것 다양한 키워드만 배우는 느낌이라 솔직히 학습하기 조금 부담스럽다. 재미도 좀 떨어지고. 그래도 잘 견뎌보자.

지금 팥빙수 먹으면서 개발일지 쓰고있다. 이 슈퍼에서 파는 팥빙수 아는가? 나 훈련소있을때 먹고 처음이다. 훈련소에서 진짜 맛잇게 먹었는뎈ㅋㅋㅋ 설빙 저리가라였다. 

 

오늘 배운 내용

 

1. position -> 위치를 움직일때나 고정시킬 때 사용

 

ex) div {position fixed;}

-> 이거하면 스크롤 내려도 계속 상자가 보인다. 굉장히 유용하다고 생각한다. 왜냐하면 스크롤 내려도 계속 유지하게끔 하고 싶을 때가 있으니까

 

움직이게 만들 수도 있다.

ex) {position fixed;

        top: 5px;

        left:

        right:  }

 

2. position static -> 레이아웃이 박스를 처음 위치에 두는 것

 

3. position relative -> 박스를 조금씩 옮길 때 사용

ex) .mini { position: relative;

                      top: -10px;

                      left: -10px;}

 

4. position absolute -> 얘도 옮길 때 사용. 하지만 부모가 relative가 아니면 생뚱 맞은곳으로 떠나감. 

 

5. pseudo selector -> html코드 안건드리고 css만으로 선택 가능하게 꾸미는게 가능 

 

ex) div: first-child {backround-color: tomato;} -> 첫번째 적용

      div: last-child {        "                                    }  -> 마지막 적용

 

예를 들어 두번째것만 조정하게 하려면

span : nth-child (2) {background-color: teal;}

두개 적용하려면

span: nth-child(2), span:nth-child(4) {background-color: orange;}

홀수 혹은 짝수만 사용하려면

span: nth-child (even) {background-color:orange;}

 

6. p span {color: orange;} -> p안에서 span을 찾아라

엄청 유용하다고 생각했다. 이제 뭐안에 들어가있을 때 바꾸고 싶을 때 사용하면 되니까.

 

7.  div > span -> div 바로 밑자식 span에게만 적용시킨다.

 

8. p + span {text-decoration : underline;} -> 형제 관계에서 p 다음에 오는 span에 적용한다는 뜻

 

만약 바로 뒤가 아니라 다음꺼에 적용을 하고 싶으면 

p~span 을 써야한다. 

 

9. input: required ->이런식으로도 부르네

 

10. input [type= "password'] {background-color: orange;} -> password인 input들 다적용

 

11. input [placeholder~= "name] { } -> input placeholder에서 name을 가지고 있는 것들 적용가능