CSS 전처리와 box-sizing

2022-07-24

계정을 바꿔서 다른 곳에 있던 글 옮겨왔다.

브라우저마다 기본으로 적용되어있는 스타일값이 있는데
이걸 모두 0으로 만들어주는 reset.css, 그리고 기본과 reset의 중간 느낌인, 약간의 스타일이 가미되어있는 normalize.css

--

box sizing엔 content-box와 border-box가 있다. 이름에서 알 수 있듯이 크기의 기준을 content 박스로 잡을 것인지 content 박스를 둘러싸고 있는 border box로 해야할 지 지정해주는 것인데, 사실 content-box로 쓸 일이 많을까...? 내 관점에서 본체는 border box인데 말이다ㅎㅎ

하지만 모든 item class마다 다 box-sizing 태그를 입력하기 귀찮으니까, *{} 로 스타일 태그를 입력해준다. 모든 코드에 이 속성을 입력한다는 의미다. 모든 코드에 적용하게 될 스타일이 뭐가 있을까? 개발 시작해봐야 알 수 있는 부분이겠지?ㅎㅎ

--

내가 디자인 하면서 개발자에게 가장 설명하기 어려워 하는 부분... (특히 반응형일 때)

박스의 너비 혹은 높이가

• fix
• hug-contents
• fill-container

이 셋 중 하나인데 각각 어디에 사이즈를 맞추는 건지 설명하기가 어려웠다. 물론 내가 말재주가 없는 탓이기도 함... 각각 유형의 사이즈를 개발단에선 어떻게 구현할까?

--

position이라는 태그에 대해 배워보도록 하자!

• static : 기본값
• relative : 자기 자신을 기준으로
• absoulte : 부모 요소를 기준으로
• fixed : 뷰포트를 기준으로
• sticky(+a) : 스티키 스크롤

박스를 보고 싶을 땐 border: 1px red 를 적용해보자! 다 보고나면 주석처리(ctrl+/)하면 됨!

fixed와 sticky는 얼필 비슷해보이지만, fixed는 뷰포트 기준으로 어떤 요소들보다 위에서 독불장군으로 붙어있다고 하면, sticky는 스크롤 뷰 안에서는 상대적으로 유동적으로 움직인다. 스크롤 안의 위치를 지정해주면, 그 자리를 벗어나지 않는다. (헤더와 네비게이션이 있다고 하면, 스크롤을 내렸을 때 헤더는 올라가고 네비게이션은 화면 상단에 위치하게끔 하고싶다면 sticky를 쓰면 된다. 지정해 준 위치에 이 요소만 못 지나가는 방어막이 설치됐다고 생각하면 쉽다.)