210803 개발일지

📌 학습한 내용

네이버 뉴스-TV연예 실습 2

전체 코드 : 💾

메인 영역

'AiRS 추천 뉴스'

• <button> : inline-block 요소의 성격

'오늘의 프로그램'

'TV 프로그램 구독'

• <i> : inline 요소

'영화계는 지금'

'많이 본 연예 정보'

• <a> 안에 <a>가 들어갈 수는 없음 -> <a>가 정상적으로 인식되지 않음
  👉 글자를 넣을 때 사용하는 태그들을 연달아서 작성하는 것은 불가능

ex)
<h1><h1></h1><h1>    (x)
<a><a></a></a>       (x)

'기자추천 연재코너'

• box-sizing: border-box; : 공간의 크기가 border 까지 포함된 크기로 정의
  -> 때문에 아래와 같은 현상이 발생

#ent-main .ent-left #ent-section-9 li img {
	width: 200px;
	height: 122px;
}

-> 따라서 width: 100%;를 사용해 주어야 함.

📌 학습내용 중 어려웠던 점

📌 해결방법

📌 학습소감

전체적으로 쉽게 따라갔다. 중간에 display 속성을 자주 사용되는 것 같아 inline 요소의 특징을 가진 태그들과 block 요소의 특징을 가진 태그들을 따로 정리해보는 게 좋을 것 같아 확인해 보았다. (참고 페이지 : https://uxgjs.tistory.com/44 ) 코드가 길어지고, 가끔 오늘과 같은 긴 페이지들이 등장해서 이제 velog에 작성하는 방식에도 조금 변화를 줘야할 것 같다. 🤔