[TIL - 3] HTML 기초 - 3 + CSS

<audio>

<audio> 태그는 웹사이트에서 오디오를 재생하기 위해 사용하는 태그이다. source 태그를 통해 확장자가 다른 오디오 파일을 여러개 연결하여, 다양한 브라우저에서 정상적으로 작동하도록 할 수 있다.

 

속성

속성 이름	타입	내용
controls	boolean	컨트롤바 표시
autoplay	boolean	자동 재생 (크롬에서는 muted가 true일 때)
muted	boolean	음소거
loop	boolean	무한 반복

 

<!-- audio 사용 예 -->
<audio controls>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    이 문장은 여러분의 브라우저가 audio 태그를 지원하지 않을 때 화면에 표시됩니다!
</audio>

 ❗  크롬 브라우저에서는 muted 속성을 설정하지 않으면 autoplay 속성이 적용되지 않는다. (<video> 도 마찬가지)

 

 

<video>

<video> 태그는 웹사이트에서 비디오를 재생하기 위해 사용하는 태그이다. <audio>와 마찬가지로 source 태그를 통해 크로스 브라우징을 고려해줄 수 있다.

속성

속성 이름	타입	내용
controls	boolean	컨트롤바 표시
autoplay	boolean	자동 재생 (크롬에서는 muted가 true일 때)
muted	boolean	음소거
loop	boolean	무한 반복
width	number	(웹 표준 문법에 어긋나므로 사용을 지양)
height	number	(웹 표준 문법에 어긋나므로 사용을 지양)

 

<!-- video 태그 사용 예 -->
<video controls autoplay muted>
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>

 

 

CSS 선택자

속성 선택자

• [속성] : 해당 속성이 있는 요소 선택
• [속성=값] : 속성과 값이 전부 일치하는 요소 선택
• [속성~=값] : 속성값에 값이 포함되어 있는 요소 선택 (단어기준)
• [속성|=값] : 속성값이 값과 같거나 값-으로 시작하는 요소 선택
• [속성^=값] : 속성값이 값으로 시작하는 요소 선택
• [속성$=값] : 속성값이 값으로 끝나는 요소 선택
• [속성*=값] : 속성값에 값이 포함되어있는 요소 선택

 

조합 선택자

• 그룹 선택자( , ) : 여러 선택자들을 묶을 때 사용
• 자식 선택자( > ) : 왼쪽 요소의 직계 자식만을 모두 선택
• 하위 선택자(공백) : 왼쪽 요소 하위의 모든 자식을 선택
• 인접 형제 선택자( + ) : 왼쪽 요소와 같은 deps에서 가장 인접한 오른쪽 요소를 선택

 

가상 요소 선택자

• ::before : 콘텐츠의 맨 앞을 선택하는 선택자
• ::after : 콘텐츠의 맨 뒤를 선택하는 선택자
• ::placeholder : input의 placeholder를 선택하는 선택자

 

가상 클래스 선택자

링크 가상 클래스 선택자

• :link : 한번도 방문하지 않은 상태
• :visited : 한 번이라도 방문한 상태

 

동적 가상 클래스 선택자

• :hover : 마우스를 올린 상태 (모바일에서는 적용 X)
• :active : 마우스를 클릭하고 있는 상태

 

입력 요소 가상 클래스 선택자

• :focus : 입력 요소가 활성화 된 상태
• :checked : 체크박스가 표시되어 있는 상태
• :disabled : 비활성화 되어있는 상태
• :enabled : 요소가 활성화 되어있는 상태

 

구조적 가상 클래스 선택자

• :first-child : 첫 번째 자식 요소를 선택
• :last-child : 마지막 자식 요소를 선택
• :nth-child(n) : 부모의 자식 요소 중 n 번째 순서가 맞으면 선택
• :nth-last-child(n) : 부모 요소의 자식 요소 중 마지막에서 n 번째 순서가 맞으면 선택
• :nth-of-type(n) : 부모 요소의 자식 요소 중 n 번째로 등장하는 요소를 선택
• :nth-last-of-type(n) : 부모 요소의 자식 요소 중 마지막에서 n 번째로 등장하는 요소를 선택
• :first-of-type : 부모 요소의 자식 요소 중 첫 번째로 등장하는 요소를 선택
• :last-of-type : 부모 요소의 자식 요소 중 마지막으로 등장하는 요소를 선택

 

잘 몰랐던 사실들

• section 태그보다 article 태그가 더 구체적인 범위이다. (더 좁은 범위에 쓰인다.)
• 글로벌 속성 중 하나인 "title"은 툴팁을 제공한다.
  • 하지만 반응이 늦고, 디자인 커스텀이 불가능하기 때문에, 실무에서는 라이브러리를 주로 사용한다고 한다.

 

참조자료

• https://tcpschool.com/html-tag-attrs/audio-src
• https://tcpschool.com/html-tag-attrs/video-autoplay
• 프로그래머스 데브코스 2기