728x90
1. 리뷰
아무리 공지용이라도 디스코드도 sns다... 요즘 너무 과하게 들여다보는데 공부할땐 보지 말자.뇌지컬 관리 똑바로 하자.
2. 학습 키워드
- 시멘틱 태그: nav, section, article, aside, header, main, footer
- section과 article 용례
- 트리 구조 - 노드(DOM트리랑 같은 개념인가? 확인 필요)
- elements vs attributes
- key=value
- radio와 checkbox의 공통점과 차이점(name으로 그룹핑하여 택일, 그룹핑하여 다중선택)
- textarea 줄바꿈
- id와 class의 올바른 사용법, 그리고 최신 마크업 트렌드에서의 사용예시
- 한 요소에 클래스 여러개 주는 법
- form태그의 새로고침과 button의 submit속성의 새로고침이 같은 내용인가?
- 종합퀴즈 6번 문단
- 종합퀴즈 7번 section
3. 스스로 설명해보기
- 시멘틱 태그: html5에서 추가된 의미에 부합하는 태그들로 검색엔진에 좀 더 명확하게 해당 마크업 부분이 어떤 부분인지 전달되어 SEO에 유리함.
- section과 article의 의미와 예시는 아직 이해가 부족하고 이견이 갈리는 듯 하여 공부를 보충하여 별도 문서에 정리중.
- HTML의 트리 구조: <html>요소를 뿌리로 하여 조상요소-부모요소-자식요소,형제요소로 뻗어 내려가는 트리 구조이다.
- DOM 트리: document object model이란 직관적인 이름에서 볼 수 있듯이 dom은 html 문서를 자바스크립트가 접근하여 조작할 수 있도록 객체로 변환한 모델이다. 이 때 document 객체가 html의 트리 구조에서 최상위에 자리하여 뿌리인 <html> 요소의 한단계 위에서 document로부터 html 뿌리 구조가 뻗어나가는 모양을 dom트리라고 함.
- 태그의 속성(attribute)은 key=”value” 형태로 이루어짐.
- form태그의 새로고침과 button의 submit속성의 새로고침이 같은 내용인가?
- form 내부에서 type=submit 속성의 button이 존재하는 경우 버튼 클릭시 form태그가 가진 action속성의 url로 form에 입력된 데이터를 전송하며 이때 페이지가 새로고침됨. 새로고침을 막으려면 자바스크립트에서 이벤트리스너에서 preventDefault() 하여 이벤트의 기본동작을 막아야 함.
4. 이해가 부족했던 개념
- DOM
- p와 div로 똑같이 문단을 나눴을때 차이
- 폰트 가져오는 법 두가지 다시 복습
-
- 구글폰트
- 로컬에 저장된 폰트
-
- 웹표준: HTML Living Standard 에서 웹 표준 제시
5. 공부할 것
- bem 방식으로 클래스명 작성: 다음주 주말
- 웹표준, seo에 근거한 html 마크업: 오늘 했던 실습파일들에 주말간 적용해보기
- 김버그 html - 시멘틱 태그 관련 복습: 내일
728x90
'기록 > 코드스테이츠 프론트엔드' 카테고리의 다른 글
| 2주 1일차 - css 기초 (0) | 2022.05.02 |
|---|---|
| 1주 6일차 - 조건문/ 반복문 복습 (0) | 2022.04.30 |
| 1주 4일차 - 반복문 (0) | 2022.04.28 |
| 1주 3일차 - 조건문 (0) | 2022.04.27 |
| 1주 2일차 - 변수와 자료형 (0) | 2022.04.26 |