201218_TIL

🍎 오늘 한 일

---

✔️ Twittler 목업 구현
Javascript없이 HTML, CSS로만 웹페이지 목업을 구현했다. twitter와 비슷하게 만들어보고자 했는데, 하다보니 새로 알게된 개념들이 많아서 기억할만한 개념들은 따로 블로깅해두었다. 이번에는 대부분 flex로 구현했는데, 다음 프로젝트에서는 grid도 좀 더 익혀서 사용해봐야겠다. 얼른 Javascript도 적용해서 진짜로 작동하게 만들고싶다!!!

 

🍎 기억할 것

---

✔️outline:none;
input등 입력을 받는 태그를 누를때 생기는 윤곽선 제거해주는 속성

✔️box-sizing : border-box;
box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. 기본적으로 요소에 border가 있는 경우, 요소의 width, height에 테두리 두께까지 추가되어 크기가 측정된다. box-sizing 속성을 border-box로 지정해주면  테두리를 포함해서 크기를 재기 때문에 사이즈를 예측하기가 더 쉬워진다. 기억하자 border-box는 테두리 포함해서 크기를 재고, content-box는 테두리를 포함하지 않고 크기를 잰다!

✔️ 메모리 구조
코드영역 : 우리가 적은 코드가 적재되는 영역 (컴파일이 끝난 기계어로 들어감)
데이터 영역 : 전역 변수 static 변수들이 적재되는 곳 (프로그램이 끝날때까지 존재)
스택 영역 : 지역변수, 매개 변수들이 저장 (함수 호출시 사용되고 끝나면 반환, 컴파일 시 크기 결정)
힙 영역 : 메모리가 동적으로 할당되는 곳( 런타임시 크기 결정)

 

🍎 더 공부할 것

---

✔️ Javascript 메모리 구조
Javascript에서 메모리는 우리가 적은 코드가 적재되는 코드영역, 전역 변수 static 변수들이 적재되는 데이터 영역, 지역변수, 매개 변수들이 저장되는 콜스택 영역, 메모리가 동적으로 할당되는 힙 영역 네 영역으로 구분된다고 한다. 배웠던 primitive, reference type, 그리고 const, let, var와도 연관지어 생각해볼 수 있는 주제인 것 같아 좀 더 알아보고자 한다.

✔️ box-sizing 문제 원인 찾기
box-sizing : border-box; 을 적용했음에도 개발자 도구에서 사이즈 측정을 했을 때 반영되지 않는 문제가 있었다. 뭔가 다른 설정이 필요한건지 브라우저 문제인지..? 좀 더 알아봐야할 것 같다.

✔️ margin겹침
box-sizing문제 때문에 이것저것 찾아보다가 마진겹침(margin-collapsing) 현상에 대해 알게되었다. 상하 마진값이 어떤 상황에서 사라지는 현상인데, 대략 보다보니 한번쯤은 이 문제로 머리아프게 될 수 있을 것 같아 이해해 두어야 할 것 같다.