TIL (note03)

새로 알게된 것 메모 남기기

📓 참고

① 각 브라우저에는 요소들마다 기본적으로 정의된 simple css가 있다.
(예. h1, strong은 bold(font-weight: 700), p는 normal(font-weight: 400))

font-weight를 변경하기 위해 body에 속성을 작성할 경우 적용되지 않아 각각 요소마다 직접 작성해줘야 한다.

② CSS 속성 작성하는 순서를 보통 '코딩 컨벤션' 혹은 '마크업 컨벤션' 이라 한다. 일하는 회사마다 스타일이 다르며, 특정 규칙을 지키면서 작성하는 것은 유지보수 측면과 협업할 때 좋은 습관이다.

<참고 사이트>
nhn nuli 코딩 컨벤션
레진코믹스 마크업 가이드
bootstrap에서 사용하는 stylelint

✨③ 이미지 사이즈 조정할 때 굉장히 많이 쓰는 조합

.parent {
  width: 400px;
}

.child {
  width: 100%;  // ★부모 요소 콘텐츠 길이의 100%에 맞게 설정
  height: auto;  // ★height는 width에 맞게 알아서 조정 
}

🤔원래 img는 inline 요소이지만 특수한 경우로 자체적으로 갖고 있는 사이즈의 width와 height를 조절할 수 있다. 약간의 오차가 생길 수 있는 경우를 방지하기 위해 width, height 값을 적용할 수 있는 형태인 'display: block;'을 명시해준다❗ (없어도 결과 동일)

.card img {
  display: block;  // 너비, 높이 설정 가능한 요소임을 명시함
  width: 100%;
  height: auto;
}

✨④ position을 px(픽셀)이 아니라 '%' 를 이용했을 때, 요소를 정가운데 위치시켜주기 위해 transform: translate 속성이 필요하다.

.parent {
  position: relative;
}

button {
  position: absolute;
  top: 50%;
  transform: translate(-50%);
}

top: 50%; : relative를 적용한 부모 요소의 height 기준으로 top에서 50%만큼 떨어져 위치하게 된다.
transform: translate(-50%); :
translate를 하지 않는다면 버튼의 '왼쪽 모서리 꼭지점' 기준으로 부모 요소의 가운데 위치하게 된다.
버튼의 '가운데' 지점을 기준으로 정가운데 위치하기 위해 자기 자신의 반만큼 위로(y축의 -50%만큼) 이동해야 한다.
(x축, y축 모두 조정하는 경우 translate(-50%, -50%) 설정!)

• top의 기준은 relative를 적용한 부모 요소
• transform의 기준은 속성을 적용시킨 자기 자신