⏺학습한 내용🕵️‍♂️

⭕ helbak 실습

• 모든 html tag들의 초기화 작업을 할 수 있는 방법*{margin: 0; padding: 0; box-sizing: border-box;}
• box-sizing: border-box; : padding으로 인해 공간의 크기가 달라지는것을 방지하기 위함)
• font-weight 는 100단위로 올라가고 높아질수록 font 굵기도 커진다.
• y 축 중앙 정렬 tip
  top: 50%;
transform: translateY(-50%);}
  -position: absolute; 는 width 값을 정확히 인식을 할 수 없기 때문에 width100% 나 px 단위로 정확하게 기재해야함.
• 익스플로어에서는 main tag를 인지못해서
  <main role="main" class="main-content">
  role에 main 속성값 꼭 같이 기입해야함
• article tag 사용할 때는 이 영역을 대표하는 title이 필요하다 (helbak 기준으로는 제품명)
• 크기 단위의 비교 >>> 1em = 16px;
• text-align: center;는 inline, inline-block요소에만 적용됨

---

✅ 실무 TIP

▶ id 속성값

• 하나의 속성값만 들어가고 여러개의 별명이 있을 수 없다.
• 하나의 html 문서에서 동일한 id가 존재할 수 없다.
• a tag에는 id가 추가적으로 들어갈 수 있다.

▶ 특정기능을 작동시키는 css code 추가방식

.ellipsis{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

• white-space: nowrap; => x축 스크롤도 생기며 한 줄로 영역을 벗어나서 표현됨.
• text-overflow: ellipsis; => 벗어나는 text 말줄임표로 표현
• css에서 이렇게 code를 먼저 작성하고, html에서의 해당 영역에 class로 추가하는 방식활용

⏺학습내용 중 어려웠던 점🤦‍♂️

🔘 똑같은 코드를 사용하더라도 미세한 위치차이가 있을 수 있다. 오늘은 크게 없었음!

⏺해결방법🙋‍♂️

🔘 같은 문제로 질문을 해주신 분이 있어 같은 방안으로 적용해보니 해결됐다. (middle 값을 줘도 위쪽으로 틈이 있었는데 해당영역의 fontsize를 0으로 조정하니 해결됨.)

⏺학습소감🙇‍♂️

🔘 오늘은 뭔가 착착 잘 했던것 같다. 후반에 알려주신 css set만들어서 활용하는 방법은 엄청 꿀팁이다..! velog에 다른 개발자분들의 글을 보면 정말 드넓은 개발자 세상에서 아주 작은 발걸음을 떼고있구나 라는 걸 다시 한번 느끼고 차근차근 꾸준하게 열심히 해보자는 생각을 했음,,