JongDDA의 한걸음 한걸음씩

1. 여러 개를 한꺼번에 선택하기 - 그룹 선택자 div, h1, p{ div, h1, p 태그 모두에 같은 스타일을 지정한다! } 2. 연결 선택자 - 하위 선택자 : 지정한 요소의 하위 요소 선택하기 div div{ div태그의 하위 태그로 div가 있을 경우 해당 하위태그 선택! } - 자식 선택자 : 특정 상위 태그와 특정 하위 태그 지정하여 선택 => 바로 한 칸 밑의 하위태그 중에서만! div > p{ div의 하위태그 p 태그만 콕 집어서 선택! } - 인접 형제(sibling) 선택자 : 가장 가까운 형제 요소 선택 div + p{ div 태그 바로 뒤에 있는 p 태그 선택! } - 형제 선택자 : 모든 형제 요소 선택 div ~ p{ div 태그와 동일 선상에 있는 모든 p 선택! } 3..

1. 웹문서를 통해 웹사이트 표시하기 - : 웹사이트를 이 영역 안에 표시한다! - src 속성에 원본 웹문서를 기입하여 표시한다. - frameborder : 프레임 경계선 - allow : 이 태그가 어떤 기능까지 수용할지 - allowfullscreen : 전체화면 허용 + 동영상 플랫폼에서는 공유 기능을 통해 영상 태그를 가져올 수 있다! 2. 비디오와 오디오 - , - 두 태그 모두 src 속성을 가지고 있다. - 브라우저마다 호환 정도가 다를 수 있다. - 공통적인 속성 controls : 재생, 일시정지 버튼 등이 있는 패널 loop : 자동으로 무한 반복되게 하기 muted : 소리 끈 상태로 시작 autoplay : 페이지 열면 자동으로 시작 => 쓰면 적용이고, 안 쓰면 미적용이므로 값..

코드

HTML5의 시맨틱 태그! - 웹 표준 HTML5에는 웹 문서 레이아웃을 표준화하는 태그들이 새롭게 추가되었다! 이름만 보고도 문서에서 해당 태그의 역할이 무엇인지 파악할 수 있는 '시맨틱 태그'가 바로 그것이다. - 시맨틱 태그를 사용하면 좋은 점 1) 검색 엔진은 시맨틱을 마크업한 페이지를 좀 더 영향력있는 페이지로 간주한다. 2) 눈이 불편한 사람에게 웹페이지를 낭독해주기가 편해진다. (웹페이지 낭독기) 3) 코드를 관리할 때 해당 태그의 의미를 파악할 수 있어 수정 및 보완이 용이하다. - 시맨틱 태그는 의미론적인 태그이다 의미가 포함되어 있다는 것을 제외하면 단순한 블록 태그이다.