2021.10.12

1. 어떤 웹사이트를 보든 박스로 볼 수 있도록

2. 셀렉터

3. 사용할 박스를 원하는 위치에 원하는 사이즈로 배치할 수 있어야 함

    -> display, position

 

block : 상자인데 한줄에 하나 /inline : 컨텐츠 자체만을 꾸며주는 것 (물건 자체)

inline-block : 상자인데 한줄에 여러개를 진열할 수 있는 상자

div     span

 

상자를 꾸미는데는 width, height이 있지만,

꼭지점으로도 가능하다. (top-left, top-right, bottom-left, bottom-right)

 

css는 지정해 놓은 default value가 있다 : static (html에서 지정 해놓은 순서대로 보여준다.)

 -> 박스를 이동하고 싶다??? position 값을  relative로 바꿔주면 되는 것임

 -> relative는 원래 있어야 하는 자리에서 상대적으로 left 몇, right 몇 등등 이동해주는 녀석임

     (원래있던 자리를 유지해 줌)

 -> absolute는 대상 태그가 몸담고 있는 상자를 기준으로 한다.

     (원래있던 자리에서 빠져나오기 때문에 주변에 있는 요소들도 재배치가 일어남)

      => 근접한 부모값 중에 position이 static이 아닌 요소를 기준으로 배치됨

           (한마디로 부모중에 position이 relative인 애만)

 -> fixed : 상자안에서 완전히 벗어나서 윈도우(웹페이지)를 기준으로 하는 녀석

 -> sticky : 원래있던 자리에 있는데, 스크롤을 해도 그 자리에 붙어있도록 만드는 애

 

요즘에는 css 기술이 좋아져서 jQuery나 부트스트랩이 필수가 아니라고 한다.

 -> 최신의 것을 익히는 습관을 들이자

그렇지만 브라우저마다 호환이 되는지 여부는 꼭 확인해봐야 한다 : MDN

MDN 말고도 https://caniuse.com/ 에서 확인해 볼 수도 있다고 함

css 프레임워크도 있음 : PostCss