TIL 24.10.16

윤지·2024년 10월 16일

TIL html

프로그래머스 데브코스

목록 보기

3/44

audio 태그

음원 삽입에 사용

필수 속성

src: 추가할 파일 경로 지정

추가 속성

controls: 재생바 생성. 웹브라우저마다 다른 UI로 표시될 수 있음
- css로 디자인 가능
autoplay: 자동재생. 현재는 사용자 권리 보호를 위해 지원 안 함
muted: 음소거

자동재생 방법: muted로 음소거 후 자바스크립트로 기능 추가

`<source>`

여러 형식의 소스 제공 시 사용. 현재는 잘 쓰이지 않음

샘플
- 구글 “오디오 라이브러리” 검색 ⇒ YouTube 제공 무료 mp3 파일 다운로드 가능

video 태그

비디오 삽입에 사용

필수 속성

src: 추가할 파일 경로 지정

속성

controls: 재생 컨트롤 패널
autoplay: 자동 재생
muted: 음소거

영상에서는 음소거 설정 시 자동재생 가능

라이브러리

videojs: 영상 주력 서비스에서 많이 사용. 모든 브라우저에서 동일한 디자인 구현 가능

최근 실시간 방송의 댓글 딜레이 문제 해결을 위해 WEBRTC(실시간 라이브 스트리밍) 기술 사용

⇒ 네이버, 아프리카TV 등에서 적용 노력 중

샘플
- 픽사베이 - videos 섹션에서 다운로드 가능

레이아웃을 위한 시맨틱 태그

헤더 영역을 구분하는데 사용
로고, 검색바, 메뉴 등이 주로 포함됨
웹사이트의 주요 탐색 요소들이 배치되는 영역

nav

메인 네비게이션 메뉴를 포함하는 영역
사이트의 주요 페이지로 이동할 수 있는 링크들이 위치
헤더 태그 내에 들어갈 수도 있음
ul, li로 구성할 수도 있고, 깊이에 따라 a 태그를 연속으로 사용할 수도 있음

section

페이지의 섹션을 구분하는 데 사용
section 태그 내부에는 하나의 heading 태그 사용을 권장
주력 콘텐츠

article

독립적으로 배포하거나 재사용할 수 있는 자체 완결적인 콘텐츠를 담는 영역

aside

주요 콘텐츠와 간접적으로 연관된 부가 정보를 담는 영역 (예: 사이드바, 광고)
비주력 콘텐츠

웹페이지의 하단 영역을 나타내며, 저작권 정보, 연락처, 관련 링크 등을 포함

main

웹페이지의 주요 콘텐츠를 포함하는 영역
main 내에 section을 사용 페이지당 하나만 사용되어야 함

글로벌 속성

모든 태그에서 사용할 수 있는 속성

속성명	설명
`id`	요소의`고유`식별자 지정
`class`	CSS 스타일이나 JavaScript에서 사용할 요소의 클래스 이름 지정
`style` `지양`	요소의 인라인 CSS 스타일 정의
`title`	요소에 대한 추가 정보를 제공하는 툴팁 정의
`lang`	요소의 언어 지정 (예:`en`,`ko`)
`tabindex`	요소의 탭 순서 설정
`accesskey`	특정 키를 사용하여 요소에 접근 가능하도록 함
`data-*`	`data-`로 시작하는 `사용자 정의` 데이터 속성 정의
`hidden`	요소를 숨김. 숨겨진 요소는 화면에 표시되지 않음
`dir`	텍스트의 방향 설정 (예:`ltr`,`rtl`)
`contenteditable`	요소의 콘텐츠 `편집 가능` 여부 표시
`spellcheck`	요소의 맞춤법 검사 기능 활성화 또는 비활성화

ISO 639 표준

언어 식별을 위한 국제 표준 코드 체계

각 언어에 고유한 2자리 또는 3자리 코드 할당
- 언어 구분 명확

예시:

한국어: 'ko'
영어: 'en'
일본어: 'ja'

CSS 시작하기

적용 방법

1. 내부 스타일 (Internal Style): HTML 문서의 <head> 섹션 내 <style> 태그로 CSS 직접 작성
2. 외부 스타일 (External Style): 별도 CSS 파일 생성 후 HTML 문서 <head> 섹션의 <link> 태그로 연결
3. 인라인 스타일 (Inline Style): HTML 요소의 style 속성으로 직접 스타일 적용
파스칼케이스 - 첫글자가 대문자로 시작 UserInfo
스네이크케이스 - user-info/user_info html css
카멜케이스 - userInfo js

일반적으로 html css에서는 스네이크케이스를 많이 쓴다

선택자

전체선택자: *(asterisk)
태그 선택자: 태그명
아이디 선택자: #, id 속성의 값으로 선택자를 지정하는 방법
클래스 선택자: ., class 속성의 값으로 선택자를 지정하는 방법
속성 선택자
1. [속성=값]: 속성과 값이 일치
2. [속성~=값]: 속성값에 값이 포함되어 있으면 선택(단어기준)
3. [속성\=값]: 속성값이 값과 같거나 값- 시작하면 선택
4. [속성^=값]: 속성값이 값으로 시작하면 선택
5. [속성$=값]: 속성값이 값으로 끝나면 선택
6. [속성*=값]: 속성값에 값이 포함되어 있으면 선택
그룹 선택자: , 여러 선택자를 그룹 짓는 방법
자식 선택자: >, 특정 부모 요소의 직계 자식만을 대상으로 지정하는 방법
하위 선택자: 공백, 특정 요소의 하위를 대상으로 지정하는 방법
인접 형제 선택자: +, (인접한) 형제 요소를 선택
일반 형제 선택자: ~, 모든 형제 요소를 선택
가상 요소 선택자:
- ::before 콘텐츠의 맨 앞을 선택하는 선택자
- ::after 콘텐츠의 맨 뒤를 선택하는 선택자
- ::placeholder, placeholder 선택하는 선택자
가상 클래스 선택자:
- 요소의 특정 상태를 가지고 선택하는 방법
- 링크 가상 클래스 선택자
  - :link - 방문하지 않은 링크를 선택
  - :visited - 방문한 링크를 선택
  - :hover - 마우스를 올렸을 때의 링크를 선택
  - :active - 클릭하는 순간의 링크를 선택
- 구조 가상 클래스 선택자
  - :first-child - 첫 번째 자식 요소를 선택
  - :last-child - 마지막 자식 요소를 선택
  - :nth-child(n) - n번째 자식 요소를 선택
  - :not(선택자) - 해당 선택자를 제외한 요소를 선택
- 동적 가상 클래스 선택자: 사용자의 어떤 행동에 따라 동적으로 변하는 상태
  - :hover - 마우스를 올렸을 때의 상태
  - :active - 클릭하는 순간의 상태
  - :focus - 포커스를 받은 상태 (예: 입력 필드)
- 입력 요소 가상 클래스 선택자
  - :focus - 포커스를 받은 입력 요소를 선택
  - :checked - 체크된 입력 요소를 선택
  - :disabled - 비활성화된 입력 요소를 선택
  - :enabled - 활성화된 상태
- 구조적 가상 클래스 선택자
  - E:first-child - E 요소의 첫 번째 자식 요소를 선택
  - E:last-child - E 요소의 마지막 자식 요소를 선택
  - E:nth-child(n) - E 요소가 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택
  - E:nth-last-child(n) - E 요소가 부모 요소의 자식 요소 중 마지막에서 n번째 순서가 맞으면 선택
  - E:nth-of-type(n) - 부모 요소의 자식 요소 중 n 번째로 등장하는 E 요소를 선택
  - E:nth-last-of-type(n) - 부모 요소의 자식 요소 중 마지막에서 n 번째로 등장하는 E 요소를 선택
  - E:nth-of-type - 부모 요소의 자식 요소 중 첫 번째로 등장하는 E 요소를 선택
  - E:nth-last-of-type - 부모 요소의 자식 요소 중 마지막으로 등장하는 E 요소를 선택

윤지

프론트엔드 공부 기록 아카이빙🍁

이전 포스트

TIL 24.10.15

다음 포스트