0726 TIL

CSS

🙆‍♀️ CSS의 사용목적을 이해할 수 있다.

1. 콘텐츠의 배치와 위치 (레이아웃 디자인)
2. 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)

위의 요소를 갖추고 있으면 더 나은 사용자 경험(UX, User expirenece)을 제공할 수 있습니다.

🙆‍♀️ CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.

1. 절대 단위: px, pt 등
2. 상대 단위: %, em, rem, ch, vw, vh 등

🙆‍♀️ 각 단위가 적합한 경우를 구분할 수 있다.

1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
   px(픽셀)을 사용합니다.

2. 일반적인 경우
   상대 단위인 rem을 추천합니다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.)

3. 반응형 웹(responsive web)에서 기준점을 만들 때
   반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다를 수 있겠죠. 이 때에는 디바이스 크기 별로 CSS를 달리 적용해야 합니다. 이 때에, 디바이스 크기를 나누는 기준을 보통 px로 정합니다.

4. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
   이 때에는 vw, vh를 사용하세요. 웹사이트의 보여지는 영역을 Viewport라고 합니다. vw, vh는 각각 viewport width와 viewport height을 뜻합니다. 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트를 가끔 본 적이 있을 겁니다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh를 사용해 구현한 것입니다. (참고로 body태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때에 비율입니다.)

🙆‍♀️ CSS 박스 모델을 이해할 수 있다

• box model : 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 됩니다.

🙆‍♀️ block과 inline-block

• 줄바꿈이 되는 박스(block)
  <div> , <p>

• 옆으로 붙는 박스(inline, inline-block)
  <span>
  inline 박스는 width, height 속성이 적용되지 않습니다.

span태그에 display: inline-block을 추가해주면 width,height 속성이 적용된다.

🙆‍♀️ 박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.

content-box는 박스의 크기를 측정하는 기본값입니다.
그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.

모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다. 일반적으로 box-sizing은 HTML 문서 전체에 적용합니다.

* {
  box-sizing: border-box;
}

그외

document 객체에 textContent를 number로 작성해도 string으로 저장된다.

return과 break의 차이

만약에 함수 안에 작성된 루프 안에서 break가 쓰였다면, break를 감싸고 있는 루프를 빠져나가고 함수 밖으로는 나가지 않는다.

return은 함수 실행을 종료하고 함수를 호출한 곳으로 실행 흐름을 옮긴다.