[1219 테킷] Box sizing, Position, Inset

개발 블로그를 지금까지 정리 안하고 올렸는데, 보미님처럼 내 언어로 풀어서 설명하면, 공부에 큰 도움이 될 것 같다는 생각이 들었다. 그래서 오늘은 블로그를 제대로 시작하기로 했다. 크게는 아니고, 하루에 3개의 개념이라도 제대로 정의내리는 것에 의의를 두겠다.

 

1. box-sizing

박스사이징이란 엘리먼트의 사이즈(넓이와 높이값)를 어떻게 계산하는지 결정하는 방식이다. 패딩과 마진을 적용할  때 박스 사이징을 사용하면 엘리먼트의 크기를 예측하기 쉬워진다.

엘리먼트에 width 값을 정해주면 보더 안쪽에 사이즈가 적용된다. border에 10px을 준 엘리먼트와 30px을 준 엘리먼트의 사이즈가 달라진다.

initial: content-box

content-box일 때

border-box 적용

border-box를 넣어주니까 border의 두께가 다름에도 불구하고, 크기가 같아짐.

 

패딩에 따라 헤더 사이즈가 달라지다 보니 적용한 것.

* {}

이 셀렉터를 통해 모든 크기를 보더 사이즈에 맞추어 적용하려고 한다.

높이 120이 유지 되면서 패딩도 포함되는.

- 가상요소와 메인 타이틀을 맞추려하고 싶을 수 있으나 변수가 많은 영역이라 조금은 유할 필요가 있다. 

 

 

 

2. Position

들어가기 전, negative margin과 transform(차지하는 공간은 그대로이고, 시각적인 이동)을 통해 움직일 수 있다. 하지만 궁극적으로, 큰 위치변화를 위해서는 position이라는 개념을 이해할 필요가 있다.

transform: translateX(-50px);

transform 사용 예시

static

posititon의 초기값으로 일반적인 문서의 흐름에 따라 배치된다.

 

relative

relative는 현재 자신의 위치를 기준점으로, 이동하는 걸 의미한다. left, top, right, bottom으로 이동한다. 그런데 relativ는 한계가 있다. 상대적으로 위치가 바뀌다보니 변수가 많다. 그래서 absolute가 등장했다. 

 

absolute

absolute가 적용되면 현재 위치에서 위로 뜬다. 다음과 같은 상태(opacity 적용)가 된다.

absolute는 뷰포트를 기준으로 계산한다. 

relative일때 left,top 0은 offset 개념이고

absoulte일 때 left,top 0은 뷰포트 기준에서 좌표만 가져올 뿐이지 고정은 아니다.

absolute는 최초의 containing block인 뷰포트를 버리기 위해 아버지에 position: relative를 넣어주면 된다. 상위 요소를 기준으로 위치를 찍는 것인데, 그럼 직계부모 하에서 움직인다. 새로운 컨테이닝 블럭을 relative를 통해 생성하는 것. position이 static이 아니니깐. *기준점을 만들고 싶은 요소가 조상 중에 있어야 한다. 

absolute는 인라인이 아니다. 그런 세상에서 완전히 벗어난 것. inline처럼 보이지만 inline과는 전혀 관계성이 없다.

 

fixed

못으로 박은 고정, 그래서 스크롤을 내려도 이동하지 않는다.

 

3. inset

.pos {

background-color: orange;

position: absolute;

inset: 0;

}

top, rigth, bottom, left의 축약 단축 속성. 자유도가 높다보니 여러 방면에서 사용하기 좋다.

 

/

 

그외 지식(지우고 싶었지만 은근 도움이 되는 것 같다.)

transform: translate(-50%, -50%);

현재 자기자신을 기준으로 50%에 해당하는 값을 가지고 옵니다. 

 

가상요소는 :: 콜론이 두 개

::before (콘텐츠의 바로 앞에 생성되는 자식 요소)

::after (콘텐츠의 바로 뒤에 생성되는 자식 요소)

 

flex box

가로 세로 가운데 정렬을 하려면 필연적으로(유일한 방법은 아니지만 최신+자유도가 높은 편) 플렉스박스가 요구된다.

 

확장성을 고려할 때, 붙여넣기 하면 잘 들어갈 수 있게 제작. 그럴려면 레이아웃별 구분을 잘 해야 한다. <main>을 함부로 넣지 않는 이유.

 

class="is_active"

.lists li:last-child {

}

 

 

---

디스코드에서 처음으로 제대로 코드리뷰도 하고, 조장님의 특강도 들었다. 나는 하나의 요소를 만들고 거기에 패딩, 마진을 주면서 레이아웃을 짰다. 그런데 조장님은 큰 테두리를 만들고, 레이아웃을 짜더라. 더 효율적일 것 같기도 했고, 자기만의 코드를 고집하기보다 다른 분들의 코드를 봐야하는 이유를 알게 되었다. 참 좋은 것 같다! 끝 :)