🎬 HTML

CSS의 기초

CSS의 코드 형식 선택자 { CSS 속성 : 속성 값; } 선택자 - CSS 효과를 지정하고자 하는 대상 CSS 속성 - 선택자에 적용하고자 하는 CSS 효과의 종류 속성 값 - CSS 효과에 지정되는 값 HTML 속성과 CSS 속성의 비교 CSS 적용 방법 인라인 스타일 방식 - 문서 내의 특정 부분에만 CSS 코드를 지정할 때 사용한다. 내부 스타일 방식 - 하나의 문서 내에 공통으로 적용할 CSS 코드를 지정할 때 사용한다. 외부 스타일 방식 - 동일한 CSS 코드를 여러 문서에 공통으로 적용할 때 사용한다. 스타일 속성의 상속 외부 스타일 -> 내부 스타일 -> 인라인 스타일 스타일의 우선순위 인라인 스타일 > 내부 스타일 > 외부 스타일 !important 속성 - 스타일의 우선순위를 무시하고..

오디오와 비디오

- 기존 html4에서 사용한 멀티미디어 요소 삽입 태그 - 태그와 마찬가지로 외부 멀티미디어 요소를 삽입하는 태그(종료 태그를 사용하지 않음), 태그의 'src' 속성은 태그의 'data' 속성과 동일하다. - 웹 문서에 배경음악이나 효과음을 삽입하기 위한 태그 태그의 속성 src - 재생할 오디오 파일의 경로를 나타낸다. autoplay - 웹 문서 로딩 시에 오디오를 자동으로 재생시킨다. controls - 기본으로 제공되는 재생 컨트롤 집합을 표시한다. 일반적으로 표시되는 컨트롤은 재생, 일시 정지, 검색 및 볼륨 설정이 포함된다. loop - 재생할 오디오의 반복 재생을 설정한다. muted - 오디오는 재생하지만 소리는 차단한다. preload - 웹 문서 로딩 시에 오디오의 로딩 상태를 나타..

시멘틱 태그

시멘틱 태그의 종류 - 사이트의 이름 등과 같이 웹페이지의 머리부분을 나타내는 영역을 지정하는 태그 - 메뉴나 하이퍼링크 모음 등을 나타내는 영역을 지정하는 태그 - 주요 내용을 나타내는 영역을 지정하는 태그, 로 세분화 될 수 있다. - 을 세분화하여 지정하는 태그 - 주요 내용이 아닌 부가적인 내용을 나타내는 영역을 지정하는 태그 - 웹페이지의 정보 등 페이지 하단에 출력되는 내용을 나타내는 영역을 지정하는 태그 기타 시멘틱 태그 - 날짜와 시간 표현에 의미를 주고자 할 때 사용하는 태그, datetime 속성을 사용할 수 있다. - 디스클로저 위젯을 생성하는 태그, open 속성을 사용하여 세부 요소를 출력할 시기를 결정할 수 있음 - 의 하위 요소로 나타내거나 숨기기 위해 클릭하는 대상을 지정하는..

폼 관련 태그

태그 태그는 태그 이름 그대로 버튼을 생성하는 태그이다. 태그에서 type 속성 값으로 'submit', 'reset', 'button'을 지정하는 것과 같은 모양의 버튼이 생성된다. 그렇다면 굳이 태그를 만들어서 사용하는 이유는 무엇일까? 태그가 태그와 구별되는 장점들을 살펴보면서 그 이유를 살펴보자. 태그의 장점 태그를 사용하여 버튼을 생성하면 태그 이름이 'button'이므로 화면낭독기가 버튼의 존재를 명확히 알 수 있다는 장점이 있다. 태그는 콘텐츠를 포함할 수 있기 때문에 버튼 안에 아이콘 등을 추가하거나 CSS 효과를 적용할 수도 있다. 아마도 이러한 장점들 때문에 태그 대신 태그를 통해 버튼을 생성하는 것 같다. 태그 태그는 폼 내의 계산 결과를 출력할 수 있도록 지정하는 요소이다. 태그의 ..