210729 개발일지

📌 학습한 내용

네이버 뉴스 실습

전체 코드 : 💾

상단 영역

• class로 주요 레이아웃을 단순화 (반복적으로 사용하는 기능들을 css에서 미리 만들어 줌) -> 코드 분량을 간소화 시킬 수 있음

.news-container {
	width: 1080px;
	margin: 0 auto;
}

.news-flex-between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.news-flex-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

• placeholder : <input> 영역에 어떠한 정보를 입력해야 하는 지 사용자에게 알려줄 때 사용하는 html 속성
  

메인 영역

'신문 헤드라인'

• <article> : 안에 대표하는 타이틀 정보(h1 ~ h6) 가 하나 이상 필요

👉 사이트 카피캣 실습시, JS 기능을 끄고 싶을 때,

• box-sizing: border-box; : 테두리를 기준으로 박스의 크기 결정, 익스플로러 하위 버전에서 호환이 되지 않음.

• 부모가 position: relative;이거나 순수 3차원적인 특징을 갖고 있을 때, 자식이 3차원일 경우, 자식의 top, left, bottom, right는 부모를 기준으로 형성.

📌 학습내용 중 어려웠던 점

1. <nav>와 <div>의 차이

2. <article>과 <section>

📌 해결방법

인터넷 서칭을 통해 알아보았다.
참고 사이트 :
1. https://developern.tistory.com/entry/how-to-article-section-div-tag
2. https://itfix.tistory.com/650
3. https://aboooks.tistory.com/346

결론적으로는 <nav>는 inline요소, <div>, <article>, <section>은 block요소에 해당하며, 그 기능으로 영역을 나누는 데 사용된다. 대부분 <div>로 대체할 수 있다.

• <nav>
  : 다른 페이지로 링크를 통해 페이지간 이동을 유도하거나 해당 페이지의 정해진 위치로 이동할 수 있도록 링크해야 할 경우에 사용 (navigation links로 이해)

• <article>
  : 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용, 내용을 독립적으로 구성하는 하나의 완전한 콘텐츠를 의미 (article안에 담긴 내용만으로도 의미를 파악할 수 있는 내용)
  ex) 블로그 글, 포럼 글, 뉴스 기사 등

• <section>
  : 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용

📌 학습소감

오늘도 크게 어려움 없이 잘 따라갔다. 중간중간 강사님과는 다른 방식으로 조금씩 바꾸어 적용해 보았다. 오늘은 에러 나는 것 없이 한 번에 구현이 잘 되어 기분이 묘했다. 하지만 요소를 분리하는 데에 있어 여러가지 태그가 존재한다는 것을 알고 있는 것과 실제 사용하는 데에는 고민 사항이 많았다. 결론적으로 모든 영역 구분 태그를 사용할 수 있다지만, 나는 아직까지 <nav>를 제외하고는 어느 위치에 어떤 태그를 사용해야 할지 고민된다. 🤔