1주 차 - 구조 및 디자인
이 게시물은 지난주에 배운 주요 내용과 선택한 리소스에 대한 검토 및 다음 주 학습에 적용할 수 있는 회고를 설명합니다.
배운 것
구조, 구조, 구조 및 기타 구조. HTML은 구조의 언어입니다. 과거의 HTML에서 볼 수 있는 주요 개선 사항 중 하나는 다음과 같은 더 많은 구조 태그입니다.
<main></main>
<section></section>
<header></header>
<footer></footer>
이러한 태그를 포함하면 HTML 문서 구성이 훨씬 더 세분화됩니다.
<div>
태그를 사용하는 고전적인 방식과 비교하여 동일한 작업을 수행합니다. 이 간단한 디자인을 선택하면 HTML 문서 구조를 훨씬 쉽게 검토할 수 있습니다.들어가는 데 약간의 시간이 걸리는 주요 내용은 DOM(문서 개체 계층 구조)의
<body>
및 <main>
태그 간의 차이입니다. 다음은 새 태그가 있는 HTML5 문서의 예입니다.<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
차이점에 대한 간단한 설명은 본문은 DOM의 모든 항목을 위한 것이고, 기본은 해당 페이지의 고유 콘텐츠를 위한 것입니다.
CSS3에는 내가 사용한 적이 없는 몇 가지 흥미로운 추가 기능이 있습니다. 정규식 선택기를 통해 DOM 개체 내의 거의 모든 것에 디자인을 첨부하는 의사 클래스 및 증가.
이것은 HTML과 CSS에 대한 간략한 재도입이었지만 JavaScript 학습과 함께 시간이 지남에 따라 이러한 기술이 향상될 것이라고 생각합니다.
리소스 검토
FreeCodeCamp는 프로그래밍을 배우기 위한 모든 캠페인을 시작하기에 좋은 영역입니다. 한 입 크기의 설명과 실습 경험은 모든 수준의 학습자에게 적합한 초기 항목을 제공하고 연습은 적절한 난이도 경사를 제공합니다.
그러나 나에게 스니펫 구조 접근 방식은 지금까지만 진행됩니다. 단일 유동 문서의 필요성은 주제의 전체 구조를 파악하기 위해 집중을 최대화하는 데 유용합니다.
FreeCodeCamps 리소스를 지원하기 위해 the Mozilla MDN resource - HTML Basic은 FreeCodeCamps에서 설명한 스니펫 접근 방식과 연결하기 위해 HTML5 자료에 대한 간결한 토론을 얻을 수 있는 좋은 방법을 제공했습니다.
회고전
종료
다음 주에는 여정의 주요 주제인 JavaScript를 살펴볼 것입니다. HTML5와 CSS3를 이해함으로써 이 지식은 JavaScript를 최대한 활용할 때 매우 도움이 될 것입니다.
다음 주에 만나요!
~ 잭/종료
Reference
이 문제에 관하여(1주 차 - 구조 및 디자인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jwhitt3r/structure-and-design-week-1-50ej텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)